Custom Work / image change on swatch or radio button click - for free themes like Dwan, Crave, Taste, Studio, Spotlight..

Modified on Fri, 23 Feb at 4:50 AM

1. Please create the following JavaScript file named "bold-custom.js" and include it in the "sc-include.liquid" file. You can refer to the screenshot below for guidance.


<!-- Using Jquery -->


<script>
  $('.bold_option.bold_option_radio .bold_option_value_element input, .bold_option.bold_option_swatch .bold_option_value_element input ').each(function(){
    $(this).on('change', function(){
        var boldValue = $(this).val().toLowerCase();
        $('.thumbnail-slider .thumbnail img').each(function() {
          var ImgValue = $(this).attr('alt').toLowerCase();
            if(boldValue == ImgValue) {
               $(this).parent().click();
            }
        });
    })
  })
</script>


<!-- OR 

Using Javascript 
-->


function applyScript(event) {
  var thumbnailImages = document.querySelectorAll('.thumbnail-slider .thumbnail-list img'); //Check the class and update accordingly 
  var boldValue = event.target.value.toLowerCase();
  thumbnailImages.forEach(function(image) {
    var imgValue = image.getAttribute('alt').toLowerCase();
    console.log("imgValue",imgValue , "boldValue", boldValue)
    if (boldValue === imgValue) {
      image.parentElement.click();
    }
  });
}




function observeDOM() {
  var observer = new MutationObserver(function(mutationsList) {
  for (var mutation of mutationsList) {
    if (mutation.type === 'childList' && mutation.target.classList.contains('bold_options_loaded')) {
      var radioInputs = document.querySelectorAll('.bold_option.bold_option_radio .bold_option_value_element input');
      var swatchInputs = document.querySelectorAll('.bold_option.bold_option_swatch .bold_option_value_element input');
      




      radioInputs.forEach(function(input) {
        input.addEventListener('change', applyScript);
      });
      
      
      swatchInputs.forEach(function(input) {
        input.addEventListener('change', applyScript);
      });
      observer.disconnect();
      break;
    }
  }
  });
  observer.observe(document.body, {
  childList: true,
  subtree: true
  });
}
document.addEventListener('DOMContentLoaded', function() {
observeDOM();
});


        Note: The thumbnail class need to be added properly base on particular theme

.thumbnail-slider .thumbnail-list img


2. sc-includes.liquid SCREENSHOT

{{ 'bold-custom.js' | asset_url | script_tag }}

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article