• Shopify Section

Comparison slider with text

Comparison slider with text
This premium section creates an interactive before-and-after comparison experience, perfect for showcasing product transformations, design changes, or any visual comparisons. The section features a smooth, draggable slider that reveals two images with a satisfying transition effect.

The comparison slider works by allowing customers to drag a central handle left or right across the image, revealing or concealing each side. Each image can be enhanced with optional captions to highlight specific features or changes. The slider's handle is fully customizable with options for color, border styling, and even custom handle images.

Alongside the visual comparison, the section includes a flexible text area that can be used to:
  • Add descriptive headings
  • Include detailed explanations
  • Highlight key features
  • Insert calls-to-action
  • Add custom spacing and dividers

The section's design is highly customizable with controls for:
  • Background colors and images
  • Text styling and alignment
  • Custom fonts and sizes
  • Animation effects
  • Mobile responsiveness
  • Maximum width constraints
  • Custom padding and margins

This section is particularly effective for:
  • Product before/after demonstrations
  • Design portfolio presentations
  • Home renovation showcases
  • Beauty product results
  • Product feature comparisons
  • Service outcome demonstrations

The interactive nature of the slider creates an engaging experience that encourages customer interaction while effectively communicating visual differences or improvements.
Install this section

Included in all Design Packs plans. Try free for 14 days.
Install now — free trial →
  • Works with any Shopify theme
  • Customize in Shopify editor
  • No developer required

COMPARE & SHARE

See the difference

Drag and drop block options like heading, text, buttons, dividers, and more.

• Style variations

Same section. Completely different stores.

Every example below uses the same Comparison slider with text section just configured differently in the Shopify editor.

Before / After

Real results, 4 weeks in

Drag the slider to see the change. Same skin, same lighting — just four weeks of consistent use.

Grip test

Built to hold on

Slide across to compare our tread against a worn competitor. Wet or dry, it doesn't let go.