Display Only Variant-Specific Images

When you sell products on Shopify, you'll naturally want to add as many pictures of them as possible so your customers can make an informed choice. This can be a problem, however, when you offer multiple variants for a single product, as by default, Shopify doesn't filter the images based on that.

Someone who's interested in buying a red shirt wouldn't be interested in sifting through images of yellow shirts, for example, and the cluttered gallery could make shopping more cumbersome than it needs to be.

If you search online, you'll find tutorials and solutions for this problem, but they all share the same issue of not accounting for cumulative variants: they can filter an image gallery and show only red shirts or only medium-sized shirts, but not both at the same time.

The following custom code made by ezfycode.com is not only easy to install, but we'll also teach you how to set up your metafields so your product page lists only images relevant to the currently selected variants, no matter how many you offer!

Before starting: 👉 Click here to download the code 👀 Click here to view a live demo

Step 1: adding the code to your theme

1. From your Shopify admin, go to Online Store > Themes >...> Edit Code.
   
   
2. Open the snippets folder to the left and click the Add a new snippet option at the top. On the popup window that opens, type in exactly ezfy-variant-group, then click on Done.
   
   
3. Copy the code and paste it in the new blank file that you just created. When you're done, click on the Save button at the top right corner.
   
   
4. Now click on the search bar at the top left corner, and type in it main-product. Open the file and paste the following code at the very beginning:
   
   {% include 'ezfy-variant-group', product: product, section: section, settings: settings %}
   
   Now just click the Save button and you're done!
   
   

Step 2: setting up metafields

1. Back to your Shopify admin, click on the Settings button at the bottom left corner.
   
   
   
2. Then Custom data > Variants > Add definition.
3. Fill in with the respective data.
   
   Name: EZFY Variant Grouping
   
   Namespace and key: custom.variant_gallery 
   
   Description: Filters product page image gallery based on all currently selected variants, by ezfycode.com
   
   
   Next, click the Select type button then the File option.
   
4.  Select the List of files option then make sure the Accept specific file types option below is selected and that both the Images and Videos boxes are ticked. Click the Save button at the bottom and go back to your Shopify admin.
   
   

Step 3: adding the images to your product

1. In the menu on the left, click on Products then then product you're offering variants of. 
   
2. Scroll down until you find the list of variants, click on the arrow down and select the variant you'd like to add images to.
   
   
   
3. On the new page that opens up, scroll down all the way to the bottom until you find the EZFY Variant Grouping metadata. 
   Click on it then Select files.
   Select the images corresponding to that specific variant. Once you're done click on the Save button below.
   
   Remember that you'll have to repeat this step for each variant you offer. If you have no additional images for a certain variant aside from the main picture, that is not neccessary.
   

That's it! Now let's take a look at what the product page looks like with a before and after:

Here's the default look. Note how the shopper has leather red jackets selected, yet the gallery below is clustered with pictures from jackets of different colors and materials.

And with our custom ezfycode.com snippet that you just installed, it now look like this:

Only pictures of relevant red jackets, including some that were previously pushed off screen by unrelated pictures.

In conclusion, by following this simple tutorial, you’ve successfully enhanced your Shopify store’s product pages with a more intuitive and streamlined image gallery. By adding the custom ezfycode snippet and setting up the metafields correctly, you’ve ensured that your customers will only see images relevant to the specific product variants they’re interested in. This not only improves the shopping experience but also reduces clutter, making it easier for customers to find exactly what they’re looking for. With this feature in place, your Shopify store is now more polished, organized, and user-friendly, giving you a competitive edge in providing a seamless shopping experience. Happy selling!