> 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/eclipse/product-pages/variant-options.md).

# 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="/pages/4uBlRVxwxgMywTAHMM51">/pages/4uBlRVxwxgMywTAHMM51</a></td></tr></tbody></table>