# 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** variants**:**

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

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

<figure><img src="/files/oI6nP3VOLdTPNRvGdbH9" 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="/files/V1uimqFnJCs2jHgREFpB" 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="/files/0PNtgaDKtEKiM9Qp5bsH" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/6lAh7ddOKeafve04X2O7" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/aPyk4fKCuEDkG3ySaM25" 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="/files/hs2h5HTq2VuATDCntFbx" 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="/files/HQnP9HkB8Fi0DadiCfqv" alt=""><figcaption></figcaption></figure>

Here is the result:

<figure><img src="/files/h0qza9iTGSZGQ8pttyvN" 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="/files/Kt1s5ravrxsljVwJfoAD" 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://halosoft.gitbook.io/ella-documentation/product-page/variant-image-grouped.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.