> 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/variant-chips.md).

# Variant chips

On product pages, you can product variants as a row of clickable buttons or "Chips", which makes it easy to view them at a glance.

By default, product options for "Size" display as chips. You can display other product options as chips by adding their option name in the theme settings. You can also select a **Chip Style** to change their layout.

{% hint style="info" %}
You can also enable **Variant swatches** on product pages, which display product options as a row of buttons that visually represent your variants with custom colors. See the [Variant swatches guide](/stiletto/product-pages/variant-options/variant-swatches.md).
{% endhint %}

<h2 align="center">Enable chips for variant options</h2>

***

By default, variants with the option name "Size" will display as chips. You can add or remove chips by adding their option name in the theme settings.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click **Theme settings**, then click **Product**.
2. Enter the exact product option name in the **Variant option for chips** field (e.g. "Size").

   > For **multiple product options**, enter all product option names, separated by commas (e.g. "Color, Material, Style").\
   > For **multiple languages**, enter the translated option name for each language, separated by commas (e.g. "Color, Couleur, Farbe").

   ![](/files/kevHWaqV6LQuIjPWu5LT)
3. Click **Save**.

</details>

### <mark style="color:$primary;">Change layout of chips</mark>

In your product page template, open the **Variant selector** block to change the style of the chips.

You can display chips in **2**, **3**, or **4 columns**, or set the style to "**Natural**" so the chip size adapts to the length of the variant name.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Open your **Product template**.
2. Click the **Variant selector** block under “Product overview” to open the settings.
3. Under **Chip style**, set the **Chip layout** to **2**, **3**, or **4 Columns**, or **Natural**.

   > **Grid Column** layouts expand the width of the chips to the product form width.\
   > **Natural** sets the width of the chip to the length of the variant name.
4. Click **Save**.

</details>

### <mark style="color:$primary;">Show chips on product listings</mark>

{% hint style="warning" %} <mark style="color:orange;">**Update**</mark> This option was added in v3.1.0 on March 11, 2024. See our [Changelog](/stiletto/readme/changelog.md) and [theme update guide](/stiletto/general/theme-updates.md) to learn more.
{% endhint %}

By default, variants options for "size" will appear as chips on all products across your site when hovered over, including on collection pages and feature sections.

Go to **Theme settings** and open the **Product listing** tab. Choose whether to **Show chips** on hover. To change which product options should use chips, add or remove the option names in the **Variant option for chips** field.

***

> **Related links**
>
> [Product pages](/stiletto/product-pages/product-template.md)\
> [Variant swatches](/stiletto/product-pages/variant-options/variant-swatches.md)