***
The Color Swatches feature is simple yet crucial for any store that offers products with different variant colors. Product swatches build the ultimate user experience for your online store by allowing customers to visualize precisely what you're offering.
This guide covers how to set up Color watches in Foxify.
{% embed url="" %}
An example of using swatches on Legacy editor
{% endembed %}
## How to enable Color Swatches in Foxify
{% hint style="success" %}
**Steps**
1. From your **Foxify Dashboard**, go to **Apps extensions** or in the **page editor**, select **Apps extensions.**
2. Select the **Foxify: Color Swatches** extension from the list.
3. In the pop-up modal, click **Install extension**.
{% endhint %}
## Customize colors for your swatches
Once you've installed the extension, click on it again to customize your swatches.
{% hint style="success" %}
Steps
1. Enter the **Color swatch trigger** by adding the product option names you want to show as swatches.
2. Check the option **Use color swatches using category metafields** to show **Shopify swatches**. [*Learn more*](https://help.shopify.com/manual/custom-data/metafields/category-metafields/using-category-metafields)
3. If you want to use **custom swatches**, set up the swatch items.
To each of your option values, select the colors you want to apply or add a custom image.
4. Save the changes.
{% endhint %}
{% hint style="success" %}
The color swatches now show on your product details.
{% endhint %}
## How to show color swatches on product cards
Foxify supports showing swatches on product cards (product listing).
After you have installed the extension and set up colors, follow the steps below:
{% hint style="success" %}
Steps:
1. From the page editor, select **Add elements** (or press \[E]).
2. Open **App blocks**, select **Color Swatches**.
3. Drag the **Color swatch** element onto the product card element.
{% endhint %}
:star: Learn more about customizing Product cards here:
{% content-ref url="/pages/CxEo7mK3FjWvkwN5VgX2" %}
[Product card](/foxify-app/foxstudio/add-and-edit-elements/product-card.md)
{% endcontent-ref %}
---
# 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.foxecom.com/foxify-app/page-management/app-extensions/color-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.