# Image comparison element

#### About Image Comparison (Before-After) Element

The Image Comparison element (also known as Before/After slider) in PageFly lets you showcase two images side by side with an interactive slider. Visitors can drag the slider to reveal and compare the "Before" and "After" images — perfect for product transformations, makeovers, renovations, or any visual comparison.

This element supports both horizontal and vertical comparison modes, customizable handle styles, and badge labels to clearly indicate which side is "Before" and which is "After."

#### How To Access Image Comparison Element

To access the **Image Comparison element** in PageFly, follow these simple steps:

* Step 1: Click the "**Elements**" button on the left menu and stay on the PageFly tab.
* Step 2: Find "**Image Comparison**" under the **Media** category.
* Step 3: Drag and drop the variant into the page canvas and start using it.

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2F4FNXV7p4llLKrDIFLtJe%2FCleanShot%202026-03-24%20at%2018.45.09.gif?alt=media&#x26;token=ecc8963e-bc0a-4dce-b969-94e15d4d6af8" alt=""><figcaption></figcaption></figure>

> **Note:** The Image Comparison element is currently available on Flex (Gen 2) pages only.

The Image Comparison element comes with one default variant that includes a horizontal slider with Before/After badge labels.

#### How To Configure Image Comparison Element

The Image Comparison element offers settings in the **General** and **Styling** tabs. Here's how to configure it:

**General Settings**

Select the Image Comparison element and navigate to the **General** tab. You will find these setting groups:

**Content**

| Setting                  | Description                                                                                                                                                                                          |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Before Image**         | Upload or select the "Before" image. Click the image area to open the Media Manager where you can upload from your device, use a URL, browse free Shopify images, or select from your media library. |
| **Alt Text** (Before)    | Add alternative text for the Before image. This helps with SEO and accessibility — screen readers use this text to describe the image.                                                               |
| **Image Title** (Before) | Add a title for the Before image. This text appears as a tooltip when hovering over the image.                                                                                                       |
| **After Image**          | Upload or select the "After" image using the same options as the Before image.                                                                                                                       |
| **Alt Text** (After)     | Add alternative text for the After image.                                                                                                                                                            |
| **Image Title** (After)  | Add a title for the After image.                                                                                                                                                                     |

> **Tip:** For the best visual result, use Before and After images with the same dimensions. If the images have different aspect ratios, the Before image will use `object-fit: cover` to match the After image's container size.

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FsshM5yxwYHW95LrG4XSJ%2FCleanShot%202026-03-24%20at%2018.51.28%402x.png?alt=media&#x26;token=d57db5d4-b0a8-4644-b42a-575b335ee903" alt=""><figcaption></figcaption></figure>

**Image Settings**

| Setting           | Description                                                                                                                                                                                                                                     |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image Quality** | Controls the resolution of both images. Options range from **Auto** (recommended) to **Original**, **Thumbnail**, **Low**, **Medium**, **High**, **Very High**, and **Ultra**. Lower quality = faster loading; higher quality = sharper images. |
| **Image Loading** | Controls when images are loaded. **Lazy Load** (default): images load only when visible — improves page speed. **Preload**: images load immediately — improves LCP for above-the-fold content. **Standard**: default browser behavior.          |

**Slider Settings**

| Setting              | Description                                                                                                                                         |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Direction**        | Choose **Horizontal** (left/right split) or **Vertical** (top/bottom split).                                                                        |
| **Start Position**   | Set the initial position of the slider as a percentage (0%–100%). Default is 50%, meaning the slider starts in the middle.                          |
| **Handle Style**     | Choose the slider handle appearance: **Circle** (round button with arrows), **Arrow** (directional arrows only), or **Line** (simple divider line). |
| **Badge Visibility** | Show or hide the Before/After badge labels. Set to **Visible** or **Hidden**.                                                                       |

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FzgbKQeYzi98CZOqoK9in%2FCleanShot%202026-03-24%20at%2018.53.04%402x.png?alt=media&#x26;token=1e068784-4734-4bab-afff-b25dfd32745c" alt=""><figcaption></figcaption></figure>

**Badge Settings**

Click on the **Comparison Badge** child element in the Page Outline to access badge-specific settings:

| Setting            | Description                                                                                   |
| ------------------ | --------------------------------------------------------------------------------------------- |
| **Before Text**    | Customize the text shown on the Before badge. Default: "Before".                              |
| **After Text**     | Customize the text shown on the After badge. Default: "After".                                |
| **Badge Position** | In **Horizontal** mode: Top, Center, or Bottom. In **Vertical** mode: Left, Center, or Right. |

> You can also style the badge appearance (font, color, background, border) in the **Styling** tab when the badge is selected.

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2F6YusqkbJhT96r5kCdvKM%2FCleanShot%202026-03-24%20at%2018.56.05%402x.png?alt=media&#x26;token=b0671ee5-c607-4df4-9b95-593bd8a288c1" alt=""><figcaption></figcaption></figure>

**Styling Settings**

Select the Image Comparison element and switch to the **Styling** tab to access styling options:

* **Width**: Control the element width (Fill or Custom).
* **Height**: Adjust the element height.
* **Spacing**: Add padding and margin around the element.
* **Background**: Set a background color behind the comparison slider.
* **Border**: Add borders or rounded corners.
* **Effects**: Apply box shadows or opacity.
* **Custom CSS**: Write custom CSS for advanced styling.

For further details on the Styling tab, please refer to the [Element Styling Guide](https://help.pagefly.io/manual/elements-style-settings/).

#### How It Works on the Storefront

Once published, the Image Comparison element becomes fully interactive on your live store:

* **Mouse drag**: Click and drag the slider handle left/right (or up/down in vertical mode) to compare images.
* **Touch drag**: On mobile devices, swipe the slider to compare.
* **Keyboard**: Focus the slider and use Arrow keys to move it. Home/End keys jump to 0%/100%.

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2F0EhMXJViiAUge2q3zE9S%2FCleanShot%202026-03-24%20at%2019.03.13.gif?alt=media&#x26;token=a74c09ff-81db-4b85-8282-e0814e7bde15" alt=""><figcaption></figcaption></figure>

#### Common Use Cases

**Product Before & After**

Show product transformations — skincare results, home renovations, photo editing, weight loss journeys, or any visual improvement.

**Feature Comparisons**

Compare two versions of a product, two color options, or old vs. new packaging.

**Seasonal or Event Showcases**

Show a space or product in different seasons, lighting conditions, or event setups.

#### Tips for Best Results

1. **Use same-size images**: Both Before and After images should ideally have the same dimensions for pixel-perfect alignment.
2. **Keep file sizes small**: Use the Image Quality setting to balance quality and loading speed. "Auto" is recommended for most cases.
3. **Use Lazy Load**: For Image Comparison elements below the fold, keep the default "Lazy Load" setting to improve page speed.
4. **Use Preload**: For hero/above-the-fold comparisons, switch to "Preload" to improve LCP scores.
5. **Add Alt Text**: Always add descriptive alt text to both images for better SEO and accessibility.

#### Frequently Asked Questions

**1. Can I use different-sized images for Before and After?**

Yes, but for the best result, use images with the same aspect ratio. If the images differ, the Before image will be cropped (using `object-fit: cover`) to match the After image's dimensions.

**2. Does the slider work on mobile devices?**

Yes. The slider supports both touch and mouse interactions, with directional locking to prevent accidental scrolling while dragging.

**3. Can I change the slider direction after adding images?**

Yes. Switch between Horizontal and Vertical at any time in the General tab. The slider and badge positions will update automatically.

**4. How do I hide the Before/After labels?**

Select the Image Comparison element, go to the General tab, and set **Badge Visibility** to **Hidden**.

**5. Can I style the badge labels?**

Yes. Click the Comparison Badge in the Page Outline, then use the Styling tab to customize font, color, background, border, and more.

#### Additional Resources

* [PageFly Element Styling | Ultimate Guide to Edit Effectively](https://help.pagefly.io/manual/elements-style-settings/)
* [General Settings for All Elements](https://help.pagefly.io/manual/elements-general-settings/)
* [Image Element Guide](https://help.pagefly.io/page-structure-and-elements/pagefly-elements/media/image-element)