# Swatches

Control how product variant options (such as colors or materials) are displayed across product and collection pages. They enhance visual product selection and improve customer browsing experiences.

> To use swatches on variants other than color, edit the corresponding labels in your [language files](https://admin.shopify.com/store/broadcast-theme-main/settings/languages).

<figure><img src="/files/QocmV4C1dnHtqbpkrIdN" alt="swatches on product grid showcase"><figcaption></figcaption></figure>

**Swatches type**: Choose how variant swatches are displayed:

* **`Theme`:** Uses the theme’s custom-designed swatches for a polished look.
* **`Native`:** Uses Shopify’s default swatch behavior.
* **`None`:** Disables swatches entirely.

**Show sale indicator**: Adds a red dot below color swatches when a variant is on sale, helping customers identify discounted products at a glance.

**Swatch size**: Controls the display size of variant swatches to maintain consistent spacing and alignment within product grids.

**Swatch style**:  Select between `Circle` or `Square` swatches to match your store’s visual style and product presentation. Learn more: [Swatch collection styles](https://broadcast.presidiocreative.com/collections/collection-pages/swatch-collection-styles)

**Collection style**: Options: `Text only`, `Slider`, `Slider on hover`, `Swatch with text`, or `Grid`

> Note: Some styles only apply when the mobile layout is set to 2 items per row.

**HEX codes and files**: Customize swatch appearances for specific variant names using HEX color codes or uploaded image files.\
Each rule should appear on its own line.

* Accepts both color values and file names.
* Upload image files under [Content -> Files](https://admin.shopify.com/store/broadcast-theme-main/content/files?selectedView=all\&media_type=IMAGE)
* [Learn more for swatches](https://broadcast.presidiocreative.com/products/product-pages/swatches)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://broadcast.presidiocreative.com/theme-settings/theme-settings/swatches.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
