Fix: Product image zoom/modal not working in Dawn 15.4.0 #3879
+9
−0
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue
Closes #3874
In Dawn 15.4.0, clicking on a product image or thumbnail does not open the product media modal (lightbox), and zoom functionality is broken.
The HTML elements (.product__media-toggle, ) exist in the DOM.
No JavaScript errors appear in the console.
The modal does not open because the event listener for media toggle clicks is missing.
Cause
Shopify refactored the Dawn theme’s product modal in 15.4.0.
The click handlers for .product__media-toggle elements were removed or not properly attached.
As a result, the modal does not respond to user clicks.
Solution
Added a click event listener to all .product__media-toggle buttons.
On click, the modal opens using the existing show(opener) method.
No other parts of the modal or lightbox logic were changed.
Code Snippet:
document.querySelectorAll('.product__media-toggle').forEach((toggle) => {
toggle.addEventListener('click', (event) => {
event.preventDefault();
this.show(toggle); // open modal with clicked element
});
});
Testing Steps
Go to a product page in the Dawn 15.4.0 theme.
Click on the main product image or a thumbnail.
The product modal (lightbox) should open.
Zoom and media navigation inside the modal should work.
Verify no console errors appear