Before/after image slider
Last updated
Last updated
The Before/After Image Slider section lets you visually compare two images side by side—perfect for showcasing product effectiveness, transformation results, or progress stories.
Steps:
In the theme editor (Customize), click Add section.
Locate Before/after image slider section
Make necessary changes.
Save.
To achieve the best result, it is recommended to use images of the same size and position, and there are visually distinguished differences between the before and after photos.
Customize the text and alignment to ensure the banner effectively communicates your message and encourages engagement.
Direction: Choose the orientation of the slider:
Horizontal: The images are displayed side by side, with the slider moving left or right.
Vertical: The images are stacked on top of each other, with the slider moving up or down.
Image height: Select how the image height is determined: Adapt to image/ Small/ Medium/ High.
Image heading style: Customize how the heading appears above the images.
Product: Link the slider to a specific product from your store.
There are 3 blocks that can be added to the section:
Before
After
Text
This block enables the core functionality of the slider. Add 2 Image blocks for the Before and After images.
Image
Upload the desired comparison image.
Mobile image
Optional: upload a version optimized for mobile.
Image heading
Add a short label (e.g., Before, After 2 months).
Color scheme
Match the background to your site style.
💡 Tip: Use high-resolution images taken under similar lighting for best results.