> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/product-page/variant-media-grouping.md).

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