Modification of before & after image section

Store Design
, , , , , , , , , , , ,

Topic summary

A user is implementing a before/after image section on their Shopify store and needs help with mobile functionality.

Specifically, they want clicking on the “BEFORE” or “AFTER” headings to trigger smooth scrolling to the corresponding images—but only on mobile devices.

They’ve provided:

  • Their store URL with the current implementation
  • A reference store URL demonstrating the desired behavior
  • JavaScript code (though the actual code content wasn’t included in the post)
  • Willingness to share CSS and HTML if needed

The section is located near the bottom of the product page. The discussion remains open with no responses yet, awaiting technical guidance on implementing this mobile-specific smooth scroll feature.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, I added a before and after image section to my store. But I need help with one thing.

I want that when I click on the “BEFORE” or “AFTER” heading on mobile, it smoothly scrolls to the before/after image.

Here’s the JavaScript code I used for that, and if needed, I can also provide the CSS styling and HTML structure.

JavaScript code:

Here’s the link to my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll almost to the bottom, that’s where the section is)

And here’s a store where it works how I want it: https://tomnoske.store/products/cinema-luts
(Just scroll almost to the bottom, that’s where the section is)

I want this fix for the click on the before/after only on mobile!

Thanks a lot,
Tim