Image comparison section
The Image comparison section shows a before and after slider of two images in Highlight, horizontal or vertical.
Applies to: Highlight 4.1.0 and later. Added in: Highlight 3.1.0. Last checked: 2026-10-13 against Highlight 4.1.0.
The Image comparison section shows two images on top of each other with a handle between them. Customers drag the handle to compare them, for example before and after, or two colors of a product. Added in Highlight 3.1.0 as "Before / after slider".
Where to find it: Online Store → Themes → Customize → Add section → Image comparison (Storytelling category).
- Heading shows a small title above the images. Default: "Before & After".
- Heading tag sets the HTML level of the heading for search engines.
Layout
- Layout sets the direction: Horizontal (the default) puts the images side by side with a handle that moves left and right; Vertical puts them one above the other with a handle that moves up and down.
- Invert layout on mobile devices switches to the other direction on screens up to 835 px wide, for example Horizontal on desktop and Vertical on phones.
- Desktop height sets the section height on desktop: Small (50 % of the window height), Medium (65 %, the default) or Large (80 %).
- Mobile height does the same on screens up to 835 px wide.
The images fill the section and are cropped from the center to its shape.
Colors
Color style sets the colors of the handle and the labels: Dark (the default) uses the store text color, Light uses the store background color. Choose the one that stands out on your images.
Blocks
Image
The section holds exactly two Image blocks; it starts with them, labeled Before and After. The first block is the image on the left (Horizontal) or at the top (Vertical); the second is the image on the right or at the bottom, revealed as the handle moves.
- Image picks the picture.
- Mobile image (optional) replaces it on screens up to 835 px wide.
- Label shows a small label on the image, such as "Before". Leave it empty for no label.
Why do my two images not line up?
They have different proportions or framing. Both images fill the same area and are cropped from the center, so crop them to the same size and position before you upload them. Use the mobile images for a different crop on phones.
All Image comparison settings
Every setting, with its type and default.
Accepts these blocks: Image.
Image comparison section: Heading
Where to find it: Image comparison → Heading
Heading (text field, default: "Before & After").
Image comparison section: Layout
Where to find it: Image comparison → Layout
Layout (dropdown, default: Horizontal): Sets the direction of the comparison: Horizontal moves the handle left and right, Vertical moves it up and down. Options: Horizontal, Vertical.
Invert layout on mobile devices (checkbox, default: off): Switches to the other layout on screens up to 835 px wide.
Desktop height (dropdown, default: Medium): Sets the section height on desktop: Small 50, Medium 65 or Large 80 percent of the window height. Options: Small, Medium, Large.
Mobile height (dropdown, default: Medium): Sets the section height on screens up to 835 px wide: Small 50, Medium 65 or Large 80 percent of the window height. Options: Small, Medium, Large.
Image comparison section: Colors
Where to find it: Image comparison → Colors
Color style (dropdown, default: Dark): Sets the color of the handle and labels: Dark uses the store text color, Light the store background color. Options: Dark, Light.
Image comparison section: SEO
Where to find it: Image comparison → SEO
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. 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 picture. The first block is the left (or top) image, the second the right (or bottom) one. It is cropped from the center to fill the section.
Mobile image (optional) (image): Replaces the image on screens up to 835 px wide.
Image block: Text content
Where to find it: Image comparison → Add block → Image → Text content
Label (text field, default: "Label"): Sets the small label shown on the image, such as Before or After.
Related pages
- Image with hotspots section: an image with product tooltips.
- Images with text overlay section: images with text on top.
- Sections: every section you can add.