How can I have the main image changed when clicking on a thumbnail?

This guide is written based on version 1.1.0 and earlier.

1. Go to Online store->Themes->Modular theme

2. Click "Actions"

3. Click "Edit code"

4. Search for the "Assets" folder

5. Open the "shop.js.liquid" file

6. Append the following block of code to the end of the file

$(document).ready(function(){ $('div.js-slide').on('click', function(e) { $('div.js-slide:first').removeClass('is-selected-product'); $('div.js-productImgSlider').prepend(this); $(this).addClass('is-selected-product'); }); });

7. Click "Save"