# Chips

On product pages, you can display 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.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FP9CaLsXWLVnNS2r8y3Gn%2Fvariants-chip.png?alt=media&#x26;token=35e937ab-9924-4b64-944b-5303815a9da9" alt="" width="374"><figcaption><p>Variant chips with 4 column layout</p></figcaption></figure>

{% 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](https://help.fluorescent.co/cornerstone/product-pages/variant-options/variant-swatches).
{% 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").

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-688074ec7842b68c6d41f6a1c1d835172b474073%2Fchips-option-language.png?alt=media)
3. Click **Save**.

</details>

## Change layout of chips

***

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>

## Show chip filters on collection pages

***

<details>

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

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

1. Open your **Collections template**.
2. Click the **Product grid** section to open the settings.
3. Under **Filters layout**, choose to **Show chip filters**.

   > If your toggle off this option, the variant names appear in a single-column list.
4. Set the **Chip layout** to **Grid 2 columns** or **Natural**.

   > **Natural** sets the width of the chip to the length of the variant name.
5. Click **Save**.

</details>

<br>

***

> **Related links**
>
> [Product pages](https://help.fluorescent.co/cornerstone/product-pages/product-template)\
> [Variant swatches](https://help.fluorescent.co/cornerstone/product-pages/variant-options/variant-swatches)