Create a Storytelling Hero Sequence

Build a multi-part storytelling hero that reveals content as users scroll or interact.

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 storytelling hero sequence on my homepage that guides visitors through a narrative. Set up [NUMBER_OF_PANELS] sequential panels. Panel 1: background [PANEL1_IMAGE_URL], heading [PANEL1_HEADING], text [PANEL1_TEXT]. Panel 2: background [PANEL2_IMAGE_URL], heading [PANEL2_HEADING], text [PANEL2_TEXT]. Panel 3: background [PANEL3_IMAGE_URL], heading [PANEL3_HEADING], text [PANEL3_TEXT]. Each panel should be [PANEL_HEIGHT] pixels tall. As the user scrolls, transition between panels with a [TRANSITION_TYPE] effect (options: fade, slide, parallax). Use [TEXT_COLOR] for all text with [OVERLAY_COLOR] overlays for readability. The final panel should include a CTA button labeled [CTA_TEXT] linking to [CTA_URL]. Add subtle scroll indicators between panels. Navigation dots on the side should show current position.

Generate the Liquid, CSS, and JavaScript for this storytelling hero sequence 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/storytelling-hero-sequence.liquid), and paste the generated code in. Save, then open the theme editor, go to your homepage, and use “Add section” to place the sequence where you want it.

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