Selecting variants by clicking their images Refresh Theme

[Beepbeet]

Looking for code that will allow my customers to select thumbnail and it change the variant.

[AliReviews]

Hello @Beepbeet ,

Since we not really know the exact context of your site, here is a general guide with example you can try to follow:

• Go to Online Store -> Themes -> Actions -> Edit code
• Go to Sections -> product-template.liquid (or something name similar to this)
• Find the section that renders the product thumbnails. It might look something like this:

{% for image in product.images %}
  <img src="{{ image.src }}" alt="{{ image.alt }}" class="product-thumbnail" data-variant-id="{{ image.id }}">
{% endfor %}

• Include the following JavaScript code either directly in your product.liquid file (within a <script> tag) or in a separate JavaScript file:

document.addEventListener("DOMContentLoaded", function() {
  var thumbnails = document.querySelectorAll(".product-thumbnail");

  thumbnails.forEach(function(thumbnail) {
    thumbnail.addEventListener("click", function() {
      var variantId = this.dataset.variantId;
      var selectElement = document.querySelector("select[name='id']");

      if (variantId && selectElement) {
        selectElement.value = variantId;
      }
    });
  });
});

This code listens for click events on each thumbnail image. When a thumbnail is clicked, it retrieves the corresponding variant ID from the data-variant-id attribute and sets the value of the variant select dropdown to that ID.

• Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

[Beepbeet]

I am not finding a product-template.liquid. Is this code good for the new 2.0 sites? I can't seem to find similar in Sections folder. Any help greatly appreciated! 

[galaxybags]

I am also facing the same issue. Has your issue been resolved? If it has, then please tell me how.

[Splainek]

Hello, 

Could you please provide the specifics for making this change in the Prestige Theme? Thank you