# Variants Settings

You can create variants for a product by adding options like size and color. Each combination of option values can be a variant.

**For example**, suppose that you sell T-shirts with two options: size and color. The size option has three values: small, medium, and large. The color option has two values: blue and green. One specific variant from these options is a small blue T-shirt.

{% hint style="info" %}
**Please Note:** For color variations, you can only use the available color names that Browser supports. Please see the color names to set your product color variation [**HERE**](https://www.color-hex.com/color-names.html)
{% endhint %}

<div align="left"><figure><img src="https://832052046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGrr5MP50bJ3N4OS7jLBk%2Fuploads%2Fs7ZQaylWT5Fs5sUqZ2Pi%2Fimage.png?alt=media&#x26;token=0a5c6e4c-a53e-439c-93c6-9ca747b92979" alt=""><figcaption></figcaption></figure></div>

## Variant style on product page

We provide 3 variations for you to use according to your liking or purpose.

1. Variant boxed style (style default)
2. Variant dropdown list style
3. Color Variant image swatch style

{% hint style="info" %}
To customize these styles, please go to the [**Product Page Setting**](https://documents.shopifymate.com/mate-documentation/product-page-settings/product-page-settings). We've got documentation and video to access this page and set the elements of the product page&#x20;
{% endhint %}

<div align="left"><figure><img src="https://832052046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGrr5MP50bJ3N4OS7jLBk%2Fuploads%2Fh6eivoCtmV2j4EP0zKhX%2Fimage.png?alt=media&#x26;token=b2d711ca-d014-4839-8e85-373d49f2c69f" alt=""><figcaption></figcaption></figure></div>

Combining these two options, you will get the result below:

<div align="left"><figure><img src="https://832052046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGrr5MP50bJ3N4OS7jLBk%2Fuploads%2F341AWVHQp75gH02u5QFM%2Fimage.png?alt=media&#x26;token=3f492dfe-c0c8-42cf-9736-029525b7cb22" alt=""><figcaption></figcaption></figure></div>