Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Variant Images Grouped

Annie

Written by Annie

Last updated

1578 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

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

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.