> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/theme-settings/variant-selector.md).
# Variant selector
{% hint style="info" %}
**Theme Editor → Theme settings → Variant selector**
For step-by-step setup guides, see [Variant images vs Color Swatches](/docs/avante-themes/features-and-advanced-setup/variant-images-vs-color-swatches.md) and [Linked Products](/docs/avante-themes/features-and-advanced-setup/linked-products.md).
{% endhint %}
### 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:**
| Option | Best for |
| ------------------------ | -------------------------------------------- |
| 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:
```
Sage:#8faf7e
Rust:#b5451b
Off-white:#f5f0e8
```
**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).
{% hint style="success" icon="sparkles" %}
**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.
{% endhint %}
***
### 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.
{% hint style="success" icon="lightbulb" %}
Configure the swatch appearance (image ratio, corner radius, hover name) here:
{% endhint %}
{% hint style="success" %}
**To set up the links themselves, see** [**Linked Products**](/docs/avante-themes/features-and-advanced-setup/linked-products.md)**.**
{% endhint %}
{% hint style="info" %}
**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.
{% endhint %}
***
### Related
* [Variant images vs Color Swatches](/docs/avante-themes/features-and-advanced-setup/variant-images-vs-color-swatches.md)
* [Linked Products](/docs/avante-themes/features-and-advanced-setup/linked-products.md)
* [How do I show color swatches?](/docs/avante-themes/faq/products-and-variants/how-do-i-show-color-swatches.md)
* [A variant shows "Unavailable" but the product is in stock](/docs/avante-themes/faq/products-and-variants/a-variant-shows-unavailable-but-the-product-is-in-stock.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://staylime.com/docs/avante-themes/theme-settings/variant-selector.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.