> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

![Comparison image section with Before and After labels and the slider handle](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/comparison-1_gjnwz5.jpg)

**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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Comparison image**.
3. Under **First image**, select an **Image**. This image shows on the left side of the handle.
4. Under **First image**, enter the label **Text**, for example "Before".
5. Under **Second image**, select a **Background image**. This image shows on the right side of the handle.
6. Under **Second image**, enter the label **Text**, for example "After".
7. Optional: under **General**, enter a **Section subheading**, a **Section heading**, and a **Section description**.
8. 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
1. Under **First image**, select a **Mobile image**.
2. Under **Second image**, select a **Mobile image**.
3. Switch to the mobile preview and check that both images line up.
4. 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.
![Handle dragged to the left to reveal more of the second image](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/comparison-2_ney7ce.jpg)


## 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](https://doc.ecomx.co/en/article/shine-image-banner-12txcz9/)
- [Shine Media With Text](https://doc.ecomx.co/en/article/shine-media-with-text-column-hds0dn/)
- [Shine Text Hotspot](https://doc.ecomx.co/en/article/shine-text-hotspot-1uekzj0/)
- [Shine Gallery Shoppable](https://doc.ecomx.co/en/article/shine-image-gallery-1razuoh/)
- [Shine Theme Settings](https://doc.ecomx.co/en/article/shine-theme-settings-1876q8v/)

**In other themes:** [Normcore Before/After Section](https://doc.ecomx.co/en/article/normcore-beforeafter-section-17wse5k/)