The Image Comparison section lets you display two images in the same area and allow customers to drag a handle to compare them. This section is useful for before/after images, product transformations, material comparisons, feature comparisons, or visual results.
In Concept, the section uses two Image blocks:
- The first image block is used as the Before image.
- The second image block is used as the After image.
How to Set Up the Image Comparison Section in Concept
Steps:
Add the Image Comparison section
From your Shopify admin, open Online Store > Themes.
Click Customize on your Concept theme.
Open the page template where you want to show the image comparison.
Click Add section.
Select Image comparison.
After adding the section, you can configure the section layout, heading, images, colors, and spacing.
Add the before and after images
Open the Image comparison section in the theme editor.
Add or open the first Image block.
Use the Image setting to select the image that should appear as the before image.
Open the second Image block.
Use the Image setting to select the image that should appear as the after image.
The draggable comparison handle will appear when both image blocks are available.
Configure the comparison layout
Use the Layout setting to control how customers compare the images.
| Layout | Behavior |
|---|---|
| Horizontal | Customers drag the handle from left to right. |
| Vertical | Customers drag the handle from top to bottom. |
Use Horizontal for most before/after comparisons.
Use Vertical when the image difference is easier to compare from top to bottom.
Adjust the image height
The section includes separate height settings for desktop and mobile.
| Setting | Purpose |
|---|---|
| Image height | Controls the image comparison height on desktop. |
| Image height on mobile | Controls the image comparison height on mobile devices. |
You can choose a fixed height, use full screen height, or use Adapt.
When Adapt is selected, the section height follows the image ratio. Concept uses the first available image to calculate the ratio.
For the best result, use before and after images with the same dimensions or the same aspect ratio.
Add mobile images
Each image block includes an optional Mobile image setting.
Use this setting when the desktop image does not crop well on mobile.
If a mobile image is selected, Concept will show the mobile image on smaller screens.
If no mobile image is selected, Concept will use the desktop image on all devices.
Add text labels to each image
Each image block can display text over the image.
| Block setting | Purpose |
|---|---|
| Subheading | Adds smaller text above the heading. |
| Heading | Adds the main label text. |
| Content position | Controls where the text appears inside the image. |
| Text color | Controls the text color for that image block. |
This is useful when you want to label each side, such as Before and After.
If you leave both the subheading and heading empty, no text label will show on that image.
Configure the section heading
The section heading appears above the image comparison area.
You can configure:
- Heading
- Heading size
- Heading alignment
- Heading tag
- Subheading
- Description
- Button label
- Button link
- Highlighted text style
If you do not need a heading, leave the heading fields empty.
Configure colors and section layout
Use the color settings to adjust the section appearance.
You can configure:
- Text color
- Background color
- Background gradient
- Highlight color
- Highlight gradient
- Button text color
- Button background color
- Button gradient
Use the section layout settings to adjust spacing and shape.
| Setting | Purpose |
|---|---|
| Padding top | Adds space above the section. |
| Padding bottom | Adds space below the section. |
| Show divider | Adds a divider line above the section. |
| Make section full width | Allows the image comparison to use the full browser width. |
| Make section rounded | Applies rounded styling to the section. |
Notes and limitations
- The section requires two image blocks to show the draggable comparison handle.
- The first block is used as the before image.
- The second block is used as the after image.
- The section supports a maximum of two image blocks.
- Before and after images should use the same aspect ratio for the cleanest result.
- Mobile images are optional but recommended when desktop images do not display well on mobile.
- The comparison handle is draggable by mouse or touch.
- If the customer has reduced motion enabled, the initial reveal animation may be reduced.
Troubleshooting
If the comparison handle does not appear, make sure both image blocks are added.
If the images do not align correctly, use images with the same dimensions or aspect ratio.
If the section looks too tall or too short, adjust Image height and Image height on mobile.
If the mobile layout does not look good, add separate mobile images in each Image block.
If text is hard to read, change the Text color in each image block or use a simpler image background.
If the section is not full width, enable Make section full width.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Collage Section in Concept
How to Set Up the Mobile Dock in Concept