Customize option types
How to customize product options' content, order, styles, and display conditions
EXPO comes with 6 basic option types:
Text: a title and an input text field
Number: a title and an input text field
Choice list: single choice list with radio button
Checkbox: multiple choice checkboxes
Dropdown menu: single choice dropdown selector
Swatches: single choice color/image swatches with customizable shapes and stack styles
Also, it offers premium-only option types including:
Button
File upload
Time picker
Date picker
Within Text option, you can add certain criteria to validate the input text formatting for Email or URL type using Regex.
Actual available options and features may differ based on your current subscription plan.
The content, layout, and styles of your option types can be customized within the EXPO app.
1. Customize option’s content
When expanding an option item, you are free to edit these details:
Option name
Title on Cart
Description
Option value description, etc.
How to add links to the option description?
When the additional description is enabled, you will have a new input field to enter further information. You can add an explainer to the item or useful resources like external links.
On product pages, links are displayed according to how your current theme designs it.
2. Customize option’s layout
You can easily drag and drop to change the order of option items. It won’t affect the conditional logic rules inside the options.
Note:
Conditional display rules work regardless of the options’ relative positions to one another.
3. Customize option’s styles
By default, your new options look and feel just like other elements designed by your current published theme.
Meaning when inserting new fields to the existing product pages, the field appearances will automatically take on the styles of the theme’s field element.
In some cases, your current theme has no styles for the input fields, as shown on the right of the above figure.
In order to customize the product form field styles, you can use custom CSS.
By defining the styles in theme.liquid or theme.scss.liquid, and enter the CSS class, you will be able to change the field styles accordingly.
Last updated
