Generate Before/After Image Slider

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

View as Markdown

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in 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 the complete Liquid, CSS, and JavaScript for this as a theme block I can paste into my own theme.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Blocks (e.g. blocks/before-after-slider.liquid), paste the generated code in, and save. Then open the theme editor on your product page, open an existing section (e.g. Product information), and use “Add block” to insert the slider where you want it to appear.

How to Use

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