Task IntentTheme
Add a Parallax Hero Banner
Set up a parallax scrolling hero banner with a fixed background image and floating text.
What This Sidekick Query Does
Set up a parallax scrolling hero banner with a fixed background image and floating text.
Prompts
Copy, adapt, and run this directly in Shopify Sidekick.
Add a parallax hero banner section to my [PAGE_NAME] page. 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.
Expected Output
Set up a parallax scrolling hero banner with a fixed background image and floating text.
Tips to Improve Results
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