The Before/after image section allows you to compare two images interactively using a draggable slider. Customers can drag the comparison handle to reveal more or less of each image, making it useful for showing product results, transformations, improvements, or visual differences.
You can display the comparison horizontally or vertically and add captions to clearly identify each image.
Click the section name to see section settings on the right-hand sidebar.
The Direction setting controls how the two images are compared.
Horizontal: The comparison slider moves horizontally to reveal the images from left to right.
Vertical: The comparison slider moves vertically to reveal the images from top to bottom.
The Drag cursor settings control the appearance and initial position of the comparison handle.
Background & line: Select the color of the slider handle background and dividing line.
Icon: Select the color of the icon displayed inside the drag handle.
Start position: Set the initial position of the comparison slider. For example, setting it to 50% displays an equal portion of both images when the page first loads.
Text: Select the color used for the captions displayed over the Before and After images.
The caption content itself is configured individually within each Image block.
Reveal on scroll: Enable animation when the section becomes visible while scrolling.
Color scheme: Select the color style applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Use these settings to adjust the spacing around the section and maintain a balanced layout across different screen sizes.
Available options:
Top padding
Bottom padding
Mobile top padding
Mobile bottom padding
The Section header container allows you to add introductory content above the Before/After comparison images.
The Section header container includes settings for controlling the content layout.
Text alignment: Choose the alignment of the section header content: left, center, or right.
Custom width: Enable this option to customize the width of the Section header content area.
Click Add block inside the Section header container to add content.
The available child blocks include:
Heading
Text
Child blocks can be reordered by dragging and dropping them in the Theme Editor.
Note: Child blocks must be added under the Section header container.
The Before/after image section uses two Image blocks to create the comparison.
Each Image block includes the following settings:
Image: Upload the image used for one side of the comparison. For the best comparison result, use two images with similar dimensions and aspect ratios.
Mobile image: Upload a separate image optimized for mobile devices. If no mobile image is selected, the desktop image will be used automatically.
Caption: Enter the text displayed over the image, such as: before, after.