Options and Display Types
Options define how customers choose between products in a listing. Each option has a name (like “Color” or “Size”) and a display type that controls how the choices appear on the storefront.
What Are Options?
An option represents a single attribute that varies across the products in a listing. Common examples:
Color – Red, Blue, Green
Size – Small, Medium, Large
Material – Cotton, Polyester, Silk
When a listing has multiple options, customers see a separate selector for each one. The combination of selected values determines which product is shown.
Display Types
Each option has a display type that controls how values appear on the storefront. You can choose a different display type for desktop and mobile.
Dropdown
A select menu that opens when clicked. Each item shows the product image alongside the value text. Best for options with many values or when product previews are helpful.
Radio Buttons
A vertical list of clickable items. Each value is displayed as a selectable row. Best for a small number of text-based options where all choices should be visible at once.
Text Swatch
Pill-shaped buttons displayed inline. Each button shows the value text. Best for short text values like sizes (S, M, L, XL) or simple labels.
Color Swatch
Small square color tiles. Each swatch displays a solid color based on the hex code assigned to the value. Best for color options where a visual preview is more useful than text.
Image Swatch
Small image thumbnails arranged inline. Each swatch shows the product’s image. Best for options where the visual difference between products is the main differentiator, like patterns or styles.
Mobile Display Type
Each option can use a different display type on mobile devices. This is useful when a display type that works well on desktop takes up too much space on a small screen. For example, you might use Image Swatch on desktop but switch to Dropdown on mobile.
If no mobile display type is set, the option uses the same display type on all screen sizes.
Managing Options
Options are shared across your account. When you create an option in one listing, it becomes available for other listings too.
Viewing All Options
Go to the Options page from the navigation menu to see all options across your store. Each option shows its display type, number of values, and how many listings use it.
Editing an Option
You can edit an option’s name, display type, and mobile display type. Changes to display type affect all listings that use the option.
Option Values
Each option has a list of values. Values can include:
Text – the label shown to customers (required)
Color – a hex color code for Color Swatch display (e.g. #FF0000)
Image – an image URL for Image Swatch display
You can add and edit values from the option detail page. Values that are in use by products cannot be deleted.
Tips:
Use Color Swatch for color options and Text Swatch for size options as a starting point.
If an option has more than 6-8 values, Dropdown keeps the page clean on both desktop and mobile.
Option names appear as labels above the selector on the storefront, so keep them short and clear.