Main image in product page switches to first variant image upon entrance

[najiamir]

Hi everyone

I'm struggling with this problem, seems like only I have it.

I chose a main Picture for my product, but instead of showing it in the product page , it defaults back to the first variant image upon entrance for some reason.

I realized it has something to do with this line of code:

{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}

But as I lack coding knowledge, I have no idea what to do with it. Everything I try gives back an error or deletes the whole thumbnail section.

Any ideas for how to solve this? The variant picture doesn't match there at all 😞

[Small_Task_Help]

Hi,

Need to update the Liquid code to use the main product image as the default

Use javascript if required to handle dynamic image changes as per variant

Javascript code example

document.addEventListener('DOMContentLoaded', function () {
  var variantSelect = document.querySelector('select[name="id"]'); // Adjust selector as needed
  var imageContainer = document.querySelector('.product-image'); // Adjust selector as needed

  variantSelect.addEventListener('change', function (event) {
    var selectedVariant = event.target.value;
    var selectedImage = document.querySelector('.variant-image[data-variant-id="' + selectedVariant + '"]');

    if (selectedImage) {
      imageContainer.src=selectedImage.src;
    }
  });
});

Please share your store URL as well

[najiamir]

Thanks. This is my store URL: 

https://electroship.store/

[najiamir]

Evetually I found a solution here that worked for me: 

https://community.shopify.com/c/shopify-design/show-featured-product-image-instead-of-selected-varia...