***
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="../../foxstudio/add-and-edit-elements/product-card" %}
[product-card](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/product-card)
{% endcontent-ref %}
