Choose a display style

Pick how each product option is displayed — swatch, button, price tile or dropdown.

Every option is displayed with one of twelve styles. You pick it separately for desktop and mobile, and separately for product pages and collection pages.

Set a style

1. Go to Options and choose the Product page or Collection page tab.

2. Find the option you want to change.

3. Click the Display on Desktop button and pick a style from the list.

4. Set Display on Mobile too, or leave it on Same as Desktop.

5. Click Save.

Which styles to set up for option names

There are total of 12 styles offered. The styles are grouped into four main families: Color/Image type, Button type, Displayed price type, and Dropdown type. Each row shows a small live preview built from your own settings. Below is details of each style:

Color/Image type

Style	What shoppers see
Color or custom image swatch	A chip filled with a colour, two colours, or an image you upload.
Pill swatch	The same chip inside a pill, with the value name next to it.
Variant image swatch	The variant's own product image, used as the swatch.

Button type

Style	What shoppers see
Button	A bordered button with the value name.
Button without border	Text only, no box.
Pill button	A rounded button with the value name.

Displayed price type

Style	What shoppers see
Variant image swatch with price	The variant image, its name and its price in one tile. Product pages only.
Color or custom swatch with price	The colour chip, the value name and the price in one tile. Product pages only.
Button with price	A button with the value name and its price.

Dropdown type

Style	What shoppers see
Dropdown	A plain select list.
Color or custom swatch dropdown	A select list with a colour chip beside each value.
Variant image dropdown	A select list with a thumbnail beside each value.

Extra choices on the pickers

• Same as Desktop — the first choice on every Display on Mobile picker. Mobile follows whatever desktop uses.

• Same as Product page — on the Collection page tab, the desktop picker can simply mirror the product page.

• Do not show (Default) — on the Collection page tab only. Swatches will not be shown on collection page. This is the starting value for every option.

Which styles need swatches set up

Four styles render a colour or an image you provide, so they also need every value filled in: Color or custom image swatch, Pill swatch, Color or custom swatch with price and Color or custom swatch dropdown. For those, the option card shows a Set swatches button and flags any values that are still missing.

Variant image swatch, Variant image swatch with price and Variant image dropdown use the image already assigned to each variant in Shopify, so there is nothing to fill in — but each variant does need a featured image. The button and plain dropdown styles use the value's text and need nothing at all.

Use the variant's own image as the swatch

Those three styles have no Set swatches step, but the images have to be in place in Shopify before they render:

1. In Shopify admin → Products, open the product and give every variant of the option a featured image. A variant with no image has nothing to show.

2. Back in the app, go to Options and click Update data in the Sync your online store card, so it picks the new images up — see Sync product data.

3. Set the option's Display on Desktop to Variant image swatch, Variant image swatch with price or Variant image dropdown, then Save.

If a swatch comes out blank, it is almost always one of these two: the variant has no featured image, or the images were added after the last sync.

Some styles are part of a paid plan. On a plan that doesn't include one, its row reads style name (Upgrade to a higher plan) and can't be selected — see Plans and pricing.

Related pages

• Set color and image swatches

• Customize a swatch style

• Show swatches on collection pages