Links

Variant Images Grouped

This feature helps you to display product images by variant group. For example: the pictures of products with the same color will be displayed together. You can refer to our demo: https://demo-kalles-4-1.myshopify.com/products/skin-sweatpans?variant=41167815966926 (pass: 4)

1. Configure Variant Images Grouped with a single variant.

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

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 products.
Step 3: Go to Theme settings > Product Single > Enable use group media.
This is the result:

2. Configure Variant Images Grouped with multi-variants

Step 1: From Shopify backend > Products > Choose to create/ open a variant product that you wanna configure Variant Images Grouped. Example: Open the Germana Diamond Ring product.
The required alt text: 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 and Size: Color is (X)0 and Size is (X)1.
Y: is Options value. The number of y in the alt text also should be counted from 0. So if you have 3 options values: White, Black and Red. White is (Y)0, Black is (Y)1 and Red is (Y)2.
Step 2: In the Media option, click on the Product images to add Alt text for the product images:
In the Germana Diamond Ring product, we have 2 variant options: Color and Size. The color variant option has 3 variant values: Hessonite, Blue Sapphire, Emerald and Size Variant option has 2 values: Size 6 and Size 8.
You only can configure the Group media alt text for one of the variant options. It means, if you configure the alt text follow the Color option, you don't need to configure for Size variant anymore.
So the alt text of the product image should be as the image below:
Configure alt text follow the first variant option: Color
Configure alt text follow the second variant option: Size
You can configure follow the video below:
Step 3: Go to Theme settings > Product Single > Enable use group media.

[Private Offer] EComposer Partner Plan

Exclusively for Kalles users, 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, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to Kalles with ease
  • Save up to 50 pages/sections
  • 100+ professional, stunning pre-designed templates
  • Anyone can build pages with live drag-drop editor
How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for free
Cheers, The4.
​