Skip to content

Conversation

@PoornimaBaste
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Product image zoom / modal not working in Dawn 15.4.0

1 participant