> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/product-pages/variant-options.md).

# Variant options

{% hint style="success" %}
To add and edit variants for products with multiple options (e.g. colors, sizes) go to *Products* in the Shopify admin. Learn more in [Shopify's variant options guide](https://help.shopify.com/en/manual/products/variants).
{% endhint %}

On product pages, the **Variant selector** allows customers to choose the product options they want. The selector can display variants as either a **dropdown list**, **color swatches,** or **chips (boxes)**.

By default, swatches are enabled for options named "Color" and chips are enabled for options named "Size".

<div><figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-b72282e79b693e918b88aab43d967806c45759b9%2Fvariants-dropdown.png?alt=media" alt=""><figcaption><p>Dropdown</p></figcaption></figure> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-e5ad4435417350f243911432df08349f914d3abe%2Fvariants-chip.png?alt=media" alt=""><figcaption><p>Chips</p></figcaption></figure> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-eede8ba1d883add3e7c46239676ce43828d6a1d7%2Fvariants-swatches.png?alt=media" alt=""><figcaption><p>Swatches</p></figcaption></figure></div>

<h2 align="center">Variant selector styles</h2>

***

In the theme editor, go to **Theme settings > Products** to change the style of the variant selector for different product options.

<div><figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-5757e2b601fce8fe82d4216590b0e5a9a56f2ff5%2Ftheme-settings-product.jpg?alt=media" alt=""><figcaption><p>Go to Theme settings > Product</p></figcaption></figure> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-aae89a06b9f3b0f5c24f2466ccf486ca4cc5a1b7%2Fvariant-options-swatches.png?alt=media" alt=""><figcaption><p>Add or remove options for swatches</p></figcaption></figure> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-dc104c9e8f804b7b8ba57dff0fdefe9458799a7f%2Fvariant-option-chips.png?alt=media" alt=""><figcaption><p>Add or remove options for chips</p></figcaption></figure></div>

### <mark style="color:$primary;">Dropdown list</mark>

All product options *except* "Color" and "Size". To use dropdowns, remove the options names from both **Variant options for swatches** and **Variant options for chips**.

### <mark style="color:$primary;">Swatches</mark>

By default, all product options named "Color" will display swatches. To change which product options should use swatches, add or remove the option names in **Variant options for swatches** in **Theme settings > Products**.

{% hint style="warning" %}
**Required** Set up colors for swatches using [custom colors](/stiletto/product-pages/variant-options/variant-swatches/use-custom-colors.md) or [uploaded images](/stiletto/product-pages/variant-options/variant-swatches/use-custom-images.md). After setting up, you can choose to display swatches in [product listings](/stiletto/products/product-listings.md#product-card-elements) and [collection filters](/stiletto/collection-pages/filters-and-sorting.md).
{% endhint %}

### <mark style="color:$primary;">Chips (boxes)</mark>

By default, all product options named "Size" will display chips (rectangles around variant names). To change which product options should use chips, add or remove the option names in **Variant options for chips** in **Theme settings > Products**.

> Learn more about enabling chips and customize their style in the [Variant chips guide](/stiletto/product-pages/variant-options/variant-chips.md).

<h2 align="center">Sibling product swatches</h2>

***

Stiletto's **Sibling products** feature lets you set up variants as individual products with their own images and product details. Sibling products appear as variant swatches that link to separate product pages.

> Learn more about [Sibling product swatches](#sibling-product-swatches).

***

> **Related**\
> [Swatches](#swatches)\
> [Chips](/stiletto/product-pages/variant-options/variant-chips.md)\
> [Product template](https://github.com/fluorescent/kb-stiletto/blob/main/product-pages/product-template.md)\
> [Product overview blocks](/stiletto/product-pages/product-page-blocks.md)