SectionAI is free + 20K tokens if you're a The4 customer, Free plan is available Install App  

Header background

Variant Images Grouped

Annie

Written by Annie

Last updated

2094 views

On this page


This feature helps you to display product images by a variant group.

For example, the pictures of products with the same color will be displayed together when you change the options. You can refer to the video below:

Important note:

  • You only can configure the Group media alt text for one of the variant options. It means, if you config the alt text following the Color option, you can not config for Size option.

  • Variant image group do not work if your variant name includes " letters. Example

52.gif

1. Enable Group media

Go to Theme settings > Product Single > Enable use group media.

13.webp

2. Config with a single language

If you only have one language in your store (example: English), you need to follow these steps:

Step 1: From Shopify Admin > Products > Open a product that you want to show Group variants image.

11.gif

Step 2: Edit Alt Text

Click on an image to add Alt Text. Enter Color_”the color of your variant”.

For example Color_White Cream, Color_Heart Dotted. You must enter all the same Alt Text for a group of images.

This is the result:

3. Config with multi-languages

If you have multi languages in your store (example: English and French), you need to follow these steps:

Step 1: From Shopify Admin > Products > Open a product that you want to config Group variants image.

The required alt format: t4optionX_Y

The position of X and Y can be explained by the image below:

X: is the Option name. The number of x in the alt text should be counted from 0. So if you have 2 variant options: Color - (X)0 and Size - (X)1. You can choose which variant to be grouped.

Y: is the Options value. The number of y in the alt text also should be counted from 0. So if you have 3 options values: Black - (Y)0, Green - (Y)1 and White - (Y)2.

22.png

Step 2: In the Media option, click on each product image to add Alt text.

  • Configure alt text following the first variant option: Color.

For example, all images for "Color: Black" will have the same alt "t4option0_0", "Color: Green" -> "t4option0_1". Please follow this video:

The result:

  • Configure alt text following the second variant option: Size

For example, all images for "Size: S" will have the same alt "t4option1_0", "Size: M" -> "t4option1_1". Please follow this video:

The result:

4. Change main image when choosing different variants

If you want to change the main image when choosing different variants (like Color-Size) as video below:

You need to choose an image for each variant here:

42.png

🎁 Exclusive Deals for The4 Customers

SectionAI

🤖 SectionAI – Build Sections with AI

Generate Shopify sections from text or wireframes.
The4 users get +20,000 bonus tokens when verifying their theme license.

  • ✅ No-code section builder
  • ✅ Works with your The4 theme
  • ✅ Build FAQs, banners, product grids & more
🚀 Try Free – Claim Tokens
EComposer

🎉 EComposer – Free 6-Month Plan

Build landing pages, sales funnels, and more with drag & drop.
The4 users get 6 months free (save $114).

  • ✅ 100+ templates ready to use
  • ✅ Build any Shopify page
  • ✅ No coding required
🔓 Get 6 Months Free

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.