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

Group images by product variants to set the related images for a specific color variant.

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 in the "Media".

#### **Step 2**

Place images in the order to display on the storefront:

* first image - main image of the product variant;
* all other images - related to this product variant.

The main image marks the beginning of images grouped by a particular color and is followed by the main image of the 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&amp;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&amp;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&amp;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&amp;token=8fe4ded4-1982-41dc-a1a4-02a9191704b5" alt=""><figcaption></figcaption></figure>

#### **Step 5**

To use the "Group by 'group-gallery' tag" option, paste the 'group-gallery' tag in the "Tags" field for the desired product. This tag will become available in the "Tags" list for other products in your admin.

<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&amp;token=9f8b7f0f-e6a2-4a99-8e8b-466677c245f3" alt=""><figcaption></figcaption></figure>

#### **Step 6**

Use the settings provided in the "After variant selection" drop-down of the Theme Editor:

* "[<mark style="color:blue;">Featured product</mark>](/unicorn-shopify-theme/dynamic-theme-sections/featured-product.md)" section;
* *Products ->* [*<mark style="color:blue;">Product details</mark>*](/unicorn-shopify-theme/page-categories/products/product-details.md).