# Swatches

Use the **Product Group Selector** block to show colour options as swatches on the product page.

{% hint style="info" %}
Use this setup when each colour is a separate product. That lets customers search and filter by colour across the store.
{% endhint %}

### How it works

* The current product shows as one swatch.
* Related colour products show beside it.
* The colour label comes from the **Product current color** metafield.
* The swatch style comes from Shopify's native **Color** metaobject.

### Add the Product Group Selector block

1. Open the product template in the theme customizer.
2. Go to the main product section.
3. Add the **Product Group Selector** block.
4. Save the template.

<figure><img src="https://placehold.co/1200x700?text=Product+Group+Selector+Block" alt="Placeholder image for the Product Group Selector block"><figcaption><p>Placeholder for the Product Group Selector block in the product template.</p></figcaption></figure>

### Set up the product metafields

You need two product metafields:

1. **Product group**
2. **Product current color**

#### Product group

Use **Product group** to link the related colour products together.

Example:

* Fleece Jacket Grey
* Fleece Jacket Beige
* Fleece Jacket Black

If you are editing the grey product, add the beige and black products to its **Product group** metafield.

<figure><img src="https://placehold.co/1200x700?text=Product+Group+Metafield" alt="Placeholder image for the Product group metafield"><figcaption><p>Placeholder for the Product group metafield setup.</p></figcaption></figure>

#### Product current color

Use **Product current color** to store the colour name for each product.

Example:

* Grey
* Beige
* Black

This value is used to display the product colour name in the swatch selector.

Fill this metafield for every product in the group.

<figure><img src="https://placehold.co/1200x700?text=Product+Current+Color+Metafield" alt="Placeholder image for the Product current color metafield"><figcaption><p>Placeholder for the Product current color metafield.</p></figcaption></figure>

### Set up the Color metaobject

To display the actual swatch background, use Shopify's native **Color** metaobject.

1. In Shopify admin, go to **Content > Metaobjects**.
2. Click **All** if **Color** is not visible.
3. Open **Color**.
4. Add an entry for each colour you need.

For each colour entry, you can set:

* a solid colour
* an image

If an image is added, the swatch uses the image as its background.

If no image is added, the swatch uses the colour value instead.

<figure><img src="https://placehold.co/1200x700?text=Color+Metaobject" alt="Placeholder image for the Color metaobject"><figcaption><p>Placeholder for the Color metaobject entries and fields.</p></figcaption></figure>

### Result

Once the block and metafields are set up:

* the current product appears as a swatch
* related colour products appear beside it
* each swatch can use either a flat colour or a textured image

<figure><img src="https://placehold.co/1200x700?text=Swatch+Result+on+Product+Page" alt="Placeholder image for the final swatch result"><figcaption><p>Placeholder for the final swatch display on the product page.</p></figcaption></figure>


---

# 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://docs.almond.studio/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.