Selecting variants by clicking their images Refresh Theme

Store Design
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