before and after slide

Shopify Discussion
,

Topic summary

A Shopify store owner is seeking code to create a before-and-after image slider with additional functionality. They want to display comparison images surrounded by four icons representing benefit points.

Request Details:

  • Before/after slider component
  • Four benefit icons positioned around the images
  • Provided five reference images showing the desired layout and design

Solution Provided:
Another user shared sample HTML/CSS code demonstrating:

  • A container structure for the before/after slider
  • Image placement for comparison views
  • Four benefit points with emoji icons (checkmarks and sparkles)
  • Basic styling framework to implement the feature

The code example shows how to structure the section as a new component, though implementation details and full styling may require additional customization for the specific Shopify theme.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Does anyone know the code to make a before after slide with the following information, i want the image surrounded by four icons with benefit points. Below is all the info. I am looking to add to the before and after slider

001img.png
001img.png584×1256 46.6 KB

002img.png
002img.png600×1162 208 KB

003img.png
003img.png580×1234 67.1 KB

004img.png
004img.png580×1162 86.2 KB

005img.png
005img.png572×356 10.1 KB

2

Hi,

Hope this will help

  • Need to add new section
    code example

  

    

      
![001img.png|584x1256](upload://nIKxodojrCa2Y3aLN95jISV2OKw.png)

      
![004img.png|580x1162](upload://xwwt0R2KV5oaBPnoJ8RHbJMRbms.png)

      
    

    
     Benefit 1

     Benefit 2

     Benefit 3

    ️ Benefit 4