> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-settings/swatches.md).

# Swatches

Swatches on the product page let customers pick a variant visually. These settings control how they look.

![Swatches setting panel](/files/qwXZclNbptFRhj34gFuX)

{% hint style="info" %}
These settings apply to swatches on the **product page**. Swatches on product cards in collection grids are configured separately under [Product Cards](/helix/theme-settings/product-cards.md) → Swatches.
{% endhint %}

***

## Swatch Style

Choose how variants are shown — Color, Variant image, Button, or Dropdown.

{% tabs %}
{% tab title="Color" %}
![Color swatch style](/files/Z8HYDWsxjrGvdEfeCCvk)

Filled color tiles.
{% endtab %}

{% tab title="Variant image" %}
![Variant image swatch style](/files/hCYmBYyA4kl102KSCZtI)

Each variant's first product image as a thumbnail.
{% endtab %}

{% tab title="Button" %}
![Button swatch style](/files/afP1svBPFWKvQYU2MRgR)

Each variant as a text button.
{% endtab %}

{% tab title="Dropdown" %}
![Dropdown swatch style](/files/Pgnd5XWIMOBAdRb7M4Zr)

Variants in a collapsed select menu.
{% endtab %}
{% endtabs %}

***

## Appearance

Sets the swatch width, shape, and selected state.

* **Desktop width / Mobile width** — Swatch width on each screen size.
* **Height ratio** — Swatch shape, from square to a wide strip. Only available for Color swatches.
* **Selected style** — Mark the selected swatch with a **Border** (an outer ring) or an **Underline** (a line beneath).