> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/buy-and-install/create-required-metafields/metafields/use-variants-image-group.md).

# Use Variants Image Group

The **Use variants image group** metafield groups a product's images by variant. When it is on, the product gallery shows only the images that belong to the variant the shopper has selected, instead of the theme's default of showing all of the product's images together. This keeps the gallery focused on the chosen variant, which is useful when a product has distinct images per color or style.

**Use variants image group** is a true/false metafield you set on individual products, so you can switch this display behavior on for some products and leave it off for the rest. This page shows you how to create the metafield and turn it on for a product; the video and the screenshot at the end show what changes on the storefront.

{% embed url="<https://www.youtube.com/watch?index=5&list=PLXafA-TOPZSA&v=ul58BcejQVk>" %}

### When you need this <a href="#when-you-need-this" id="when-you-need-this"></a>

* You have products with **variants** and want this display option applied to them.
* You want to decide **product by product** rather than for the whole store, since the metafield is a checkbox on each product.
* Products where the box is left unticked keep the theme's default behavior, so you can roll it out gradually.

### Before you start <a href="#before-you-start" id="before-you-start"></a>

* You can access **Settings > Custom data** in your Shopify admin. (Staff accounts need the matching permission.)
* The products you want to use it on already have their variants and product media set up.
* Create the metafield first (Step 1); the checkbox only appears on products after the definition exists.

### Step 1: Create the Use variants image group metafield <a href="#step-1-create-the-metafield" id="step-1-create-the-metafield"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Shopify admin > Settings > Custom data > Products** (**Custom data** is shown as **Metafields and metaobjects** in some admin versions).
2. Click **Add definition**.
3. Fill in:
   * Name: `Use variants image group`
   * Namespace and key: `custom.use_variants_image_group`
   * Type: **True or false**
4. Click **Save**.
   {% endhint %}

*Result:* the definition is stored and a **Use variants image group** checkbox is now available on every product.

<figure><img src="/files/27XI18TP0W8qOTziCGqU" alt=""><figcaption></figcaption></figure>

### Step 2: Turn it on for a product <a href="#step-2-turn-it-on" id="step-2-turn-it-on"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Shopify admin > Products**.
2. Select the product you want to turn this on for.
3. Scroll down to the product's **Metafields** area.
4. Set **Use variants image group** to `true`.
5. Click **Save**.
6. Repeat for any other product that needs it.
   {% endhint %}

*Result:* that product is marked to use the variants image group; products you leave unticked are unaffected.

<figure><img src="/files/8S389gs8z4kw5d4N9J9j" alt=""><figcaption></figcaption></figure>

### What you should see <a href="#what-you-should-see" id="what-you-should-see"></a>

Open the product on your storefront. The product page now uses the variants image group display for that product, as shown below. Products where the metafield is unticked or has no value keep the theme's default product media display, so you can compare the two side by side.

### If something goes wrong <a href="#if-something-goes-wrong" id="if-something-goes-wrong"></a>

* **The checkbox does not appear on the product.** The definition has not been created yet, or its namespace and key differ from `custom.use_variants_image_group`. Recheck the values in Step 1.
* **Nothing changed on the storefront.** Confirm you ticked and saved the metafield on the same product you are viewing, and that the product actually has variants with media.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Create Required Metafields](/velare/buy-and-install/create-required-metafields.md): why the theme uses metafields and metaobjects
* [Metafields](/velare/buy-and-install/create-required-metafields/metafields.md): the full list of metafields to create
* [Product information](/velare/customize-your-pages/product-page/page-template-sections/product-information.md): product media and variant picker settings on the product page
* [Short Description](/velare/buy-and-install/create-required-metafields/metafields/short-description.md): another per-product metafield, set up the same way


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/buy-and-install/create-required-metafields/metafields/use-variants-image-group.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.