Image comparison section
The Image comparison section of Borders shows a before and after image with a slider, horizontal or vertical.
Applies to: Borders 3.1.0 and later. Added in: Borders 2.1.0. Last checked: 2026-10-13 against Borders 3.1.0.
The Image comparison section puts two images on top of each other with a handle between them. Customers drag the handle to reveal more of one or the other, for before and after shots or two versions of a product.
Where to find it: select Add section in the theme editor, then choose Image comparison.
Layout
- Layout sets the direction of the handle: Horizontal (drag left and right) or Vertical (drag up and down).
- Invert layout on mobile devices switches to the other direction on phones (below 768 px), for example horizontal on desktop and vertical on mobile.
- Minimum aspect ratio sets the shape of the comparison on tablets and desktops, from Ultra-Wide (21:9) to Square (1:1). Both images are cropped to it.
- Mobile aspect ratio sets the shape on phones, from Landscape (16:9) to Taller (2:3).
- The handle starts in the middle.
Images and labels
The section holds two Image blocks: the first is the image underneath, the second the one revealed by the handle.
- Image is the picture, cropped to the aspect ratio from its center.
- Mobile image (optional) replaces it on phones.
- Label is a small tag on the image, for example "Before" and "After". Leave it empty for no label.
Colors
- Color style under Inner content design sets the handle and labels: Dark uses the color scheme's text color with background-colored text, Light the other way round.
- Remove border radius and Remove inner padding & border radius change the frame. The other design settings are the shared ones: see General section styling.
Setting up a before and after comparison
Add the section
Select Add section and choose Image comparison. It comes with two Image blocks.
Add the before image
Select the first Image block, upload the "before" picture in Image and type "Before" in Label.
Add the after image
Select the second Image block, upload the "after" picture and type "After" in Label. Use two photos with the same framing so the handle lines them up.
Choose the shape and direction
Set Layout, Minimum aspect ratio and Mobile aspect ratio, and drag the handle in the preview to check.
Why are parts of my images cut off?
Both images are cropped to Minimum aspect ratio (desktop) and Mobile aspect ratio (phones). Choose the ratio closest to your photos, or upload a separate Mobile image (optional) for phones.
Can I add more than two images?
No. The section takes two Image blocks, one for each side of the handle. Add another Image comparison section for a second pair.
All Image comparison settings
Every setting on this page, with its type and default.
Accepts these blocks: Image.
Image comparison section: Section heading
Where to find it: Image comparison → Section heading
Heading (text box, default: "Before & After").
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Hide heading border (checkbox, default: off).
Image comparison section: Layout
Where to find it: Image comparison → Layout
Layout (dropdown, default: Horizontal): Sets the direction of the comparison handle: Horizontal drags left and right, Vertical drags up and down. Options: Horizontal, Vertical.
Invert layout on mobile devices (checkbox, default: off): Switches the handle to the other direction on screens narrower than 768 px.
Minimum aspect ratio (dropdown, default: Ultra-Wide (21:9)): Sets the shape of the comparison on screens 768 px and wider; both images are cropped to it. Options: Ultra-Wide (21:9), Wide (2:1), Landscape (16:9), Standard (3:2), Square (1:1).
Mobile aspect ratio (dropdown, default: Square (1:1)): Sets the shape of the comparison on screens narrower than 768 px; both images are cropped to it. Options: Landscape (16:9), Standard (3:2), Square (1:1), Tall (5:6), Taller (2:3).
Image comparison section: Section design
Where to find it: Image comparison → Section design
Color scheme (color scheme, default: scheme_1).
Hide section bottom border (checkbox, default: off).
Image comparison section: Inner content design
Where to find it: Image comparison → Inner content design
Color style (dropdown, default: Dark): Sets the colors of the handle and labels: Dark uses the color scheme's text color as their background, Light its background color. Options: Dark, Light.
Remove border radius (checkbox, default: off).
Remove inner padding & border radius (checkbox, default: off).
Image block
Where to find it: Image comparison → Add block → Image
Up to 2 Image blocks per section.
Image (image): The picture of this side: the first block is the image underneath, the second the one revealed by the handle.
Mobile image (optional) (image): Replaces this block's image on screens narrower than 768 px.
Image block: Text content
Where to find it: Image comparison → Add block → Image → Text content
Label (text field, default: "Label"): A small tag shown on this image, for example Before or After. Empty shows no label.
Related pages
- General section styling: the heading and design settings this section shares.
- Recommended image sizes: the sizes for each aspect ratio.
- Borders sections: every section you can add.