# 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="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F8M6cimb6UDb2lAQlm9Yc%2Fswatches.jpg?alt=media&#x26;token=98ba5b4a-5c87-4ad2-bfb4-c579ca234ad8" 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)