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

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FI4S5CApMPMO5RTzDsqwk%2Fimage.png?alt=media&#x26;token=5539c3cf-1812-470b-9dc9-d00a94bb6e3c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Ella 7 offers 2 type for Product Variant: Dropdown and Pills. For more information, see [Swatch](https://halosoft.gitbook.io/ella-7-documentation/product-page/product-information/broken-reference).
{% endhint %}

### How to setup Color Variant?

* From your Shopify admin, go to **Online Store** -> **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* Click **Theme settings.**
* Scroll to **Variant pills** and choose **Type.**

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2F5ZpZ0GXsvGqWl6j0OVFd%2Fimage.png?alt=media&#x26;token=c5bacd21-140f-4ace-bd17-2e498a1e8492" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Ella 7 offers 3 type for Color Variant: Default, Advanced Color and Metaobject.
{% endhint %}

#### 01. Default:

* 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 **Default**

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FHhgxI0PB7OOAt57UVt0X%2Fimage.png?alt=media&#x26;token=c61005a8-8c29-4364-8633-8c66bc1b4ba0" alt=""><figcaption></figcaption></figure>

{% 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://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FCD2UpRLz5GlM80OO4kY2%2Fvariant-3.gif?alt=media\&token=d55b3a54-c48f-445e-8cd7-5b37c94281ae)

{% hint style="info" %}
When using languages other than English, color variations may not be displayed correctly because Shopify does not support them. To circumvent this limitation, consider utilizing images for product variants or metaobject.
{% endhint %}

#### 02. Advanced Color:

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

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FzGwfhp3Tj32qCBvf2Ftd%2Fimage.png?alt=media&#x26;token=30d7dd6a-43d6-47c6-ba72-40ae3ca7450d" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
When selecting this option, there are 2 cases::

* If the color name is a basic color (<http://www.w3schools.com/tags/ref_colornames.asp>) then the color will be displayed automatically.
* If the color name is a special name (not a basic color), then you need to upload a PNG image with a certain naming convention.
  {% endhint %}

#### ***The naming convention for PNG images:***

{% hint style="info" %}
Upload an image with the same name as the color name (Go to Content → 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="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FA6Z7CKRD6qDwCtBG3ceL%2Fimage.png?alt=media&#x26;token=fb2596ca-94f2-4028-b0ea-23d3ad4a597a" alt=""><figcaption></figcaption></figure>

#### 03. Metaobjects:

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

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FlCYzgRAG8x5ZCl6XU2hN%2Fimage.png?alt=media&#x26;token=44543cf1-c74c-4528-b1d2-32bd5dba4ea9" alt=""><figcaption></figcaption></figure>

#### \*Connect a variant to a product or category metafield

1. From your Shopify admin, go to [Products](https://admin.shopify.com/products).
2. Click the product that you want to edit.
3. In the **Category** section under media, select the category that matches your product.

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2F9WpMhO9IwpxXN8k4NoCH%2Fimage.png?alt=media&#x26;token=8fd6f181-fb32-4323-b68b-ddc8152752b2" alt=""><figcaption></figcaption></figure>

4. In the **Variants** section, click **+ Add options like size or color.**
5. If a compatible category or product metafield is available to connect to, then select it. The option values are automatically filled with any entries you have added to the metafield. You can select more option values or create new ones

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FDia1K17Y2qPA9osFkCH5%2Fimage.png?alt=media&#x26;token=a00cdf4b-1326-46ae-9000-e193f8187ae5" alt=""><figcaption></figcaption></figure>

6. Optional: If you want to add custom option values, then click **Edit**, and then click **Add new entry**. Fill out the entry fields, and then click **Save.**

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2F0aqU1QyQBGB2sYjgbZO7%2Fimage.png?alt=media&#x26;token=774e3101-841d-443b-b055-9457e8d08986" alt=""><figcaption></figcaption></figure>

7. Click **Save** to save the product.

{% hint style="info" %}

* Shopify only supports adding colors and images to the Metaobject Color.
* Not all Categories have Metaobject Color available.
  {% endhint %}

{% hint style="info" %}
For more information about Variant Metaobject, you can refer to this [link](https://help.shopify.com/en/manual/custom-data/metafields/add-variants-with-metafields) or contact Shopify directly.
{% endhint %}

### **How to setup** Variant Picker Block on product pag&#x65;**?**

* From your Shopify admin, go to **Online Store** **->** **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* Choose **Product Template** from the dropdown window.

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2F4qOCULhLL5Nx3rIHCRla%2Fimage.png?alt=media&#x26;token=92f093e6-86a6-482d-beb2-2ddab3622919" alt=""><figcaption></figcaption></figure>

* In the **Details** block, find the Variant Picker Block (if not found let add it).

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2Fr8njKMKU8P3EKuKDOCNN%2Fimage.png?alt=media&#x26;token=5d7844b4-ada0-4bb6-9324-bd2c789f09a6" alt=""><figcaption></figcaption></figure>