Before & After Image #1 - #2 - #3 - #4 - #5

by Admin on Sep 24, 2025

Before & After Image is a section that allows users to compare two different images side by side, highlighting their distinct characteristics or differences. It's commonly used to showcase product comparisons or visual transformations.

1. Section Components

Section	Before & After Image	Compare two different images side by side.
Available blocks	Heading	Add a heading area to the section.
Available blocks	Button	Add a button to the section.

2. Location & Setup

To add & set up the Before & After Image section:

Open the Shopify Theme Editor (Online Store > Themes > Customize)
Decide where you want to place the new section in Template.
Click "Add Section".
Select "OT: Before & After Image (#number of variant)".

3. Highlight Features

Interactive comparison: Seamlessly compare two images side by side with a draggable slider, letting customers clearly visualize the transformation or difference.
Flexible layouts: Choose between horizontal or vertical layouts, with 5 ready-made design variations (#1–#5) for different use cases.
Additional content blocks: Enhance the section by adding headings, subheadings, text, or CTA buttons for context and stronger engagement.

4. Common Use Cases

🤔 How to set up Before & after image section?

STEP 1: Add the section

Add Before & after image section to your desired position.

STEP 2: Add Before & after images

Click on Before & after image to set up:

Upload images for before and after comparisons.
Specify heading inside the image, its size, and position (start, middle, end).

STEP 3: Enter section heading

Enter Heading, adjust its size, and assign it a tag.

STEP 4: Click "Save" when done.

🤔 How to adjust Before & after image layout and display?

STEP 1: Open the section

Open Before & after image settings panel

STEP 2: Choose section layout

At Layout, choose between:

Horizontal

Vertical

Choose image height for Desktop and Mobile devices.
(Optional) Enable the corner for Before & after image.

STEP 3: Style the section's elements

Scroll down to Styles settings group, choose colors for heading, background, line and borders...

STEP 4: Style Desktop/Mobile layout

At Desktop layout and Mobile layout settings group:

Adjust Image alignment.
Choose section width, padding, or enable section divider.

STEP 5: Click "Save" when done.

🤔 How to add an additional content block to the section?

If you want to add an extra block displaying content and CTA button, like this:

STEP 1: Add the blocks

Under Before & After image section, add Heading and Button blocks.

STEP 2: Configure the blocks

Block	How to set up?
*Heading*	Add Heading, Subheading and Text content. Adjust the text size. Choose text color.
*Button*	Enter Button label and paste a link to redirect customers. Choose button shape at Button style. Choose button animation when hovered. Choose color for button elements.