> 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/spark/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](/spark/product-pages/variant-options/variant-swatches.md).
{% endhint %}

## Enable chips for variant options

***

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/vh00i5VSzEec5WtbbPK9)
3. Click **Save**.

</details>

\\

***

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