Before and after

Notification Pop-up
Announcement Bar
Background video
Before and after
Benefits product
Benefits video reels
Brands
Collage
Collection feature
Collection list
Feature collection
Featured navigation
Features banner
Grid view
Header
Image banner
Image with text
Image with video
Image with video (Home)
Logo banner
Lookbook
Map section
Multicolumn
Newsletter with image
Parallax section
Products slider
Rich text with image
Scrolling text banner
Shoppable image
Shoppable video
Shoppable video reels
Slideshow
Testimonial video reels

What is the Before and after section?

The Before and After section is a powerful way to showcase transformations and product effectiveness. This section consists of two parts: a content area where you can add customizable blocks such as a subheading, heading, text, and buttons, and an interactive slider that lets customers compare two images side by side.

Ideal for beauty products, home improvements, or service results, this section visually highlights the impact of your offerings, helping to build trust and engagement with potential buyers.

Main settings

General

  • Heading: Add a title to introduce the transformation or product impact.
  • Desktop layout: Choose to display the image first or text first for desktop users.

Images

  • Before image: Upload an image representing the "before" state.
  • After image: Upload an image representing the "after" state.
  • Desktop percentage image width: Adjust how much space the image takes on desktop.
  • Make section full width: Enable to expand the section across the entire screen.

Section Height

  • Adapt to image: The section height automatically adjusts based on the image size.
  • Fixed height: Set a specific height in pixels for consistency across all images.
  • Desktop fixed height: Define a fixed height for desktop screens.
  • Mobile fixed height: Define a fixed height for mobile screens.

Badges

  • Enable ‘Before/After’ badges: Display labels to clarify which image is "Before" and which is "After."
  • Before badge text: Customize the label for the "Before" image.
  • After badge text: Customize the label for the "After" image.

Colors

  • Heading color: Set the color of the section title.
  • Section background color: Customize the background of the entire section.
  • Background opacity: Adjust the transparency of the section’s background.
  • Text color: Change the text color for readability.
  • Text container color: Customize the background of the text container.

Alignment & Spacing

  • Large screen text alignment: Adjust text position on desktop (Top, Center, Bottom).
  • Horizontal alignment: Align text on desktop (Left, Center, Right).
  • Mobile screen text alignment: Adjust text alignment for mobile screens (Left, Center, Right).
  • Distance from the top/bottom: Control spacing between the section and surrounding elements.

Customize subheading block

Click one of the preloaded subheading block to customize it.

‍

Customize heading block

Click one of the preloaded heading block to customize it.

Customize text block

Click one of the preloaded text block to customize it.

Customize button block

Click one of the preloaded button block to customize it.

‍

Mobile view example

Back