# 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>

## Change variant selector style

***

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>

### Dropdown list

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**.

### Swatches

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](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-custom-colors) or [uploaded images](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-custom-images). After setting up, you can choose to display swatches in [product listings](https://help.fluorescent.co/stiletto/products/product-listings#product-card-elements) and [collection filters](https://help.fluorescent.co/stiletto/collection-pages/filters-and-sorting).
{% endhint %}

### Chips (boxes)

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](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-chips).

## Sibling product swatches

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](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-chips)\
> [Product template](https://github.com/fluorescent/kb-stiletto/blob/main/product-pages/product-template.md)\
> [Product overview blocks](https://help.fluorescent.co/stiletto/product-pages/product-page-blocks)


---

# Agent Instructions: 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:

```
GET https://help.fluorescent.co/stiletto/product-pages/variant-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.