# Swatch styles

In the Swatch Style, you can explore the following features:

* It has two sections\
  \- [Product Page](/evs-easy-variation-swatches/add-new-swatch-styles-and-configure/product.md)\
  \- [Collection Pages](/evs-easy-variation-swatches/add-new-swatch-styles-and-configure/collections.md)
* Pre-defined Templates – Template Library
* Swatch Style Editor – My Templates
* Product Card Customisation – for the Collections page

**Swatch styles for Product and Collection Pages** – You can configure swatch templates for both Product and Collection pages.

**Template library** – This option is available in both the Product and Collection sections. In this option, you can choose a template style from pre-defined templates and add it to the My Templates section.

**My Templates** – In this option, you can edit and modify the swatch styles according to your requirements. In the swatch editor, you can change the size, border, label, layout, etc. Also, you can add the custom CSS for swatch customization.

**Product Card Customization** – This option is available only for the Collections page. You can customise the swatches alignment, Add-To-Cart, Compare at Price, etc., options on the collections page.

The process of customizing swatches in both sections is similar and easy to use.

### 1. Pre-defined Templates

* **For the Product page**, you can explore the pre-defined templates and click on Add to add them to the [swatch configuration](https://help.spicegems.com/evs-easy-variation-swatches/pages/yCFgwvortD17NG79dtUJ#id-1.-swatch-configurations-product-and-collections) options for the product page. 

<figure><img src="/files/gcmNIGlz2VaecOQQHt15" alt=""><figcaption></figcaption></figure>

* **For the Collection page**, you can explore the pre-defined templates and click on Add to add them to the [swatch configuration](https://help.spicegems.com/evs-easy-variation-swatches/pages/yCFgwvortD17NG79dtUJ#id-1.-swatch-configurations-product-and-collections) options for the collections page

<figure><img src="/files/VPm7pDw6FM7LkpK7zrYi" alt=""><figcaption></figcaption></figure>

Also, you can customise the product card on the collections page.

<figure><img src="/files/pgBPyOxkwhPvE3bru5iF" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you encounter any difficulty in configuring a new style or changing the position of the swatch on the page, please feel free to contact us at [**help@spicegems.com**](mailto:help@spicegems.com)
{% 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://help.spicegems.com/evs-easy-variation-swatches/add-new-swatch-styles-and-configure.md?ask=<question>
```

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.