Generate Custom Hero Section Block

Create a full-width hero section with background image, overlay, headlines, dual CTAs, parallax effect, and mobile-responsive settings.

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

Create a hero section block with these features:

Layout:

  Full-width background image with overlay
  Headline text (customizable)
  Subheadline text (customizable)
  Primary CTA button (customizable text and link)
  Secondary CTA button (optional)


Settings I need:

  Background image picker
  Overlay color and opacity
  Text alignment (left/center/right)
  Headline size options
  Button style options (solid/outline)
  Mobile image option (separate from desktop)
  Minimum height setting


Styling:

  Responsive design
  Text shadow for readability
  Smooth hover effects on buttons
  Parallax effect option


Please generate the Liquid, CSS, and JavaScript for this hero section as code I can paste into my own 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/hero.liquid), and paste the generated code in. Save, then open the theme editor and use “Add section” on the page where you want the hero to appear.

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