Image comparison section
The Image comparison section shows two images with a slider that customers drag to compare them in Split, horizontal or vertical, with labels.
Applies to: Split 5.1.0 and later. Added in: Split 4.1.0. Last checked: 2026-10-13 against Split 5.1.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. Use it for before and after photos, two colors of a product or a product in use.
Where to find it: select Add section in the theme editor, then choose Image comparison.
Adding the two images
The section takes up to 2 Image blocks, and needs both to compare. A new section starts with two, labelled "Before" and "After".
- Image sets the picture. Both images are cropped to the same box, so use two photos of the same shape and framing.
- Mobile image replaces the image on screens 768 px wide and narrower. Set it on both blocks, so the two mobile images match.
- Label shows a small tag on the image, for example "Before". Leave it empty for no tag.
The first block is shown on the left (or on top), the second on the right (or at the bottom). Drag the blocks in the theme editor sidebar to swap them. The handle starts in the middle.
Layout and height
- Layout: Horizontal (default) puts a vertical line between the images that customers drag left and right. Vertical puts a horizontal line that they drag up and down.
- Invert layout on mobile devices switches to the other layout on phones and on tablets held upright, for example horizontal on desktop and vertical on phones.
- Desktop height sets the section height on screens wider than 768 px: Small is half the screen height, Medium (default) 65 percent, Large 80 percent.
- Mobile height does the same on screens 768 px wide and narrower.
Color style
Color style sets the colors of the line, the handle and the labels:
- Dark (default): the body text color, with labels in the background color.
- Light: the body background color, with labels in the text color.
Pick the one that stands out against your images. The colors come from Colors theme settings.
Can I compare more than two images?
No. Split does not support more than 2 images in one Image comparison section. Add another Image comparison section for the next pair.
Why do my two images not line up?
Because they have different shapes or framing. Each image is cropped to fill the whole section, around its center or the focal point you set in Shopify. Crop both photos to the same size and position before you upload them.
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 comparison: Horizontal puts a handle that customers drag left and right, Vertical one they drag up and down. Options: Horizontal, Vertical.
Invert layout on mobile devices (checkbox, default: off): Switches to the other layout on phones and on tablets held upright.
Desktop height (dropdown, default: Medium): Sets the section height on screens wider than 768 px: Small is 50 percent of the screen height, Medium 65 percent, Large 80 percent. Options: Small, Medium, Large.
Mobile height (dropdown, default: Medium): Sets the section height on screens 768 px wide and narrower: Small is 50 percent of the screen height, Medium 65 percent, Large 80 percent. 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 line, the handle and the labels: Dark uses the body text color, Light the body background color. Options: Dark, Light.
Image block
Where to find it: Image comparison → Add block → Image
Up to 2 Image blocks per section.
Image (image).
Mobile image (image).
Image block: Text content
Where to find it: Image comparison → Add block → Image → Text content
Label (text field, default: "Label").
Related pages
- Image with hotspots section: an image with clickable dots for products.
- Gallery section: several images side by side.
- Image size recommendations: image sizes for Split sections.
Image
The Image section shows one image across the full width of a Split page without cropping: the section takes the height of the image.
Image with hotspots
The Image with hotspots section places clickable dots on an image in Split that show a product or a text tooltip, with separate mobile positions.