# 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/0mGPduPKtJ7ZEQskMcge/blobs/Bln5mJwgMWaeCHMJNdHx/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/0mGPduPKtJ7ZEQskMcge/blobs/gHM20BxK34zjL22vn0u2/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/0mGPduPKtJ7ZEQskMcge/blobs/be2qFo8pwVyRstzfXByf/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/0mGPduPKtJ7ZEQskMcge/blobs/eJfvyzF8lWAkOOPjntu4/image.png" alt=""><figcaption></figcaption></figure></div>