How can I replace the image zoom with a lightbox?

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 

Before

After

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

Before

After

14. Click "Save"