Swatch on product page
How swatches behave on product pages — single variants, carousels, dynamic variant images and required options.
Settings → Swatch on Product Page holds the storewide behaviour of swatches on product pages. A live Preview on the right shows the effect.
The section starts with a master switch, Enable and customize swatch display settings. Turn it off and the app leaves your product pages alone.
Product Page Appearance
Show single variant swatch
Display the swatch option even if the product only has one variant. Off by default — most stores don't want a lone swatch on a product with nothing to choose.
Show Carousel
Show the variant swatch in the single line, instead of letting it wrap. Useful for options with many values.
Use dynamic variant image
Automatically show the variant image when a swatch is selected.
Show Carousel here covers product pages only, and applies to every style. Collection pages have their own Carousel switch, set per style in Appearance → Collection page → Customize → Shape and layout — see Customize a swatch style. Turning one on does not turn the other on.
Use dynamic variant image
Use dynamic variant image — Automatically show the variant image when a swatch is selected. — is off by default. It's the setting that makes image grouping work on products with several options — see Group images by swatch.
With it on, the app matches every choice to the full variant — all of the shopper's options together, not one at a time:
The gallery follows every option. Without it, only options shown with a colour or image change the gallery; buttons and the plain Dropdown don't. With it on, they all do, so the photos always belong to the exact combination picked.
Image swatches follow the selection. On Variant image swatch, Variant image swatch with price and Variant image dropdown, each swatch shows the variant it would select, given what's already chosen.
Prices follow the selection. On Variant image swatch with price, Color or custom swatch with price and Button with price, each value shows the price of the combination it leads to.
Example. A shoe comes in two models (Sneaker, Slide), three colours (Black, Sand, Gray) and nine sizes. Model and Color are shown as Variant image swatch, Size as Button. Each model-and-colour pair has its own featured image in Shopify and four photos in Assign images. With Use dynamic variant image on:
The page opens on the Sneaker in Black. The gallery shows the four Sneaker-Black photos, and the Color swatches show the Sneaker in each colour.
The shopper picks Slide. The gallery switches to the Slide-Black photos, and the Color swatches turn into the Slide in Black, Sand and Gray.
They pick Sand. The gallery shows the Slide-Sand photos, and the Model swatches now show both models in Sand.
They pick a size. The photos stay put — every size shares its model-and-colour photos.
What it needs:
A featured image on every variant in Shopify, so the image swatches have something to switch to. If you assign images in the app, Overwrite main variant images in Admin sets these for you.
Update data after you change images in Shopify — see Sync product data.
A paid plan. On Free the checkbox is greyed out with the note This feature is available with one of our premium plans., and downgrading to Free turns it off — see Plans and pricing.
Required swatch options
Turn on Required swatch options — swatch options must be selected before adding items to cart — to stop shoppers adding a product before they've chosen every option. It prevents orders where the colour was never picked.
Switching it on shows two messages you can word yourself:
Keep both short and specific — Choose a colour reads better than This field is required.
Save
Click Save at the top of the page.
Related pages
Last updated
Was this helpful?