---
description: How to create Variants pattern
---

# Variants Pattern

Some products come in multiple colors; you need to create a separate variation for these products. Examples of some products in the demo:

<div align="left"><figure><img src="https://content.gitbook.com/content/I090Z9o3kQJbVjVwvDTj/blobs/zb9LqvvvjimryRkJCeXm/image.png" alt=""><figcaption></figcaption></figure></div>

### To create these variations, please follow the steps :

1. Create a variation image ( \*.jpg or \*.png) with 1:1 ratio (square image), the best size of width/height is 80x80 px
2. Create Variation: From "Theme Settings", click the tab "Vinova Product Color Custom", Upload each variation, and enter a name for it
3. When you enter a color variation for your product, please set the name of the variation of each product image exactly after the variations you just created.

<div align="left"><figure><img src="https://content.gitbook.com/content/I090Z9o3kQJbVjVwvDTj/blobs/7CzFaXHRKZyatPROIVTo/image.png" alt=""><figcaption><p>Design Variant Pattern</p></figcaption></figure></div>

Upload the image from the "**Vinova Product Color Custom**" Settings. Name the color as intuitive and easy to use as you like.

<div align="left"><figure><img src="https://content.gitbook.com/content/I090Z9o3kQJbVjVwvDTj/blobs/047vX9rlLUBGxYqo6PiO/image.png" alt=""><figcaption></figcaption></figure></div>

#### Set your product variant exactly to the name you just created :

<div align="left"><figure><img src="https://content.gitbook.com/content/I090Z9o3kQJbVjVwvDTj/blobs/m02u3wGkTpoax1S1Bcrz/image.png" alt=""><figcaption></figcaption></figure></div>
