Design a Multi-CTA Hero Banner

Create a hero banner with multiple call-to-action buttons pointing to different collections or pages.

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 hero banner on my homepage with multiple CTA buttons for different destinations. Use [BACKGROUND_IMAGE_URL] as the full-width background image. Display the heading [HEADLINE_TEXT] in [TEXT_COLOR] at [HEADING_SIZE] pixels, centered. Add a subheadline [SUBHEADLINE_TEXT] below. Then add [NUMBER_OF_CTAS] CTA buttons in a horizontal row: Button 1 labeled [CTA1_TEXT] linking to [CTA1_URL] in [CTA1_COLOR], Button 2 labeled [CTA2_TEXT] linking to [CTA2_URL] in [CTA2_COLOR], Button 3 labeled [CTA3_TEXT] linking to [CTA3_URL] in [CTA3_COLOR]. Space the buttons evenly with [BUTTON_SPACING] pixels between them. Apply an [OVERLAY_COLOR] overlay at [OVERLAY_OPACITY] percent opacity. Set section height to [HEIGHT] pixels. On mobile, stack the buttons vertically.

Generate the Liquid, CSS, and JavaScript for this multi-CTA hero banner 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/multi-cta-hero-banner.liquid), and paste the generated code in. Save, then open the theme editor, go to your homepage, and use “Add section” to place it at the top.

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