> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bonnita-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bonnita-documentation/product-page/product-information/product-variant.md).

# Product Variant

You add variants to a product that comes in more than one option, such as size or color. Each combination of option values for a product can be a variant for that product. For more information, see [Variants](https://help.shopify.com/en/manual/products/variants).

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FN60Bxq4cogmUtcU1XH3H%2F139.jpg?alt=media\&token=c8c55c39-9e76-4eb9-b7ae-893d93f4bd2d)

{% hint style="info" %}
Bonnita offers 2 type for Product Variant: Dropdown and Square / Rectangle / Swatch. For more information, see [Swatch](/bonnita-documentation/theme-settings/general/swatch-customization-option.md).
{% endhint %}

## Setup Color Variant

{% hint style="info" %}
Bonnita offers 3 type for Color Variant: Basic Color, Custom Color and Variant Image.
{% endhint %}

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2Fy62fhG4PADSDtoglt3eF%2F220.jpg?alt=media\&token=d535abcf-13ec-4767-b5c3-c8cce983b5ae)

### Basic Colors:

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings ->** **General.**
4. Scroll to **Swatch** and choose **Type** as **Basic Color (Use Color Name or Image with PNG format)**.

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FZhrPiLAV03SZ2ad2JkCa%2F140.jpg?alt=media\&token=a81af0f8-4785-418d-ace4-5596037adbfb)

{% hint style="info" %}
You need to make sure your color name match with the color name at: <http://www.w3schools.com/tags/ref_colornames.asp>. If the color name doesn't exist on the w3schools website, it will not display on your site.
{% endhint %}

### Custom Colors:

If your products have custom colors/ special colors, you can follow below instruction:

* From your Shopify admin, go to **Online Store** -> **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* Click **Theme settings ->** **General.**
* Scroll to **Swatch** and choose **Type** as **Basic Color (Use Color Name or Image with PNG format)**.

{% hint style="info" %}
After that, please upload an image with the same name as the color name (Go to Settings → Files -> Upload Files).

**Naming convention**: Lower cap and use a hyphen "-" to replace white space if your color image name has the white space. For example: your special color will have this name: "Holo Rainbow", you will upload the png image is holo-rainbow\.png
{% endhint %}

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FP7gsrdIrwjwiMh24eVWg%2Fspecial_color_1.jpg?alt=media\&token=0a041d01-677b-495f-b942-4f98c24707c8)

### Variant Images:

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings ->** **General.**
4. Scroll to **Swatch** and choose **Type** as **Advance Color (Use Variant Image)**.

{% hint style="info" %}
For more information, see [Adding images to product variants](https://help.shopify.com/en/manual/products/product-media/add-images-variants).
{% endhint %}

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2F7kirZODsMlHCDq0uHFN5%2Fvariant-3.gif?alt=media\&token=b8cff631-1642-4dad-a987-451b3c0c5f9f)