# How to group product images by variants?

You can follow the listed recommendations to apply configurations specifically for a color variant:

#### **Step 1**

Go to your *Shopify admin -> Products*, select a product, or create a new one. Then, add product images to the "Media".

#### **Step 2**

Place images in the proper order to display on the storefront: first image - main image of the product variant; then, all other images related to this product variant.

The main image defines the beginning of the images grouped by a specific color and ends with the main image of a new group.

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

Start each new group of product variant images with the main image. Then, add as many related images as needed.

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

#### **Step 3**

Add a product option with product variants.

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

#### **Step 4**

Assign main images to each product variant.

<figure><img src="/files/5pbOVizvEFluCIyw1Hrh" alt=""><figcaption></figcaption></figure>

#### **Step 5**

To use the "Group with tag 'group-gallery' option, type the 'group-gallery' in the "Tags" field for the desired product once. Then, this tag will be available to select from the "Tags" list of your admin for other products.

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

#### **Step 6**

Use settings provided in the "Action after selecting a variant" drop-down of the Theme Editor:

* "[<mark style="color:blue;">Featured product</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/featured-product)" section;
* *Products ->* [*<mark style="color:blue;">Product information</mark>*](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/products/product-information#media).


---

# 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://mpithemes.gitbook.io/unicorn-shopify-theme/faq/how-to-group-product-images-by-variants.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.