In e-commerce, proof is everything. Whether you are selling skincare that transforms a complexion, a cleaning product that tackles tough stains, or home decor that revamps a room, customers want to see the results for themselves.
A before-after image slider is one of the most effective ways to build trust. It’s interactive, engaging, and provides immediate visual evidence of your product's value. In this guide, we’ll show you how to set up this feature using the built-in sections in the Taiga theme (specifically the Hehku preset), allowing you to skip the monthly app fees and keep your site running fast.
Before You Start: Image Selection is Key
For the slider to feel "credible" and smooth, your two images need to match as closely as possible.
- Consistency: Use the same camera angle, lighting, and framing for both shots.
- Aspect Ratio:Ensure both images have the same dimensions. If the "before" is a square and the "after" is a landscape, the slider will feel jumpy.
- Subject Positioning: The subject should be in the exact same spot in both frames so only the change is visible when the user slides the handle.
How to add the Before/after image slider
Adding a before/after slider is a simple way to visually showcase transformations, product benefits, or results.
-
Add the section
Open the Theme Editor, navigate to your desired page, and add the Before/after image slider section. -
Upload your images
Add your “Before” and “After” images inside the Before/after images -block. Choose an aspect ratio to keep the layout consistent, and optionally add labels to highlight the comparison. -
Adjust the layout
Fine-tune how the slider appears on desktop and mobile. You can control image positioning, widths, and spacing to ensure a smooth user experience, especially on touch devices. -
Add supporting content
Enhance the section with headings, text, or a call-to-action button to guide customers toward the next step.
For detailed setup instructions and all available settings, see the full documentation.
Why Use a Built-In Before After Image Slider?
Most merchants turn to the Shopify App Store for this feature. However, using the native section in Taiga offers two major benefits
- Site Speed: Because apps load files from outside the theme's ecosystem, they can create unnecessary weight that isn't as optimal for performance as using the theme's native sections. Taiga’s slider is optimized for the theme's core code, keeping your "Time to Interactive" low.
-
Design Harmony: The fonts, colors, and button styles of the slider automatically match your theme's global settings, creating a cohesive look without extra CSS work.
See the Before/After slider in action on the Hehku preset demo.