Before and After Image Slider - Shopify Section

Features

• Draggable handle with click-to-position and touch support.
• Separate before & after image uploads with alt text.
• Keyboard navigation and ARIA labels for accessibility.
• Responsive sizing, lazy-loading, and srcset for fast loads.
• Styling controls: height, border radius, labels, fonts, and colors.

Benefits

• Shows transformations instantly and clearly.
• Increases engagement with interactive, hands-on content.
• Builds trust by proving real results.
• Mobile-friendly and fast - won't slow pages.
• Easy to update in Shopify without coding.

How to Install

Go to Online Store > Themes > Actions > Edit Code

• Add CSS File
  • In Assets folder, click Add a new asset
  • Create file: component-before-after-slider.css
  • Copy & paste the CSS code from the file
  • Save
• Add Section File
  • In Sections folder, click Add a new section
  • Create file: nc-before-after-slider.liquid
  • Copy & paste the complete section code
  • Save