Product Carousel Section

Build a swipeable product carousel with autoplay, navigation arrows, and dot indicators.

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, JavaScript, and CSS for a product carousel section that I can paste into my theme as a custom section, displaying products from [COLLECTION_NAME] in a horizontally scrolling carousel. Show [VISIBLE_SLIDES] products at a time on desktop, 2 on tablet, 1 on mobile. Include left/right navigation arrows and dot indicators below. The carousel should support touch/swipe gestures on mobile. Add an optional autoplay feature that advances every [AUTOPLAY_SECONDS] seconds and pauses on hover. Each product card in the carousel should show: product image, title, price, and a Quick Add button. Add a section heading of [SECTION_HEADING] above the carousel. Use CSS scroll-snap for smooth native scrolling or vanilla JavaScript – no external libraries. Generate the complete Liquid section with schema settings, JavaScript, and CSS.

Where to add this: In Shopify admin, go to Online Store > Themes > Edit code, create a new section file at sections/product-carousel.liquid, and paste the generated Liquid/CSS/JS (including the schema block) in. Save, then open the theme customizer, add the “Product Carousel” section to the page, and select the collection.

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