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

![](/files/zB0CaCBGveN3AhQh1ufR)

{% hint style="info" %}
Halo offers 2 type for Product Variant: Dropdown and Square / Rectangle / Swatch. For more information, see [Swatch](/halo-docs/theme-settings/general/swatch-variant-customization-option.md).
{% 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="/files/cUtzGT99ND67ErDOPblz" alt=""><figcaption><p>1. Basic Color</p></figcaption></figure>

<figure><img src="/files/JB54Aq30bmehxkUojXQD" alt=""><figcaption><p>2. Advanced Color</p></figcaption></figure>

<figure><img src="/files/jJypK70OzCB2kiw0yRhk" 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)**.

![](/files/F6dAxzzN7G2KyqlG2tZx)

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

![](/files/73lvXWXeUyPouhKYvuQG)

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

![](/files/vFKBcamIf2FmYCaIgOl1)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/halo-docs/products/product-information/product-variant.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.