Shopify Sidekick/Theme/Add a Parallax Hero Banner
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.

Prompt / Skill

Run on 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

  1. 1

    Copy the prompt above

  2. 2

    Open Shopify Sidekick in your Shopify admin

  3. 3

    Paste the prompt and replace the bracketed placeholders with your details

  4. 4

    Review Sidekick's response and apply the suggestions

Sidekick Skills & Magic Prompt icon

Sidekick Skills & Magic Prompt

Create & manage AI skills for Sidekick. Discover skills from other merchants.