← All Skills
Theme 💎 Built for Sidekick ✍️ Sidekick drafts it — you apply it
shopify sidekick theme hero slideshow

Design a Slideshow Banner Section

Create a rotating slideshow banner with multiple slides, transitions, and navigation dots.

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 code for a slideshow banner section with [NUMBER_OF_SLIDES] slides. For each slide, use the following images: [SLIDE_IMAGES_LIST]. Each slide should have its own heading, subheading, and CTA button. Slide 1: heading [SLIDE1_HEADING], CTA [SLIDE1_CTA_TEXT] linking to [SLIDE1_CTA_URL]. Slide 2: heading [SLIDE2_HEADING], CTA [SLIDE2_CTA_TEXT] linking to [SLIDE2_CTA_URL]. Set auto-rotation to every [INTERVAL_SECONDS] seconds. Use a [TRANSITION_TYPE] transition effect between slides. Show navigation dots at the bottom and arrow buttons on the sides. Set the banner height to [HEIGHT] pixels. On mobile, reduce height to [MOBILE_HEIGHT] pixels and ensure text remains readable. Give me the complete Liquid, CSS, and JavaScript for this as a custom section I can paste into my theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/slideshow-banner.liquid), paste the generated code in, and save. Then open the theme editor and use “Add section” to place the slideshow on your homepage.

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