Only show images based on what variant is chosen?

[Emma1903]

Hi - I have a product this is offered in every letter of the alphabet - so it has 26 variants. For some reason all of the photos for every single variant show up, even when you have the specific variant selected. The product is listed as a draft in my products - but there is a screenshot below. 

Does anyone know of any code to add to show only the relevant images/the ones of the selected variant? Thank you! Store is peridotfinejewelry.com

 

[EcomGraduates]

hello there 

To show only the relevant images for each variant of your product, you will need to modify the code for your product page. You can add some JavaScript to show/hide the appropriate images based on the variant that is selected.

Here is an example of how you can achieve this:

1. First, add a unique class to each variant's image element. For example, you can add a class like variant-image-A to the image element for variant A.
2. Then, add some JavaScript code that will show/hide the appropriate images based on the variant that is selected. You can use the change event listener to detect when a new variant is selected, and then show/hide the relevant images accordingly.

Here's an example of the JavaScript code:

// Wait for the page to load
document.addEventListener('DOMContentLoaded', function() {

  // Get all the variant image elements
  var variantImages = document.querySelectorAll('.variant-image');

  // Hide all the variant images by default
  variantImages.forEach(function(image) {
    image.style.display = 'none';
  });

  // Show the variant image for the selected variant
  var variantSelect = document.getElementById('variant-select');
  variantSelect.addEventListener('change', function() {
    var selectedVariant = variantSelect.value;
    var variantImage = document.querySelector('.variant-image-' + selectedVariant);
    variantImage.style.display = 'block';
  });

});

this example, the code assumes that each variant image element has a class of variant-image followed by a unique class for that variant (e.g. variant-image-A). The code first hides all the variant images by default, and then adds a change event listener to the variant select element.

You will need to modify the class names and selectors to match your specific product page code.

[umidaydemir]

Hi,

I know this is an old question, and I hope you’ve already solved it. However, I wanted to share it here in case others are experiencing the same issue.

To easily resolve this, you can use the Rubik Variant Images app. It ensures that only the images corresponding to the selected variant are shown and it’s very user-friendly.

Check here: https://apps.shopify.com/rubik-variant-images/

I hope this helps both you and others facing a similar issue!

[gr_trading]

Hey @Emma1903 ,

Request you share the product URL so that we can simulate the issue and provide solution.

[Emma1903]

Hi! Sure - it's still a preview product because I don't want to make it live with the variants as is. Let me know if that will still work for you. 

https://2o4elelt1hjx6t62-13774657.shopifypreview.com/products_preview?variant=43278767784099

[gr_trading]

Hi @Emma1903 ,

Your link redirected to 404 page but please follow the below steps to achieve the same.

1. Create product metafield from setting

2. Write the if condition for metafield to be non-empty. Put below CSS in if condition.

.slideshow-thumbnails {
    display: none !important;
}

This will hide the right side image listing and the image will change when the variant changed.

[Emma1903]

Hi! I made the product live so you can see it and shouldn't get the error code anymore. I added this as specified - with the meta field and then the if condition to my product template page, but it still doesn't appear to be working. Can you help? 

Thanks! Here is a photo of how I put the condition in: 

 

[gr_trading · Accepted solution]

Please update code inside the if with below one.

<style>
.slideshow-thumbnails {
    display: none !important;
}</style>

[Emma1903]

Thank you so much!

[scrappuccino]

I have the same problem. where is this code to be changed?

thank you !

[gr_trading]

You can put this code in main-product.liquid or product-template.liquid whatever is there in your theme file.

[Ozkan]

Hi all, 

You can give a try to Rubik Variant Images app, it does exactly what you are looking for.

Here is the demo video as well: https://youtu.be/rRWPNsRw8lM?si=ipJ4LOwYRu5Reain

I hope it helps you on your business 🙂 

[smeijer3]

Could you please explain what kind of metafield should be created? I don't get how this works?

[gr_trading]

Hi @smeijer3 

You have to create metafield at the product level and write the code shown in the below image.

[Mark1189]

I have the same problem. Where does the string for the image variant get inserted?

[gr_trading]

You can put this code in main-product.liquid or product-template.liquid whatever is there in your theme file.

[Mark1189]

I copied and pasted the code into the field you told me, below the string:
" {%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; "

The photos of the color variants continue to appear everywhere; in the black color, the photo of the white color variant also appears, and so on 😕

[MRamzan]

I think you should follow this video. It has fixed exactly the same problem which you have:

[matt1977a]

This solution using alt tags would put your site in violation of the Americans with Disabilities Act (ADA) which requires that alt tags have useful information about the image that cannot be seen by a blind person... Still looking for a solution. Quite frankly, I don't understand why Shopify has not addressed this problem. It seems pretty critical to me. It is bad UX/UI for any shopper.

[MRamzan]

What you can do is that keep the alt text whichever you want but additionaly you should put - COLOR_NAME or VARIANT_NAME and rest of the things you should follow from the above video. Bling man will able to know what that image is about.

[MRamzan]

You can try this method to solve it: