How to switch an image with a before/after comparison slider?

Store Design

Topic summary

A user wants to implement a before/after image comparison slider on their Shopify store, replacing an existing image. They’re looking for a slider where users can drag back and forth to compare two images.

Current Status:

  • The user clarified they want an interactive comparison slider (not just a carousel), referencing a CSS/JS tutorial from Level Up Coding
  • One respondent suggested modifying a Flickity slider solution via CodePen, noting the theme already supports this library
  • Another user provided a YouTube tutorial link as a potential solution

Challenge:
The original poster is relatively new to coding and unsure how to integrate the tutorial code into their Shopify theme, leaving the implementation question unresolved.

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

How can I replace the image here with a Before / After image comparison slider?

houssamalissa_0-1628775767573.png
houssamalissa_0-1628775767573.png1379Ă—684 109 KB

1 Like
2

@houssamalissa

i have check your theme support flickity-slider so if have able to code try and modification or let me know DM

https://codepen.io/desandro/pen/GgQREP

1 Like
3

Hey there,

So maybe I used the wrong terminology, going for something like this How to create a “Before & After” image slider with CSS and JS | by JW | Level Up Coding (gitconnected.com)

Where you have a before / after image that you can slide back and forth on. There’s a how-to guide here but I’m quite new to coding so not sure how you integrate that into the Shopify code…

4

Here is the solution for before after slider: