I found a bug in the theme.js.liquid file for the simple theme regarding product image zoom-in

[LurkerLevel9001]

This bug only happens when the zoom type is set to be 'Zoom-in' (the default is lightbox) for the product pages. Here is the test store that I setup to demonstrate the bug: https://vitaminoize.myshopify.com/products/cute-dog-with-money.

Nothing has been changed in the theme code, I only changed the product pages zoom type to 'zoom-in' through the visual customizer.  

To replicate this bug follow these steps:

1. Open that link above in Google Chrome or another browser (I used Chrome) using your desktop PC. Move your mouse over the dog picture and you will see that it will zoom in (which is all well and good).

2. Open the google chrome inspector tool

3. Click the 'toggle device toolbar' and pick any device (I picked iPhone X) 

4. Now click 'toggle device toolbar' again to get back to the desktop view and you will see the following error output to the inspector console: 

Uncaught TypeError: Cannot read property '$productSinglePhotos' of undefined
at Object.unmatch (theme.js?v=13733231539381766514:928)
at e.off (theme.js?v=13733231539381766514:402)
at theme.js?v=13733231539381766514:402
at b (theme.js?v=13733231539381766514:402)
at f.assess (theme.js?v=13733231539381766514:402)
at MediaQueryList.listener (theme.js?v=13733231539381766514:402)

5. Now again put your mouse over the image and you will see that it will no longer zoom in as the error has disabled the zoom functionality. You will need to refresh the page to fix the zoom again.

Also, if you are on an actual mobile device, this problem will still occur. Load the link above in your mobile browser while your phone is in landscape mode. Now move your finger over the dog image and you will see that it will zoom in. Now flip your phone to portrait and then flip it back into landscape and try again to move your finger over the image. You will see that the zoom in functionality no longer works anymore.

The error seems to be coming from line 928 in the theme.js.liquid file: 

// Destroy zoom (in case it was already set), then set it up again
this.selectors.$productSinglePhotos.trigger('zoom.destroy');

I tried to fix it but unfortunately was not able to. I hope this bug can be sorted out by the shopify staff or forum community.

[Lixon_Louis · Accepted solution]

@LurkerLevel9001 it will work if you replace this with self

[LurkerLevel9001]

---

@Lixon_Louis wrote:

@LurkerLevel9001 it will work if you replace this with self

---

Thanks brother this has fixed the problem!