> For the complete documentation index, see [llms.txt](https://templatescoder.gitbook.io/labacha-shopify-theme-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://templatescoder.gitbook.io/labacha-shopify-theme-documentation/collection-and-product/product-page/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 [<mark style="color:orange;">Variants</mark>](https://help.shopify.com/en/manual/products/variants).

<figure><img src="/files/ytoDZ85Gc9MHAaeLpc61" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Labacha offers 2 type for Product Variant: Dropdown and Square / Rectangle / Swatch.
{% endhint %}

{% hint style="success" %}
**Steps:**

1. Go to **Customize** -> Choose **Default product** template in the dropdown of editor window to open theme editor of product page.
2. Click **Add block** from **Product Information** -> Choose **Variant Picker**
   {% endhint %}

<figure><img src="/files/wm6NZfA7aGc1YNoSsshC" alt=""><figcaption></figcaption></figure>

### Setup Color Variant

{% hint style="info" %}
Labacha offers 2 type for Color Variant: Basic Color, Advance
{% endhint %}

<figure><img src="/files/2N96lGeDQgllsW6HqF1h" alt=""><figcaption></figcaption></figure>

### 1. 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 **Default**

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

<figure><img src="/files/VGTBGBDSfS1X99mQwNa2" alt=""><figcaption></figcaption></figure>

### 2. Advanced Color

{% hint style="info" %}
'Advanced Color' use color name or image with PNG format. use image with PNG format from metafields.
{% endhint %}

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 **Advanced Color**

<figure><img src="/files/sa5J1WvjsNUVQVaYw9xN" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/prJsJzmXvQWcXtytuxMp" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You need to make sure your color name match with the color name at:

[<mark style="color:orange;">http://www.w3schools.com/tags/ref\_colornames.asp</mark>](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 %}

### H**ow to add a new Metafields?**

* From your Shopify admin, go to **Settings** **->** **Custom data**.
* Click **Variants → Add Definition.**

<figure><img src="/files/cI2oe3q7997SO12z8xwJ" alt=""><figcaption></figcaption></figure>

Please enter the correct **Namespace and Key** as we noted below.

{% hint style="info" %}

```
Name: Variant Color
Namespace and key: custom.variant_color
Select content type: Text
```

{% endhint %}

### How to insert content for Product Metafields?

1. From your Shopify admin, go to **Products -> All products**.
2. Find and choose the product that you want to edit.
3. Find and choose the variant that you want to edit.
4. In the **Metafields,** you need to insert "**Color codes**" or "**Image with PNG format**" for "**Variant Color**".

* **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: "Dark Gray Custom", you will upload the png image is dark-gray-custom.png
{% endhint %}

<figure><img src="/files/8RnsDT8rn2N9o4x1Inkv" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/t4Kr7jwUMs9blHDoZEy2" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/zx2xK6dbnt51ZxcwHNgf" alt=""><figcaption></figcaption></figure>