Swatch styles reference
What each of the twelve styles offers, and which settings it exposes.
All twelve styles are configured the same way — open Appearance, pick the Product page or Collection page tab, click Customize. This page is a quick guide to what each one gives you.
1, Swatches
Color or custom image swatch
Colour or image swatches with a smooth hover animation. The most flexible style, and the default.
Groups: Shape and layout, Border, Hover behavior, Sold out, Image, plus Sale badge and In stock message on product pages, and Carousel on collection pages.
Pill swatch
Swatches inside pill shapes for a refined look — the chip plus the value name. Good when colour names matter as much as the colours.
Groups: Layout (Shape, Corner radius, Picture size, Font size, Spacing, Align content), Default style / Hover style / Selected style, Sold out, Image.
Variant image swatch
Uses each variant's own featured image as the swatch. Needs a featured image on every variant in Shopify — no swatches to set up in the app.
Variant image swatch with price
Variant images with prices for a quick comparison. Product pages only.
Adds a Price and labels group: Show variant name, Show price, Show compare-at price (with Compare-at price color and Sale price color), and its own Show sale badge controls.
Color or custom swatch with price
Colour swatches with prices for a rich selector. Product pages only.
Groups: Layout (with Box width, Box radius, Swatch width, Swatch height), Default style / Hover style / Selected style with separate Variant name and Price blocks, Sale badge, Sold out, Image, In stock product message.
2, Buttons
Button
Clean, flexible buttons for a bold product page.
Groups: Layout (Corner, Size, Spacing, Align content), Default style / Hover style / Selected style, Sold out.
Button without border
Minimal, text-only variant options. Its Selected style adds an Underline toggle, and its Sold out treatment has an extra Strikethrough choice.
Pill button
A rounded button style that's easy to scan.
Button with price
Prices directly on buttons to highlight savings. Default style splits into a Variant name block and a Price block, with Show compare-at price, Compare-at price color and Sale price color.
3, Dropdowns
Dropdown
A compact, space-saving variant selector.
Groups: Field (Corner radius, Border thickness), Icon (Style: Arrow, Chevron, Caret, Plus; and Icon color), Default style / Hover style / Selected style. On product pages a Price group can show the price, the compare-at price and a sale badge inside the list.
Color or custom swatch dropdown
A dropdown with swatches for style and flexibility — a small colour chip beside each value.
Adds Picture size, Picture type (None, Single, Double), Picture thickness and Picture border color, plus an Image group.
Variant image dropdown
Product thumbnails in a compact dropdown. Same settings as above, with a larger default thumbnail.
Related pages
Last updated
Was this helpful?