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


---

# 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://templatescoder.gitbook.io/labacha-shopify-theme-documentation/collection-and-product/product-page/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.