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

Header background

Ecomus - Product - Variant Images Grouped (Product group media)

Annie

Written by Annie

Last updated

894 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 can only configure the Group media feature for one of the variant options. It means, if you configure the media following the Color option, you can not configure it for Size option.

1. Create metafield

Go to Settings > Custom data > Metafields > Products > click 'Add definition'. You need to set up it with the following:

  • Name: Product group media

  • Namespace and key: theme.group_media_obj

  • Select type: JSON

Click 'Save'. Please follow this video:

2. Configure Product group media

Step 1: Go to Theme Customize > Products > only_config template > open 'Product group media' section.

  • Choose a product to configure this feature

  • Select an option to follow the media. Example: Color or size

  • All images/videos of that product will be shown. You choose a variant for each media there.

Note: you leave 'None' at the media which you want to show for all variants.

  • After you have done the configuring, click "COPY CODE".

Step 2: Go to Shopify Admin > Products > open product at step 1 > scroll down to Product group media metafield > paste the code to that field.

Please follow the video below to configure Product group media:

You can do similar steps above to configure group media for other products.

3. 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:

15.gif

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.