# Variant selector

On product pages, the **Variant selector** allows customers to choose the product options they want.

Click the variant selector block to edit the settings. Use the drag handle to move the selector on the page.

{% 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 %}

## Variant selector style

***

The selector can display variants as either a **dropdown list**, **chips (buttons)**, or **color swatches**.

{% hint style="success" %}
The 'unavailable' swatch and chip style is used for variants with an inventory of **`0`**. Learn more about [Tracking inventory](https://help.shopify.com/en/manual/products/inventory) on Shopify.
{% endhint %}

`Click Variant selector block to find settings`

<table><thead><tr><th width="163">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Selector style</mark></td><td>Display the variant selector as chips (buttons) or a dropdown menu.</td><td><strong>Chips</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Dropdown</strong></td></tr><tr><td><mark style="color:blue;">Chip layout</mark></td><td>Choose the number of columns for the variant chips.<br><br>Select <strong>Natural</strong> to display a layout that adapts to the natural length of the chips.</td><td><strong>4 column grid</strong><br><strong>3 column grid</strong><br><strong>2 column grid</strong><br><strong>Natural</strong></td></tr><tr><td><mark style="color:blue;">Bottom padding</mark></td><td>Add spacing below the variant selector.</td><td><p><strong>1 - 50px</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 36px</mark></p></td></tr></tbody></table>

## 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](#swatches) using custom colors or uploaded images. After setting up, you can choose to display swatches in product listings and collection filters.
{% endhint %}

### Change swatch size

***

Go to **Theme settings > Swatches** to change the size of swatches on product pages.

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Swatch size</mark></td><td>Choose the size of swatches on product pages.</td><td><p><strong>Small</strong><br><strong>Medium</strong></p><p><strong>Large</strong><br><strong>X-Large</strong></p></td></tr></tbody></table>

## Variant popup (product guide)

***

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Variant option popup</strong></td><td>Add a popup link for product guides.</td><td><a href="variant-options/info-popup">info-popup</a></td></tr></tbody></table>


---

# 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/eclipse/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.