1. What is Image comparison: Single/ Grid?
Image comparison lets customers drag a divider across two images to see the difference between them - perfect for before/after results, product upgrades, or photo edits.
It comes in two versions of the same section: Single and Grid. Pick the one closest to the layout you want - you can still add, remove, or rearrange blocks afterwards.
| Image comparison: Single | Image comparison: Grid |
| A heading and one large comparison. Best for a single, eye-catching transformation (e.g. a cleaning result or a photo edit). | A heading and a grid of comparison cards - each with its own heading and text. 3 cards per row on desktop and tablet, 1 per row on mobile. |
2. Section Components
| Section |
Image comparison: Single Image comparison: Grid |
Two ready-made layouts of the same section, for showing one or several before/after image comparisons. | |
|---|---|---|---|
| Available blocks |
1st-level available blocks (Blocks you can add directly inside the section) |
Image comparison | Two images with a draggable divider. Used directly in the Single layout. |
| Item list | Displays several items as a grid or carousel. Used in the Grid layout to hold the comparison cards. | ||
| Group | A container for other blocks - used for the section header (Heading) and for each card in the Grid layout. | ||
|
Sub-level available blocks (Blocks you can add inside the 1st-level blocks above) |
> Before image | Inside an Image comparison block: the image on the first side of the divider, with its own label. | |
| > After image | Inside an Image comparison block: the image on the other side of the divider, with its own label. | ||
| > Image comparison | Inside a Group or Item list: add a comparison to a card, next to a heading and text. | ||
| > Other content blocks | Heading, Text, Button, Icon, and the other Block in Block content blocks - see the Block in Block guide. | ||
3. Location & Setup
To add the Image comparison section:
- Go to "Online Store" > "Themes" > "Customize".
- Select where you want to place it and click "Add section".
- Search for "Image comparison" and choose either Image comparison: Single or Image comparison: Grid - both add the same section, just with a different starting layout.
4. Highlight Features
- Drag the divider horizontally or vertically, with an optional hint animation and reveal-on-hover.
- Separate desktop and mobile images for each side.
- Pull images from product or variant metafields so each product shows its own comparison.
- Optional labels (e.g. "Before" / "After") with custom colors.
- Built on Block in Block - add headings, text, and buttons around each comparison.
5. Common Use Cases
🤔 How to set up the Image comparison: Single layout?
STEP 1: Add the section
At your desired position, click "Add section" and choose Image comparison: Single.
STEP 2: Add the two images
Expand the Image comparison block and click on Before image:
- Keep Image source as Manual, then upload a Desktop image. Add a Mobile image if you want a different one on mobile.
- (Optional) Enter a Label (e.g. "Before"), then choose the Label position: Start, Center, or End.
Repeat the same for After image.
STEP 3: Adjust how the comparison works
Click on the Image comparison block and, in the Display group:
- Drag direction - Horizontal (drag left/right, default) or Vertical (drag up/down).
- Initial drag position - where the divider starts (5-100%, default 50%).
- Image ratio - Landscape (4:3) by default, or follow the shape of the before/after image.
STEP 4: Edit the heading
Expand the Group at the top of the section and edit the Heading text, or delete the group if you don't need a heading.
STEP 5:
Click "Save" when done.
🤔 How to set up the Image comparison: Grid layout?
STEP 1: Add the section
Click "Add section" and choose Image comparison: Grid. It comes with 3 comparison cards inside an Item list.
STEP 2: Fill in each card
Each card is a Group containing an Image comparison, a Heading, and a Text block. For each card:
- Add the images in Before image and After image (same as the Single layout).
- Replace "Aspect" with your own heading and "Explain differences" with a short description.
STEP 3: Add, remove, or arrange cards
- To add a card, duplicate an existing card group inside the Item list.
- To remove one, click on it and select "Remove block"; drag cards to reorder them.
- To change the number of cards per row, click on the Item list and adjust its columns for desktop, tablet, and mobile.
STEP 4:
Click "Save" when done.
🤔 How to show before/after images from product metafields?
Want each product to show its own before/after images automatically? Use metafields instead of uploading images in the editor.
STEP 1: Create the metafields in Shopify admin
Go to Settings > Metafields and metaobjects > Products (or Variants) and add two File (image) definitions - for example custom.before_image and custom.after_image. Then upload the images on each product.
STEP 2: Connect them to the block
In the Before image and After image blocks, set Image source to Metafield and enter the key in Desktop image metafield (and Mobile image metafield if needed), e.g. custom.before_image.
STEP 3:
Click "Save" when done.
⚠️ Note:
- Metafields only work where the block knows which product to use - on the product page, or in a section linked to a product (e.g. Product showcase).
- When a variant has its own image in that metafield, it's used for the selected variant; otherwise the product's metafield is used. If Select the first available variant by default is turned off, only the product's metafield is used.
- Turn on Only show when full of images to hide the block on products that don't have both images.
🤔 How to add an Image comparison to other sections and product pages?
The Image comparison block can also be added outside these two sections:
| Where | How it works |
| Image with text / Video with text, Product three columns, Product showcase, and any Group or Item list | Same block as above - the Before image and After image are separate sub-blocks, and you can set Padding and Color scheme. |
| Product information, Product details, Quick view | All settings sit in one block: choose Image source once for both images, then fill in the Before image and After image setting groups. |
Click "Add block" in the section (or inside a Group) and choose Image comparison - it's in the Media group.
🤔 What other customization options can you give your Image comparison?
| For a single Image comparison block: | |
| ✨ Play a short hint when the block appears | Turn on Show hint when scrolled into view (on by default). It plays once: the divider starts fully open and settles back to the initial position. |
| ✨ Move the divider by hovering | Turn on Reveal on hover (on by default) so the divider follows the mouse on desktop, without dragging. |
| ✨ Hide the block when an image is missing | Turn on Only show when full of images. |
| ✨ Change the image shape | Choose an Image ratio: Adapt to before image, Adapt to after image, Square (1:1), Landscape (4:3), Wide (16:9), Portrait (2:3), or Standard (3:4). |
| ✨ Add space around the block | In Padding, pick Desktop or Mobile in Choose device, then set Top, Bottom, Left, and Right. |
| ✨ Change the color scheme | In Style, choose the Color scheme for light and dark mode. |
| For the Before image / After image blocks: | |
| ✨ Style the label | Once a Label is added, turn on Enable custom style and pick the Label background and Label text colors. |
| For the whole section: | |
| ✨ Change the width, spacing, or add a divider | Click on the section and adjust Section width, Padding (Top/Bottom), Gap, and Show section divider. |
| ✨ Change the color scheme | Click on the section and choose the Color scheme for light and dark mode. |
6. Change Logs
Version 2.2.0 - October 2026
- New – Image comparison: Single & Image comparison: Grid: Two new section layouts, plus an Image comparison block that can also be added to product pages, Quick view, Image with text / Video with text, Product three columns, Product showcase, and any Group.
7. Support Information
Need help? Contact our support team at Omni Themes Support
