# Product swatches

<figure><img src="https://3723856256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGnixyIfIYFWroNtVmZo6%2Fuploads%2Fgit-blob-16b1b6a78eec643193dda84f1ff5603ccdda0e2d%2Fimage.png?alt=media" 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> |