> For the complete documentation index, see [llms.txt](https://docs.bacachi.net/mate-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bacachi.net/mate-documentation/product-page-settings/variants-pattern.md).

# 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="/files/VNKYFVDvIDSJWrTdg7PV" 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="/files/UsedY7OMlV7FLvTrBJ3v" 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="/files/WOy4lxCY98ORxueVIvV7" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/bsqbU0lAmjek1CVxKvC4" alt=""><figcaption></figcaption></figure></div>