Taiga
documentation

Before/After image slider

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.


Edit 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.