Theme Section - Compare Slider

The Compare Slider section allows customers to interactively drag between two images to reveal a clear before-and-after comparison. It’s an ideal way to showcase product results, transformations, or visual improvements that help build trust and demonstrate value instantly.


📌 Key Features

  • Interactive slider for clear visual comparison

    Customers can drag a handle to view the difference between two images, creating an engaging and informative experience.

  • Great for highlighting changes or effects

    Perfect for displaying product effects, renovations, edits, cosmetic results, or any transformation where seeing the difference matters.

  • Fully customizable to match your store

    Adjust styling, spacing, labels, and colors to integrate seamlessly with your brand’s look and feel.


💡 Want to see this theme section in action? Go to our demo store here to experience this intuitive theme section, along with our other Theme Sections!

Installing the Compare Slider theme section to your Shopify theme

Before going to the Shopify Theme Editor to insert this theme section, you would first need to install it from the Theme Sections & AI Pages app.

For a complete list of instructions, you may refer to this article: Getting Started with Theme Sections and AI Pages app


Once you have successfully installed the theme section, you can now go to the Shopify Theme Editor and insert it by clicking Add section > 🩷 Square: Compare Slider :



Customizing the Compare Slider Theme Section

Customizing this theme section is easy, as all its appropriate settings are already found inside the theme editor. You just need to click on a specific element of the theme section (on the left sidebar), and its customizable settings will appear on the right sidebar.

Removing a Theme Section

Removing an unwanted theme section is as easy as clicking the Remove section button after selecting a theme section:

🎨 Styling Tips

  • Use high-quality images that clearly show the transformation.
  • Keep lighting and angles consistent between before and after shots for maximum impact.
  • Add short labels like “Before” and “After” to guide customers.
  • Place the section near relevant products or promotions to support buying decisions.

Bring your product results to life with an engaging before-and-after slider your customers will love to interact with.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us