Shine Comparison Image
Theme: Shine · Section type: All-template section
A Comparison image section places two images on top of each other with a slider handle between them. Customers drag the handle to compare the images, for example a before-and-after result of your product.
Note: You can add this section to any template, except the header and footer.
What you can do
- Add the section and your two images
- Set separate images for mobile
- See what customers see
- Change the heading, labels, and layout
- Fix common problems
Add the section and your two images
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Comparison image.
- Under First image, select an Image. This image shows on the left side of the handle.
- Under First image, enter the label Text, for example "Before".
- Under Second image, select a Background image. This image shows on the right side of the handle.
- Under Second image, enter the label Text, for example "After".
- Optional: under General, enter a Section subheading, a Section heading, and a Section description.
- Click Save.
Tip: Use two images with the same size and framing, taken from the same angle. The comparison works best when only the result changes between the two images.
Set separate images for mobile
- Under First image, select a Mobile image.
- Under Second image, select a Mobile image.
- Switch to the mobile preview and check that both images line up.
- Click Save.
Setting | What it does |
|---|---|
Mobile image | Replaces the image on phones. If you don't add one, phones show the main image. |
Tip: Add mobile images to both First image and Second image, or to neither. If only one side has a mobile image, the two images can have different shapes on phones.
What customers see
- Images: the first image shows on the left of the handle and the second image on the right. The labels sit in the bottom corners: the first label bottom left, the second label bottom right.
- Opening effect: when the section scrolls into view, the handle moves to the middle of the image.
- Dragging: customers drag the round handle left or right with the mouse or a finger to reveal more of either image.
- Shape: on large screens, the section takes the shape of the first image. On tablets and phones, it takes the shape of the first image's mobile image, if you add one. The mobile images themselves show only on phones.
- Layout: on large screens, the heading can sit above the images or beside them. On mobile, the heading always sits above or below the images.
Settings reference
General
Setting | What it does |
|---|---|
Color schemes | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |
Section subheading | Adds a short line of text above the heading. |
Section heading | Adds a heading. To highlight part of the heading, put it between [ and ]. You choose the highlight style in Theme settings > Typography. |
Heading size | Sets the heading size: H2, H3, H4, or H5. |
Section description | Adds text below the heading. |
First image
Setting | What it does |
|---|---|
Image | Sets the image on the left of the handle. It also sets the shape of the section. The editor recommends a 2000 x 1200 px .jpg. |
Mobile image | Replaces the first image on phones. The editor recommends a 1200 x 1200 px .jpg. See "Set separate images for mobile" above. |
Text | Sets the label in the bottom-left corner, for example "Before". If you leave it empty, the label is hidden. |
Second image
Setting | What it does |
|---|---|
Background image | Sets the image on the right of the handle. It uses the same dimensions as the first image. |
Mobile image | Replaces the second image on phones. It uses the same dimensions as the first image's mobile image. |
Text | Sets the label in the bottom-right corner, for example "After". If you leave it empty, the label is hidden. |
Large screen
Setting | What it does |
|---|---|
Section heading position | Places the heading at Top left or Top center above the images, or Inline beside them. With Inline, the images take two thirds of the width and the text takes one third. |
Section ordering | Shows the heading before the images (Text first) or after them (Slide first). |
Mobile screen
Setting | What it does |
|---|---|
Section heading position | Places the heading at Top left or Top center. |
Section ordering | Shows the heading before the images (Text first) or after them (Slide first). |
Troubleshooting
The two images don't line up.
The second image is cropped to the shape of the first image. Use two images with the same size and framing. If you use mobile images, add them to both First image and Second image.
The mobile image doesn't show on my tablet.
Mobile images show only on phone-sized screens. Tablets and larger screens show the main images.
The heading is above the images, but I chose Inline.
Inline applies only to large screens. On mobile, the heading uses the Mobile screen settings.
The images fill the whole width and there's no text column.
If the subheading, heading, and description are all empty, the images take the full width, even with Inline.
Related articles
- Shine Image Banner
- Shine Media With Text
- Shine Text Hotspot
- Shine Gallery Shoppable
- Shine Theme Settings
In other themes: Normcore Before/After Section
Updated on: 22/10/2026
Thank you!