Theme Sections - Compare Slider & Text

Showcase powerful before-and-after visuals using an interactive slider that customers can drag. Perfect for highlighting product results, transformations, or service impact in a visually compelling way.

✨ Key Benefits

• 🎚️ Interactive Before & After Slider

  Engage your visitors with a draggable slider that compares two images side-by-side.

• 🧼 Perfect for Transformational Products

  Ideal for beauty, cleaning, restoration, fitness, and similar industries where results matter.

• 🎨 Fully Customizable

  Adjust slider layout, image size, background, and accompanying text to fit your brand’s design.

Installing the Compare Slider & Text 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 > 🩷 Theme Sections & AI Pages: Compare Slider & Text :

Setting the images to be used in the Compare Slider & Text theme section

For this theme section to work effectively, you need to provide two images (left and right) that will provide the Comparison behavior.

This can be done by selecting the inserted theme section in the left sidebar and then defining the left and right images:

Once the left and right images are properly setup, the Compare Slider & Text theme section would show it accordingly with an interactive button that can be dragged to the left or to the right.

Customizing the Compare Slider & Text 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:

💡 Pro Tips

• Use high-resolution images for a sharper, more impressive comparison.
• Pair the slider with testimonials or product details to build trust.
• Position it near CTAs (like "Shop Now") to nudge conversions.

The Compare Slider & Text section combines storytelling and proof in one elegant, interactive experience. Great for stores where visuals sell the transformation.