Add a Parallax Hero Banner

Set up a parallax scrolling hero banner with a fixed background image and floating text.

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, CSS, and JavaScript for a parallax hero banner section that I can paste into my [PAGE_NAME] page’s theme template as a custom section. Use the image [IMAGE_URL] as a fixed background that creates a parallax scrolling effect. Set the section height to [HEIGHT] pixels. Center the heading [HEADLINE_TEXT] vertically and horizontally in [HEADING_COLOR] color with a text shadow for readability. Below the heading, add the subtext [SUBHEADLINE_TEXT]. Include a CTA button labeled [CTA_TEXT] linking to [CTA_URL] with rounded corners. Add a color overlay using [OVERLAY_COLOR] at [OVERLAY_OPACITY] percent opacity. The parallax scroll speed should feel smooth and subtle. On mobile devices, disable the parallax effect and show the image as a static background. Finally, tell me exactly which section file to create and how to add it to the page through the Shopify theme editor.

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