# 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://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FjavGVFKNfLElCqXRlaXm%2Fvariant-1.png?alt=media\&token=f4e83863-9b6a-4484-a4dc-f33b73cb5d33)

{% hint style="info" %}
Halo offers 2 type for Product Variant: Dropdown and Square / Rectangle / Swatch. For more information, see [Swatch](https://halosoft.gitbook.io/halo-docs/theme-settings/general/swatch-variant-customization-option).
{% endhint %}

## Setup Color Variant

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

<figure><img src="https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FJD6HAlmpVfwsUCiIcaW2%2Fimage.png?alt=media&#x26;token=5f48e4e0-2ae7-493b-a266-e0afbaa933cf" alt=""><figcaption><p>1. Basic Color</p></figcaption></figure>

<figure><img src="https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2F5yJWJstzNBc5qxsQYQH4%2Fimage.png?alt=media&#x26;token=f92b2ee0-d855-47d6-82f3-dec28b8aaa4c" alt=""><figcaption><p>2. Advanced Color</p></figcaption></figure>

<figure><img src="https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FEAHV8TssvzNHKRpofT3o%2Fimage.png?alt=media&#x26;token=34ab6515-e131-4f95-8663-240e9311394c" alt=""><figcaption><p>3. Variant Image</p></figcaption></figure>

### Basic Color

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)**.

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2Fve1nQVkTxpwno3KSnCNB%2Fvariant-1.gif?alt=media\&token=822eceb6-8597-4fa3-906f-036adedef365)

{% 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 %}

### Advanced Color

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 Image With PNG Format)**.

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FALpRXM8JFluOECw3qZLR%2Fvariant-2.gif?alt=media\&token=028d0822-b0cc-454f-bf82-e44233fbc762)

{% hint style="info" %}
After that, please upload image with the same name as the variant 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 %}

### Variant Image

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)**.

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

{% 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 %}