Task IntentTheme

Generate Before/After Image Slider

Build a draggable before/after image comparison slider for product transformations, results showcases, and visual demonstrations.

What This Sidekick Query Does

Build a draggable before/after image comparison slider for product transformations, results showcases, and visual demonstrations.

Prompts

Copy, adapt, and run this directly in Shopify Sidekick.

Run on Shopify Sidekick

Create a before/after image comparison slider block:

Features:

  Two images side by side with draggable divider
  “Before” and “After” labels
  Smooth drag interaction
  Touch support for mobile
  Optional auto-slide animation on page load


Settings:

  Before image picker
  After image picker
  Before label text
  After label text
  Divider color
  Divider style (line/handle)
  Starting position (percentage)
  Image aspect ratio
  Section heading


Requirements:

  Works on touch devices (swipe to compare)
  Responsive image sizing
  Smooth 60fps drag performance
  No external libraries (vanilla JS)
  Accessible with keyboard (arrow keys)


Generate as a theme block.

Expected Output

Build a draggable before/after image comparison slider for product transformations, results showcases, and visual demonstrations.

Tips to Improve Results

Copy the prompt above

Open Shopify Sidekick in your Shopify admin

Paste the prompt and replace the bracketed placeholders with your details

Review Sidekick's response and apply the suggestions