> For the complete documentation index, see [llms.txt](https://help.brickspacelab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.brickspacelab.com/paper/guides/products/variant-swatches.md).

# Variant swatches

Swatches are used to make variant selections easier and more intuitive for customers when they are selecting an option with color. Swatches appear throughout your theme in various places and can be used with custom images or hex code colors.

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

In order to display swatches on a product page or within a product card we can use metafield connected variant options. This might sound complicated but it's super easy to setup and works great out of the box.

{% stepper %}
{% step %}
Go to the product you want to update
{% endstep %}

{% step %}
Scroll to **Category**
{% endstep %}

{% step %}
Select the Category of your Product
{% endstep %}

{% step %}
Scroll to **Variants**
{% endstep %}

{% step %}
Click **Add variant**
{% endstep %}

{% step %}
Add a new option like Color or Material
{% endstep %}

{% step %}
Right of Option name, click matching metafield

eg. "Color" or "Material"

<figure><img src="/files/pAXmiDj2mxpIS8NZ2hXx" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Enter Swatch names

{% hint style="info" %}
From here you'll be able to change the hexcode or image of each swatch by clicking into it.
{% endhint %}
{% endstep %}

{% step %}
Hit **Save**
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.brickspacelab.com/paper/guides/products/variant-swatches.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.