> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/faq/how-to-group-product-images-by-variants.md).

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