← All Skills
Theme 💎 Built for Sidekick ✍️ Sidekick drafts it — you apply it
shopify sidekick theme product-page interactive

Generate Before-After Comparison Slider Section

Build an interactive before-and-after image comparison slider with draggable divider, labels, and multiple comparison pairs.

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 
Generate the Liquid, CSS, and JavaScript for a before-and-after image comparison slider section that I can paste into my theme as a custom section, based on this spec:

Slider Functionality:

  Draggable vertical divider between two images
  “Before” label on left, “After” label on right
  Custom label text: [BEFORE_LABEL] / [AFTER_LABEL]
  Starting divider position: [PERCENTAGE]% from left
  Smooth drag interaction on desktop and touch on mobile
  Optional auto-animate divider on first view


Content Per Comparison:

  Before image upload
  After image upload
  Comparison title
  Short description text
  Product link (optional): [PRODUCT_URL]


Layout Options:

  Single slider (full-width or contained)
  Multiple comparisons in grid: [2/3] per row
  Carousel mode for multiple comparisons
  Image aspect ratio: [square/landscape/portrait/custom]
  Max image width: [MAX_WIDTH]px


Design Settings:

  Divider line color: [DIVIDER_COLOR]
  Divider handle style: [circle/arrows/grab]
  Label style: [overlay-badge/above-image/below-image]
  Background color: [BACKGROUND_COLOR]
  Section heading: [SECTION_HEADING]
  Padding: [TOP_PADDING]px / [BOTTOM_PADDING]px


Requirements:

  Both images must be same dimensions
  Touch-friendly drag handle (minimum 44px tap target)
  Accessible keyboard controls (arrow keys move divider)
  Lazy load images
  No JavaScript dependency for basic display (progressive enhancement)
  Support for [NUMBER] comparison pairs


Where to paste this: Tell me which section file to save this as and walk me through adding it to my theme via the Shopify theme editor.

How to Use

  1. Copy the prompt above
  2. Open Shopify Sidekick in your Shopify admin
  3. Paste the prompt and replace the bracketed placeholders with your details
  4. Review Sidekick's response and apply the suggestions