Selecting variants by clicking their images Refresh Theme

Store Design
1

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

2

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 %}
  
{% endfor %}
  • Include the following JavaScript code either directly in your product.liquid file (within a 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.

1 Like
3

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!

4

Hello,

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

5

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