# Variant media grouping

{% hint style="warning" %}
**Variant media grouping** is currently supported **only for swatch variants**.\
Support for other variant types may be added in future updates.
{% endhint %}

#### Below is the step by step instruction to set up Variant image grouped. <a href="#below-is-the-step-by-step-instruction-to-set-up-variant-image-grouped" id="below-is-the-step-by-step-instruction-to-set-up-variant-image-grouped"></a>

### **Create a Metafield for** variant&#x73;**:** <a href="#create-a-metafield-for-variants" id="create-a-metafield-for-variants"></a>

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

<figure><img src="https://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252FeYuijpruSm0ckyV1f5Nh%252Fmetafield-variant.jpg%3Falt%3Dmedia%26token%3Da0c3a911-23bf-4159-809d-7b491daa41dc&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=50208871&#x26;sv=2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252FfLiMgpOvLx6DS3ZhpQtK%252Fmetafield-variant-define.jpg%3Falt%3Dmedia%26token%3D10793157-307d-4cd2-9eb1-9a94a5d46b20&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=11fee798&#x26;sv=2" alt=""><figcaption></figcaption></figure>

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

<a class="button secondary">Copy</a>

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

<figure><img src="https://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252FaqpHY0rOBLukPcjnvnOF%252Fmetafield-variant-define-2.jpg%3Falt%3Dmedia%26token%3D35e4a6d6-c137-40c8-912b-9be4d9b39e32&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=480c5371&#x26;sv=2" alt=""><figcaption></figcaption></figure>

### How to insert content for Variants Metafields? <a href="#how-to-insert-content-for-variants-metafields" id="how-to-insert-content-for-variants-metafields"></a>

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://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252FsxM6c37Sxvho6JI57Lj1%252Fmetafield-variant-product-2.jpg%3Falt%3Dmedia%26token%3Da8ecde26-b46f-4c44-a5b9-0337a6b1e1a3&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=957fecaf&#x26;sv=2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252F5k5GELU9ndk1WDWp9s0V%252Fmetafield-variant-product-3d.jpg%3Falt%3Dmedia%26token%3D5f5ceee1-a77d-4074-bee4-3bb1e1caab62&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=8cc2bd31&#x26;sv=2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252FfEzya2NuaCCFDJZnNhH2%252Fmetafield-variant-product-3c.jpg%3Falt%3Dmedia%26token%3D5d2f3675-6b04-4d02-8418-b238380c3706&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=3f8b8ce&#x26;sv=2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252FsxM6c37Sxvho6JI57Lj1%252Fmetafield-variant-product-2.jpg%3Falt%3Dmedia%26token%3Da8ecde26-b46f-4c44-a5b9-0337a6b1e1a3&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=957fecaf&#x26;sv=2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252FvUBwm22AHy6wUoPV4NxB%252Fmetafield-variant-product-3k.jpg%3Falt%3Dmedia%26token%3D16dc7f44-d459-48c1-a1f6-973ac5fbd9e4&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=f62aa190&#x26;sv=2" alt=""><figcaption></figcaption></figure>

1. 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://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252FewlYEkD59lx57sJjmki8%252Fmetafield-variant-product-3e.jpg%3Falt%3Dmedia%26token%3De48cc594-156a-46ab-8d72-b0f41d8c9e39&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=be00a104&#x26;sv=2" alt=""><figcaption></figcaption></figure>

**Note**: After each Alt Text, there must be a comma "**,**" and no space between the Alt Texts. **Example**: Gym For Sale Green &#x31;**,**&#x47;ym For Sale Green 2

### **Set up** Variant Image Grouped <a href="#set-up-variant-image-grouped" id="set-up-variant-image-grouped"></a>

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. **Theme Settings** -> **Swatch** -> **Show variant media grouped**

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

Here is the result:

<figure><img src="https://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252F5kftEB5Z7btkzJytSNvC%252Fmetafield-variant-product-3h.jpg%3Falt%3Dmedia%26token%3D88e71e4f-6eb4-48ed-a9fe-d23e74b274f0&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=5a5df1d4&#x26;sv=2" 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-7-documentation/product-page/variant-media-grouping.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.
