# Color swatches
## How to enable Color swatches for your Shopify store
{% tabs %}
{% tab title="Product page - Product information section" %}
{% hint style="success" %}
1. Go to **Product page > Product information**.
2. In the **Variant picker**, set the **Style** to **Color swatches**.
{% endhint %}
{% endtab %}
{% tab title="Product cards" %}
{% hint style="success" %}
Go to **Theme settings > Product cards** to enable Color swatches.
{% endhint %}
See more on how to customize Product cards:
{% content-ref url="product-cards" %}
[product-cards](https://docs.foxecom.com/hyper-theme/theme-settings/product-cards)
{% endcontent-ref %}
{% endtab %}
{% endtabs %}
## How to set up Color swatches
{% hint style="success" %}
Steps
1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Color swatches**
3. Make necessary changes
4. **Save**
{% endhint %}
### Color swatch trigger
Define which is the color option and separate them by a comma.
### Color swatches
Choose the suitable **HEX color** codes and add them to the provided box.
{% hint style="success" %}
Good practice :star:
* List the colors by separate lines.
* Write the product variant names and give it a color HEX value.
{% endhint %}
***
---
# 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/hyper-theme/theme-settings/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.
.jpg?alt=media&token=7339b0ee-f53a-4433-be2b-5f680a7cc9e3)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)