# Color swatches

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(83)_oHaHEX04.jpg)

## How to enable Color swatches for your Shopify store

<Tabs>
<Tab title="Product page - Product information section">

<Hint type="success">

1. Go to **Product page > Product information**.&#x20;
2. In the **Variant picker**, set the **Style** to **Color swatches**.

</Hint>

![image](https://docs-assets.foxecom.app/hyper-theme/image_yQBJHf52.png)

</Tab>

<Tab title="Product cards">

<Hint type="success">

Go to **Theme settings > Product cards** to enable Color swatches.

</Hint>

![image](https://docs-assets.foxecom.app/hyper-theme/image_cTr3b3FY.png)

See more on how to customize Product cards:&#x20;

<PageLink href="page://11ab3bbf-a8df-45df-a69a-a8be6fce87b2">Product cards</PageLink>

</Tab>
</Tabs>

## How to set up Color swatches

<Hint type="success">

Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Color swatches**
3. Make necessary changes
4. **Save**

</Hint>

### Color swatch trigger

Define which is the color option and separate them by a comma.

![image](https://docs-assets.foxecom.app/hyper-theme/image_VXls6hIQ.png)

### Color swatches

Choose the suitable **HEX color** codes and add them to the provided box.

![image](https://docs-assets.foxecom.app/hyper-theme/swatches-2_svBF9wUc.png)

<Hint type="success">

Good practice ⭐

* List the colors by separate lines.
* Write the product variant names and give it a color HEX value.

</Hint>