Image comparison section
The Image comparison section of Combine shows a before and after image with a slider that customers drag to compare them.
Applies to: Combine 4.2.0 and later. Added in: Combine 2.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Image comparison section shows two images on top of each other with a handle that customers drag to compare them: before and after, with and without, old and new.
Where to find it: in the theme editor, select Add section and choose Image comparison. The section starts with two Image blocks.
Layout
- Layout sets the direction of the handle: Horizontal (the default, drag left and right) or Vertical (drag up and down).
- Invert layout on mobile devices switches to the other direction on mobile, for example Vertical on phones when the desktop is Horizontal.
- Desktop height and Mobile height set how tall the comparison is, as a share of the screen height: Small (50 percent), Medium (65 percent, the default) or Large (80 percent).
- The images fill that height and are cropped at the edges. Set a focal point on each image to keep the important part visible.
Colors
Color style sets the look of the handle and the labels: Dark (the default, dark labels with light text) or Light (light labels with dark text). Choose the one that stands out on your images.
Custom card design
Border radius rounds the corners of the images, 0 to 30 px. The section heading, Decrease top margin and Heading tag work as described in General section styling.
Blocks
The section takes up to two Image blocks. The first is the image underneath; the second lies on top, and the handle slides it open.
Image
- Image is the picture. Use two images of the same size and framing, or the comparison looks shifted.
- Mobile image (optional) replaces it on screens narrower than 768 px.
- Label under Text content is the tag on the image, for example "Before" and "After". Leave it empty for no tag.
Why do my two images not line up?
Because they have different sizes or framing. Both images fill the same area and are cropped from the center, or from their focal point. Export both from the same photo size, with the subject in the same place.
Can I compare more than two images?
No. The section takes two Image blocks. For more comparisons, add another Image comparison section.
All Image comparison settings
Every setting of this section, with its type and default.
Accepts these blocks: Image.
Image comparison section: Section heading
Where to find it: Image comparison → Section heading
The Image comparison section uses the standard Section heading settings, listed in General section styling.
Heading (text field, default: "Before & After"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (formatted text, default: "Compare your best offers").
Heading size (dropdown, default: Regular). Options: Regular, Large.
Text alignment (dropdown, default: One row: Left). Options: One row: Left, Two rows: Left, Two rows: Center.
Button label (text field): Adds a button to the heading area on desktop; below 768 px it shows under the section as a full-width button.
Button link (link). Shown only when Button label is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Before & After"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (formatted text, default: "Compare your best offers").
Image comparison section: Layout
Where to find it: Image comparison → Layout
Layout (dropdown, default: Horizontal): Sets the direction of the handle: Horizontal drags left and right, Vertical up and down. Options: Horizontal, Vertical.
Invert layout on mobile devices (checkbox, default: off): Switches to the other direction on screens narrower than 768 px.
Desktop height (dropdown, default: Medium): Sets the height on screens 768 px and wider, as a share of the screen height: Small 50 percent, Medium 65, Large 80. Options: Small, Medium, Large.
Mobile height (dropdown, default: Medium): Sets the height on screens narrower than 768 px: Small 50 percent of the screen height, Medium 65, Large 80. Options: Small, Medium, Large.
Image comparison section: Colors
Where to find it: Image comparison → Colors
Color style (dropdown, default: Dark): Sets the handle and labels: Dark labels with light text, or Light labels with dark text. Options: Dark, Light.
Image comparison section: Custom card design
Where to find it: Image comparison → Custom card design
Border radius (slider 0 to 30 px, default: 0 px): Rounds the corners of the images.
Image comparison section: Gutter
Where to find it: Image comparison → Gutter
The Image comparison section uses the standard Gutter settings, listed in General section styling. Not available in this section: Remove bottom margin.
Decrease top margin (checkbox, default: off): Makes the space above the section smaller.
Image comparison section: SEO
Where to find it: Image comparison → SEO
The Image comparison section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Sets the HTML level of the section heading for search engines; span gives it no level. It does not change the size. Options: H1, H2, H3, H4, span.
Image block
Where to find it: Image comparison → Add block → Image
Up to 2 Image blocks per section.
Image (image): Sets the image. The first Image block is underneath, the second lies on top and the handle slides it open.
Mobile image (optional) (image): Replaces the 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"): Sets the tag shown on the image, for example Before or After.
Related pages
- Image section: one large image.
- Image with hotspots section: an image with product points on it.
- General section styling: the standard section settings.