# Product swatches

<figure><img src="/files/S1G8cYCiFIdZKRVakaYX" alt=""><figcaption></figcaption></figure>

## Overview

A customizable product variant swatches block that displays color and other option swatches for products. The block intelligently detects color-type options (supporting multiple languages) and displays either custom uploaded swatch images or automatic Shopify swatches. It supports both Shopify's native swatch system and fallback asset-based swatch images for enhanced customization.

## Common use cases

* Display color swatches for products with color variants
* Show variant option swatches for product selection
* Use custom uploaded swatch images for brand-specific colors
* Configure swatch limits to control how many swatches are displayed
* Enable tooltips to show swatch names on hover
* Set appropriate swatch sizes based on context (smaller for cards, larger for product pages)

## Block settings

### General

| Setting                | Description                          | Options                   |
| ---------------------- | ------------------------------------ | ------------------------- |
| Show advanced settings | Reveals show tooltip, and visibility | Checkbox (default: false) |

### Content

| Setting      | Description                                | Options                                                                                           |
| ------------ | ------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| Product      | Select the product to display swatches for | Product picker                                                                                    |
| Size         | Size of the swatch circles                 | 8 - 44 px (default: 16)                                                                           |
| Limit        | Maximum number of swatches to display      | 1 - 20 (default: 6)                                                                               |
| Radius       | Border radius for swatch circles           | <p>• None<br>• Default<br>• Sm<br>• Md<br>• Lg<br>• Xl<br>• 2xl<br>• Full (default)</p>           |
| Show tooltip | Displays swatch name in a tooltip on hover | <p>Checkbox (default: true)<br><br>Visible when <strong>Show advanced settings</strong> is on</p> |

### Spacing

| Setting                   | Description                                 | Options                   |
| ------------------------- | ------------------------------------------- | ------------------------- |
| Enable horizontal padding | Adds horizontal padding around the swatches | Checkbox (default: false) |
| Enable top padding        | Adds top padding around the swatches        | Checkbox (default: false) |
| Enable bottom padding     | Adds bottom padding around the swatches     | Checkbox (default: false) |

### Layout

| Setting              | Description                                   | Options                                        |
| -------------------- | --------------------------------------------- | ---------------------------------------------- |
| Horizontal alignment | Controls horizontal alignment of the swatches | <p>• Left (default)<br>• Center<br>• Right</p> |

### Display

| Setting    | Description                        | Options                                                                                                                            |
| ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Controls when the block is visible | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |


---

# 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://help.brickspacelab.com/slab/content/blocks/products/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.