# 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FmFFZzMUVtmZtDmzVUk1Z%2Fgroup%20gallery_first.png?alt=media&#x26;token=e2f79083-1e29-4016-b7a7-696148461783" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FAKhY58QgdvQSLfNfQKhZ%2Fgroup%20gallery_second.png?alt=media&#x26;token=943dec7e-51ef-470c-8750-5e965aaca941" alt=""><figcaption></figcaption></figure>

#### **Step 3**

Add a product option with product variants.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F4qwxjniXPBM8gvM47LGp%2Fgroup%20gallery_third.png?alt=media&#x26;token=c9fae9dd-4588-4977-a887-d49d15bdeb9d" alt=""><figcaption></figcaption></figure>

#### **Step 4**

Assign main images to each product variant.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F5svV4S69kC38Ymtra1qF%2Fgroup%20gallery_fourth.png?alt=media&#x26;token=8fe4ded4-1982-41dc-a1a4-02a9191704b5" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FofW2wt6VsBZy2xLuEAhy%2Fgroup%20gallery_tag.png?alt=media&#x26;token=9f8b7f0f-e6a2-4a99-8e8b-466677c245f3" 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).