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.
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
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: coverto match the After image's container size.
Image Settings
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
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.
Badge Settings
Click on the Comparison Badge child element in the Page Outline to access badge-specific settings:
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.
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.
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%.
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
Use same-size images: Both Before and After images should ideally have the same dimensions for pixel-perfect alignment.
Keep file sizes small: Use the Image Quality setting to balance quality and loading speed. "Auto" is recommended for most cases.
Use Lazy Load: For Image Comparison elements below the fold, keep the default "Lazy Load" setting to improve page speed.
Use Preload: For hero/above-the-fold comparisons, switch to "Preload" to improve LCP scores.
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
Last updated
Was this helpful?