# Variant Image Grouped

{% hint style="info" %}
Note: This feature only works well on products with a single variant using color swatches.
{% endhint %}

### Below is the step by step instruction to set up Variant image grouped.

## **Create a Metafield for** variant&#x73;**:**

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

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FeYuijpruSm0ckyV1f5Nh%2Fmetafield-variant.jpg?alt=media&#x26;token=a0c3a911-23bf-4159-809d-7b491daa41dc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FfLiMgpOvLx6DS3ZhpQtK%2Fmetafield-variant-define.jpg?alt=media&#x26;token=10793157-307d-4cd2-9eb1-9a94a5d46b20" alt=""><figcaption></figcaption></figure>

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

```
Name: Variant Image Grouped or any name.
Namespace and key: custom.variant_image_group
Select content type: Multi-line text
```

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FaqpHY0rOBLukPcjnvnOF%2Fmetafield-variant-define-2.jpg?alt=media&#x26;token=35e4a6d6-c137-40c8-912b-9be4d9b39e32" alt=""><figcaption></figcaption></figure>

## How to insert content for Variants Metafields?

1. From your Shopify admin, go to **Products -> All products**.
2. Find and choose the product that you want to edit.
3. Click on the image -> Click **Add alt text** -> Enter the alt text that you want for the image -> click **Save alt text.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FsxM6c37Sxvho6JI57Lj1%2Fmetafield-variant-product-2.jpg?alt=media&#x26;token=a8ecde26-b46f-4c44-a5b9-0337a6b1e1a3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FfEzya2NuaCCFDJZnNhH2%2Fmetafield-variant-product-3c.jpg?alt=media&#x26;token=5d2f3675-6b04-4d02-8418-b238380c3706" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F5k5GELU9ndk1WDWp9s0V%2Fmetafield-variant-product-3d.jpg?alt=media&#x26;token=5f5ceee1-a77d-4074-bee4-3bb1e1caab62" alt=""><figcaption></figcaption></figure>

4. At "**Variants**" click on the variant you want.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FvUBwm22AHy6wUoPV4NxB%2Fmetafield-variant-product-3k.jpg?alt=media&#x26;token=16dc7f44-d459-48c1-a1f6-973ac5fbd9e4" alt=""><figcaption></figcaption></figure>

5. In the **Metafields**, please enter the alt text of the images you want show for this variant on the **Variant Image Grouped** input.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FewlYEkD59lx57sJjmki8%2Fmetafield-variant-product-3e.jpg?alt=media&#x26;token=e48cc594-156a-46ab-8d72-b0f41d8c9e39" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note**: After each Alt Text, there must be a comma "<mark style="color:red;">**,**</mark>" and no space between the Alt Texts. \
**Example**: Gym For Sale Green 1<mark style="color:red;">**,**</mark>Gym For Sale Green 2
{% endhint %}

## **Set up** Variant Image Grouped

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Default product** template in the dropdown of editor window to open theme editor of product page.
4. From **Product information ->** Click **Add block** -> Choose **Variant picker.**
5. Choose **Enable variant image grouped** to enable Variant Image Grouped function.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FEgZAtEemQaTviro2kxMS%2Fimage.png?alt=media&#x26;token=7abd2e99-03be-4511-afc3-e129ecb7ef38" alt=""><figcaption></figcaption></figure>

Here is the result:

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F5kftEB5Z7btkzJytSNvC%2Fmetafield-variant-product-3h.jpg?alt=media&#x26;token=88e71e4f-6eb4-48ed-a9fe-d23e74b274f0" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you want to have this feature on **Quickview**, please go to **Theme settings -> Quickview** -> **Enable variant image grouped**.
{% endhint %}

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FUkOB4WjMoI7ubT9QkzWL%2Fimage.png?alt=media&#x26;token=776f9483-d694-4137-9322-86c88afc73c7" alt=""><figcaption></figcaption></figure>
