How can I replace the image zoom with a lightbox?

This guide is written based on version 1.1.0 and earlier.

Replace the zoom functionality when clicking on the product images with a lightbox by doing the following steps:

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

2. Click "Actions"

3. Click "Edit code"

4. Search for the "Assets" folder

5. Open the "style.scss.liquid" file

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

.product-image-img:hover{ cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: url('./magnify.cur'), move; } .mobile-zoom-overlay img { transform: translateY(-50%) !important; top: 50% !important; max-height: 100% !important; } .template-product .mobile-zoom {display: none !important;} .is-visible .mobile-zoom-close, .mobile-zoom-overlay { display: block !important; }

7. Click "Save"

8. Open the "page-product.js.liquid" file

9. Replace all the content with the code from the link here

10. Click "Save"

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

12. Comment out the lines 2935-2937 



13. Replace the imageZoom function on lines 3451-3547 with the code from the link here (copy-paste until you see IE8 Compatibility)



14. Click "Save"