Color Swatches

Explore FoxEcom Affiliate program perks now ✨

---

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.

An example of using swatches on Legacy editor

How to enable Color Swatches in Foxify

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.

Customize colors for your swatches

Once you've installed the extension, click on it again to customize your swatches.

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

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.

1. Save the changes.

The color swatches now show on your product details.

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:

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.

⭐ Learn more about customizing Product cards here:

Product card