The Before/After image slider helps you engage customers with clear, impactful comparisons that highlight transformations at a glance. Whether you want to showcase product effectiveness, design improvements, or creative makeovers, this interactive slider invites visitors to explore changes in a memorable and visually striking way.
How to add the Before/after image slider
-
Open your Shopify Admin and go to Online Store > Themes. Click "Edit theme" next to your Taiga theme.
-
Navigate to the page where you want the slider (e.g., Home page or a Product page).
-
Click Add section and search for "Before/after image slider".
Upload and Configure Your Images
The slider relies on a specific "block" to hold your media.
-
Under the new section, look for the Before/after images block.
-
Select Images: Upload your "Before" image and "After" image into their respective slots.
-
Set Aspect Ratio: Use the dropdown to select your preferred ratio (e.g., Landscape 4:3, Square 1:1, etc.). This ensures the container stays consistent.
-
Add Labels: Enter text like "Before" and "After" in the label fields. You can also choose the Label position (Top, Center, or Bottom) and Label color to ensure they don't block key parts of your image and can be clearly seen.
Refine the Layout
Once your images are in place, you can adjust how the section sits on the page.
-
Click on the main Before/after image slider section header.
-
Desktop Layout: Choose the Media position (left, right, top or bottom) and set the Media width. Adjust Text content width and Text alignment as needed.
-
Mobile Layout: Adjust the alignment for smaller screens. Since the slider is a "touch" element, ensure there is enough Margin above and below the section so users don't accidentally click other links while sliding.
-
Text & Buttons: You can add Heading, Subheading, and Button blocks within this section to provide context or a direct "Shop Now" link.
Section settings
Color Scheme
Pick a color palette that matches your store’s style so this section blends seamlessly with the rest of your site.
Desktop Media Position
Choose where the slider sits in relation to your text — left, right, above, or below — depending on where you want to guide attention.
Desktop Media Width
Decide how bold the slider looks: Full for maximum impact, Wide for balance, or Narrow for a lighter touch.
Text Content Width
Set your text area to Wide, Default, or Narrow to fit your storytelling style.
Text Alignment
Align text left, center, or right to suit your layout and brand voice.
Full Width Buttons
Make buttons stretch across the section for clear CTAs, or keep them aligned with the text for a subtle look.
Desktop & Mobile Margins
Adjust top and bottom spacing to give your section the right breathing room on every device.
Mobile Media Position
Show the slider before or after the text on mobile — a small choice that can make a big impact on how customers scroll.
Customize with blocks
Before/After images
Image Aspect Ratio
Choose the aspect ratio that best fits your content. For the smoothest comparison, use two images with the same ratio.
Before Image & After Image
Upload the two images you want to compare. Make sure they show the transformation clearly to create the biggest impact.
Label Options
-
Label Colors – Pick a color that keeps the text readable against your images.
-
Before Label / After Label – Add short, clear labels (like Before and After) to guide customers. If you prefer a clean look, leave these blank.
-
Label Position – Place the labels at the Top, Center, or Bottom of the slider, depending on where they work best with your images.
Heading block settings
Heading
Add a headline that introduces your comparison — for example, “From fruit to fresh glow”. Keep it short and impactful to draw attention.
HTML Tag
Choose the heading level (H2, H3, etc.). Use this to keep your page’s structure clear for both customers and SEO.
Desktop & Mobile Size Modifier
Adjust the text size to make your heading stand out more or fit better with surrounding content.
Margins
Fine-tune the spacing above the heading separately for desktop and mobile. This helps you keep consistent balance between the heading and other elements.
Text block settings
Text
Write supporting copy that explains the transformation or adds context to your images. Keep it clear and benefit-driven to connect with customers.
Desktop & Mobile Size Modifier
Adjust the text size to make your message more prominent or subtle depending on the layout.
Margins
Control the top spacing for desktop and mobile separately to keep your text balanced with surrounding content.
Button block settings
Button Label
Write a clear call-to-action (e.g. Shop now, Learn more). Keep it short and action-focused.
Button Link
Choose the page or product where the button should lead your customers.
Button Style
Pick a style (Primary, Secondary, etc.) that matches your store’s design and makes the button stand out with the right level of emphasis.
Desktop & Mobile Size Modifier
Adjust the button size so it feels balanced within the section.
Margins
Control the top spacing for desktop and mobile to keep the button visually aligned with the surrounding content.