Variant selector
Controls how product variants and color options are displayed on product pages and collection cards.
Theme Editor → Theme settings → Variant selector
For step-by-step setup guides, see Variant images vs Color Swatches and Linked Products.
Make it easy to choose — and easier to buy
The way variant options are displayed is one of the most direct levers you have over conversion rate. A customer who can see, identify, and select the right color or size without extra clicks is far more likely to add to cart. Avante gives you multiple display formats — text pills, color swatches, and image thumbnails — so you can match the presentation to the product.
Pills — for size, material, and text-based options
Pills replace dropdown selectors with clearly visible clickable buttons. Use them for options where the label itself carries the information — Size, Fit, Length, Material.
To activate pills for a specific option, enter its exact name in the Variant label field (e.g. Size). Separate multiple option names with commas: Size, Fit.
Pills layout options:
Adapt to text
Mixed-length labels (S, Medium, Extra Large)
Two in a row stretched
Options that look balanced in pairs
Three in a row stretched
Size runs with many options
Color pills — for color and finish options
Color pills replace text labels with visual color circles. Customers immediately see every available color and select the one they want — no dropdown, no mental translation from name to shade.
Swatch style uses solid color circles matched by color name. If your color names don't map to standard HTML colors (e.g. "Sage", "Rust", "Off-white"), add the correct hex values in the Custom colors for pills field:
Image style uses a small product photo thumbnail per color — ideal when the actual product photo communicates the color more accurately than a solid circle (e.g. patterned fabrics, textured materials, metallic finishes).
Pro tip: Enable Show selected option next to the variant label. When a customer selects "Forest Green", they see it confirmed in text next to the label — a small detail that removes hesitation before clicking Add to cart.
Variant images — on collection cards
Variant images show small product thumbnails directly on collection cards, letting customers switch colors without opening the product page. A shopper looking for a white sneaker can see at a glance which products have it and click straight through.
This is one of the highest-impact settings for stores with multi-color product lines — it eliminates the "click, wrong color, go back" loop that kills collection page engagement.
Linked Products — for products sold as separate listings
Some stores list each color as a separate Shopify product rather than as variants of one product. Linked Products swatches connect these listings visually — the customer sees color options on the product page and clicks between them, with each swatch linking to its own product URL.
Configure the swatch appearance (image ratio, corner radius, hover name) here:
To set up the links themselves, see Linked Products.
Dropdown or pills? Use the Row layout (dropdowns) when products have many option types and screen space is limited — for example, a product with Color, Size, and Length. Use Column + pills when you want options to be immediately visible and selectable without opening a menu.
Related
Last updated
Was this helpful?