What is media grouping?
Media grouping or multiple variant images is a way to display only the images/media assets associated with a particular product variant on a product page. For example, show only the blue images when the customer selects the blue color option.
This smart feature enhances the shopping experience by only showing the relevant images, videos and models based on the customer's selection. It keep product pages organized and improves focus. Say goodbye to cluttered product pages and hello to improved customer engagement and conversion!
Tip
How to set up media grouping
Steps
- Open the Theme Editor, and select the relevant product template from the dropdown at the top of the page.
- Click on Product pages to edit the product page and product media settings.
- In the Media grouping settings, select Show media only associated with the selected variant.
- Enter the Variant option label around which media will be grouped e.g. Color
- Arrange the product media in Admin > Products so that they are grouped by this variant option.
Product media grouping setup
The Shopify admin dashboard does not currently support assigning multiple images to a single variant, so it is necessary to ensure that product media are ordered in a specific way for this setting to work as intended.
Steps
- Open the product editor in the Shopify admin.
- Order the product media (images, video etc) to ensure all the images for the chosen variant option are grouped together. For example, if the Variant option label chosen was Color, then group all the blue images together, all the white images together and the black images together in sequence. The order of the product media is important.
- Assign the first image of the variant option chosen for grouping (e.g. the first blue image) to all the relevant variants in your product setup. The very first blue image should be associated with all blue variants, then, the very first white image added to all white variants. Using the Shopify Group by dropdown to group variants by Color may help. Once the images have been assigned, the variants will look something like this:
Show an image or video in all media groups
Where an image or a video is applicable to all product variants, this can be added once and shown in all the media groups. This reduces duplication and can be a useful feature for explanatory product videos, lifestyle shots or when there is less product photography available for one color or variant. The feature is available in Symmetry theme versions after 7.0.0.
Steps
- From the Shopify admin area, open the Theme editor
- Select Products from the dropdown at the top and choose the desired product template (e.g. Default product).
- Click on Product pages, scroll to the Media grouping settings and select Show media only associated with the selected variant and then enter the Variant option label around which media will be grouped e.g. Color
- Exit the Theme editor, open the Shopify admin and go to a product where a video or image should be displayed in all media groups. Arrange your product media as explained in the Product media grouping setup guide.
- Find the image or video to be shown in all variant media groups.
- Click on the image or video and choose Edit alt text.
- Add the text all-groups to the alt text to the image which you wish to show in all groups. (Important: Only add this alt text to those images that you wish to appear for every variant. Don't add to all images)
- Click Save alt text.
FAQs
Can I use media grouping for more than one option per product?
Media grouping will apply to only one variant option per product e.g. Color or Size.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us