> 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.
{% 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" %}
Filled color tiles.
{% endtab %}
{% tab title="Variant image" %}
Each variant's first product image as a thumbnail.
{% endtab %}
{% tab title="Button" %}
Each variant as a text button.
{% endtab %}
{% tab title="Dropdown" %}
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).
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}