# Swatches
Display your product variants as **Swatches** to make it easy for customers to quickly view and select product options at a glance. Instead of a dropdown menu, swatches visually represent your variants as a row of clickable buttons.
{% hint style="warning" %}
If you want to set up variants as individual products with their own images and details, learn how to set up [Sibling product swatches.](/cornerstone/product-pages/variant-options/sibling-product-swatches.md) Note that sibling product swatches link to separate products and will not appear as swatches on collection pages or product listings.
{% endhint %}
Why are my swatches blank?
If your swatches appear blank, make sure that you are using an existing default color or that your image files and custom swatch names match your variant names. You may also need to add [custom swatches for multiple languages](/cornerstone/product-pages/variant-options/variant-swatches/use-custom-colors.md#add-custom-colors).
## **Enable swatches**
***
In your theme settings, choose which product options you want to show swatches for. By default, swatches are display for "Color".
{% hint style="info" %}
#### Steps
1. Go to :gear: **Theme settings > Product**.
2. In **Variant option for swatches**, enter the exact name of your product options in a comma-separated list. \
If your store uses **multiple languages**, make sure to add the translated product option names for each language (e.g. "Color, Couleur, Farbe")\
3. Click **Save**.
{% endhint %}
## **Use custom colors and images**
***
{% columns %}
{% column width="41.66666666666667%" %}
You can add swatches using **default colors, custom colors,** or you can **upload custom images**.
[Use default colors for swatches](/cornerstone/product-pages/variant-options/variant-swatches/use-default-colors.md)
[Use custom colors for swatches](/cornerstone/product-pages/variant-options/variant-swatches/use-custom-colors.md)
[Upload custom images for swatches](/cornerstone/product-pages/variant-options/variant-swatches/use-custom-images.md)
{% endcolumn %}
{% column width="58.33333333333333%" %}
{% hint style="info" %}
**Shopify swatches**
Cornerstone [v4.2.0](https://help.fluorescent.co/cornerstone/product-pages/variant-options/pages/lYWBRFiy0wE3kStjLEun#id-4.2.0-latest-release) added support for Shopify’s built-in swatches feature.
If you've added custom colors or images using Shopify’s category metafields, those swatch values will be used by default on product pages, product cards, and filter options.
Learn more about [adding swatches with category metafields](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields).
{% endhint %}
{% endcolumn %}
{% endcolumns %}
## **Swatch display options**
***
Change the shape of swatches, show swatches on product cards, and enable [Dynamic option availability](/cornerstone/product-pages/variant-options/variant-swatches/dynamic-option-availability.md) to automatically gray-out swatches of out-of-stock variants.
{% columns %}
{% column width="41.66666666666667%" %}
## Watch tutorial
Watch the tutorial video for setting up swatches, including default colors, custom colors, and custom images.
{% endcolumn %}
{% column width="58.33333333333333%" %}
{% embed url="" fullWidth="false" %}
{% endcolumn %}
{% endcolumns %}
***
> **Related links**
>
> [Product pages](/cornerstone/product-pages/product-template.md)\
> [Product listings](/cornerstone/products/product-listings.md)\
> [Variant chips](/cornerstone/product-pages/variant-options/variant-chips.md)
---
# 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.fluorescent.co/cornerstone/product-pages/variant-options/variant-swatches.md?ask=
```
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.