# Color swatches

![](https://docs-assets.foxecom.app/foxify-app/80b8c9f5-76be-47f3-b82c-47b8512a2760.png)

Show product options as color or image swatches instead of a regular button or dropdown, so shoppers can see exactly what each option looks like before they choose.

Available on Starter, Growth, and Enterprise plans. 

## Install Color Swatches

1. In the FoxStudio editor, open **Apps market** (**A**).
2. Find **Color Swatches** and select **Install extension**.

![](https://docs-assets.foxecom.app/foxify-app/8d1a17cf-c9c6-4b62-8b06-33dbc62c7ae1.png)

Once installed, select the extension again to set up your swatches.

## Set up your swatches

![](https://docs-assets.foxecom.app/foxify-app/d99299cc-3120-455b-aa3e-3ac13fc73423.png)

<Stepper>
  <Step title="Choose which options show as swatches ">
    In **Color swatch trigger**, enter the product option names you want to show as swatches, for example `Color`.&#x20;

    To add more than one, separate them with commas, like `Color, Colour, Shade`.

    Option names aren't case-sensitive, so `Color` also matches `color` and `COLOR`.
  </Step>

  <Step title="Choose where swatch colors come from">
    <Table widths="30%">
      | Option               | How it works                                                                                                                                                                                                                       | Best for                                                                                        |
      | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------- |
      | **Custom swatches**  | Under **Options swatches**, expand or add a new item, then pick a color or upload an image for your option value.                                                                                                                  | Patterns, textures, or colors that don't match a standard color, like "Leopard" or "Ocean mix". |
      | **Shopify swatches** | Select **Use color swatches using category metafields**. Swatches use the colors you've already set in Shopify. [Learn more](https://help.shopify.com/manual/custom-data/metafields/category-metafields/using-category-metafields) | Stores that already set up color metafields in Shopify.                                         |
    </Table>

    <Hint type="warning" title="Shopify swatches override custom swatches">
      When **Use color swatches using category metafields** is selected, the colors from Shopify replace any custom swatches you've set in the extension.
    </Hint>
  </Step>
</Stepper>

## Tips

* **Keep option names consistent** across products, like always using "Color", so one trigger works for your whole catalog.
* **Add swatches to product cards** so shoppers can see available colors without opening each product.

## FAQs

#### Why aren't swatches showing on my product page?

Check that the option name in **Color swatch trigger** matches the option name on your product. For example, if your product uses `Colour`, add `Colour` to the trigger.&#x20;

#### Can I use swatches for options other than color?

Yes. Any option name added to **Color swatch trigger** shows as swatches, such as `Material` or `Pattern`. Use custom swatches with images for these.

#### Should I use Shopify swatches or custom swatches?

If you've already set up color metafields in Shopify, use Shopify swatches to save time. Otherwise, use custom swatches for full control over each color or image.