Skip to main content
The Compare slider section enables interactive visual comparison between two images using a draggable slider. Perfect for showcasing transformations, before/after results, product improvements, or visual differences, this interactive element engages visitors and provides clear visual proof of value. Use it when standard images can’t adequately demonstrate the difference you’re highlighting.

​
What this section controls

This section controls before/after image comparisons with the following capabilities:
  • Interactive draggable comparison slider
  • Two-image comparison (before and after)
  • Layout options (Full width or Shrink)
  • Section heading and descriptive text with customizable sizes
  • Optional call-to-action button with three style options
  • Initial slider position control (left/right bias)
  • Color scheme, width, and spacing controls

​
Section settings

Choose how the comparison slider is displayed:Full — Slider spans the full width of the section containerShrink (default) — Slider is constrained to a narrower, content-focused width
Heading — Main title for the section (default: “Before / After”). Supports rich text for bold, italic, and links.Heading size — Control the heading size from XS to XL (default: XL)Text — Add descriptive content below the heading with rich text formatting. Default: “Before and after images are a great way to showcase the transformation or improvement in a particular subject.”
Add an optional button below the comparison slider:Button text — The button label (default: “Shop now”). Leave empty to hide the button.Button URL — Destination link for the button (default: /)Button style — Choose visual appearance:
  • Filled (default) — Solid background button
  • Outlined — Border-only button
  • Text — Text-style link button
Choose the overall container width:
  • Page width (default) — Standard container width
  • Fluid — Wider, edge-to-edge within padding
  • Full width — Complete edge-to-edge layout
Select the background and text color scheme for the section (default: scheme-1).
Control vertical spacing above and below the section with options from None to XL (0, S, M, L, XL). Default is M for both top and bottom.
Add decorative borders:
  • None (default) — No borders
  • Top — Border above the section
  • Bottom — Border below the section
  • Both — Borders above and below

​
Block: Image before slide

The “before” image block displays the initial state. Limited to 1 block per section.
Upload the “before” image using Shopify’s image picker.
Recommended best practices:
  • Use the same resolution as the “after” image
  • Maintain identical subject framing and perspective
  • Match lighting conditions between images
This ensures smooth and accurate visual comparison.
Title — Text displayed on the image to identify it (e.g., “Before”, “Original”, “Without”)Label size — Control the label text size from XS to XL (default: M)Color scheme for label — Select a color scheme for the label background and text (default: scheme-1)
Use high-contrast color schemes to ensure labels remain readable when overlaid on images.

​
Block: Image after slide

The “after” image block displays the transformed state. Limited to 1 block per section.
Upload the “after” image using Shopify’s image picker. Follow the same best practices as the “before” image for optimal comparison.
Title — Text displayed on the image (e.g., “After”, “Improved”, “With”)Label size — Control the label text size from XS to XL (default: M)Color scheme for label — Select a color scheme for the label (default: scheme-1)

​
Default configuration

The section preset includes both required blocks:
  • Image before block with “Image before” label
  • Image after block with “Image after” label
Both “Image before” and “Image after” blocks are required for the comparison slider to function correctly. The section will not display properly with only one block.

​
Best practices

Image consistency

Use images with matching dimensions, framing, and perspective. Inconsistent images create a jarring comparison experience.

Two blocks required

Always add exactly two blocks (before and after). The slider requires both images to function properly.

Concise labels

Keep labels short and clear—single words like “Before”/“After” work best. Avoid lengthy descriptive text.

High contrast labels

Choose label color schemes that provide strong contrast with your images for maximum readability.

Image optimization

Optimize image file sizes before uploading to ensure fast loading without quality loss.

Avoid text in images

Keep images clean and focused on the visual comparison. Avoid embedding heavy text within the images themselves.

​
Use cases

  • Beauty and skincare — Show before/after results of treatments, products, or routines
  • Home improvement — Display room transformations, renovations, or staging results
  • Photo editing services — Demonstrate editing capabilities and transformation quality
  • Fitness and wellness — Showcase body transformations or progress over time
  • Product effectiveness — Prove product results with visual evidence
  • Restoration services — Highlight repair, cleaning, or restoration work
  • Design services — Compare original designs with improved versions
  • Landscaping — Show outdoor space transformations
  • Dental work — Display smile transformations or treatment results
  • Hair styling — Showcase color treatments, cuts, or styling results

​
Technical notes

The compare slider uses an interactive draggable control that allows users to move a divider left and right, revealing more or less of each image. This creates an engaging, hands-on comparison experience that static side-by-side images cannot provide. For the best user experience, ensure images load quickly and the slider responds smoothly to touch and mouse input on all devices.