> For the complete documentation index, see [llms.txt](https://help.spicegems.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.spicegems.com/evs-easy-variation-swatches/add-new-swatch-styles-and-configure/product.md).

# Product

You can customize your pre-defined template or choose a new template to customize it according to your requirements.

To customize the template, follow the below steps:

### 1. Edit Required Template

In Product → Click on the pencil icon to edit the template. \
(To customize any swatch style, you need to edit the associated swatch template)

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FmSN5mXI7j1REFi8ys58K%2F1.png?alt=media&amp;token=127de782-c63f-452b-9020-aef12fff5ed6" alt=""><figcaption></figcaption></figure>

### 2. Customizable Elements - Editor

In the editor, you can choose to edit any element in the customizable elements.

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FvTInbsAw0eO4FuqNyCT1%2FSwatch%20styles(Image-4).png?alt=media&amp;token=bc5b0f95-9301-4d0a-8ec9-febd8a0f9c1f" alt=""><figcaption></figcaption></figure>

* Click Save to implement the changes.

### 3. Delete Swatch Style

You can delete the unwanted styles

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FNzPfeprwh1LFNiRSzCTb%2F2.png?alt=media&amp;token=6ed77df7-19cf-4139-b321-830ff58dfae1" alt=""><figcaption></figcaption></figure>

### 4. Styles Integrated in Options

Click on **Used In** to check for styles used in the options.

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FritV4bNjWq7NolA0SgnH%2F3.png?alt=media&amp;token=6565bba3-2be9-4785-801f-42a256272460" alt=""><figcaption></figcaption></figure>

### 5. Swatch Positioning - Advance Settings

Options for changing swatch positions on the product page

* You can change the position by adding appropriate selectors
* You can simply choose an option in the **Position** block.&#x20;

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FzriG5YNjzMm9Z56tVWVR%2F4.png?alt=media&amp;token=f3206d6d-800d-41d8-8b9e-3293c7874557" alt=""><figcaption></figcaption></figure>

The customization process is done. You can check the updates on the products.&#x20;