# 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://832052046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGrr5MP50bJ3N4OS7jLBk%2Fuploads%2Fm9AdYzpfW7IEfs7aQKcV%2Fimage.png?alt=media&#x26;token=eff05f64-d95f-405b-8ec5-4e480014e04e" 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://832052046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGrr5MP50bJ3N4OS7jLBk%2Fuploads%2FEBT2caR7uYnYCPxNofaj%2Fimage.png?alt=media&#x26;token=71da7852-cf0b-4399-ac9d-907a1c47b995" 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://832052046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGrr5MP50bJ3N4OS7jLBk%2Fuploads%2F5oFDH5afyUEfoTKV8zKS%2Fimage.png?alt=media&#x26;token=efcc1870-35ca-4f80-a83c-6a7f75c7ed0e" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="https://832052046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGrr5MP50bJ3N4OS7jLBk%2Fuploads%2FutwcSHO8ysvVweg3kYYY%2Fimage.png?alt=media&#x26;token=375ca514-88c4-4a06-ba72-f805278fab96" alt=""><figcaption></figcaption></figure></div>
