Image comparison section
The Image comparison section shows two images with a slider that customers drag to compare them, such as before and after, in Kingdom.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 5.1.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
The Image comparison section shows two images on top of each other with a handle that customers drag to reveal one or the other, for example a before and an after photo. Kingdom 5.1.0 added it as the "Before / After slider".
Where to find it: select Add section in the theme editor, then choose Image comparison (Add section category Storytelling).
The two images
The section holds exactly two Image blocks. The first is the image underneath, the second is the one the handle uncovers. The handle starts in the middle.
- Image sets the photo. Use two images with the same size and framing, so the comparison lines up.
- Mobile image replaces Image on screens 768 px wide or less. Set it on both blocks, or on neither.
- Label shows a short text on the image, such as "Before" and "After". Leave it empty to hide the label.
Layout and height
- Layout sets the direction: Horizontal moves the handle left and right, Vertical moves it up and down.
- Invert layout on mobile devices switches to the other direction on screens 768 px wide or less, for example Horizontal on desktop and Vertical on phones.
- Desktop height and Mobile height set the section height: Small is half the screen height, Medium 65 percent and Large 80 percent. The images are cropped to fill it.
- Color style sets the handle and the labels: Dark uses the body text color as background, Light the body background color.
- Enable inner content spacing (default off) adds side padding, see General section settings.
Why can I add only two images?
Because a comparison has two sides. The section accepts two Image blocks and hides Add block after the second. To compare more pairs, add another Image comparison section.
Why is part of my image cut off?
Because the section has a fixed height and the images fill it. A wide image in a Small section loses its top and bottom. Choose a larger Desktop height, or upload images closer to the shape of the section, and keep the important part in the middle.
All Image comparison settings
Every setting in this group, with its type and default.
Accepts these blocks: Image.
Layout (dropdown, default: Horizontal): Sets the direction of the handle: Horizontal drags left and right, Vertical drags up and down. Options: Horizontal, Vertical.
Invert layout on mobile devices (checkbox, default: off): Uses the other direction on screens 768 px wide or less.
Desktop height (dropdown, default: Medium): Sets the section height on screens wider than 768 px: Small 50, Medium 65, Large 80 percent of the screen height. The images are cropped to fill it. Options: Small, Medium, Large.
Mobile height (dropdown, default: Medium): Sets the section height on screens 768 px wide or less: Small 50, Medium 65, Large 80 percent of the screen height. Options: Small, Medium, Large.
Image comparison section: Colors
Where to find it: Image comparison → Colors
Color style (dropdown, default: Dark): Sets the colors of the handle and the labels: Dark uses the body text color as background, Light the body background color. Options: Dark, Light.
Image comparison section: Gutter
Where to find it: Image comparison → Gutter
Enable inner content spacing (checkbox): Adds the side padding and the space below the section from Theme settings → Layout. Off, the section runs edge to edge.
Image block
Where to find it: Image comparison → Add block → Image
Up to 2 Image blocks per section.
Image (image).
Mobile image (image): Replaces Image on screens 768 px wide or less.
Image block: Text content
Where to find it: Image comparison → Add block → Image → Text content
Label (text field, default: "Label"): Shows a short text over the image, such as Before or After. Leave it empty to hide it.
Related pages
- Image section: one image at its own proportions.
- Image with hotspots section: points on an image that show products.
- Recommended image sizes: sizes and cropping for full-width images.
- General section settings: inner content spacing.