Shopify Sidekick/Theme/Create an Image-with-Text Overlay Hero
Task IntentTheme

Create an Image-with-Text Overlay Hero

Build a hero with a full-width background image and centered text overlay.

What This Sidekick Query Does

Build a hero with a full-width background image and centered text overlay.

Prompt / Skill

Run on Sidekick
Add a full-width hero section to my homepage using [IMAGE_URL] as the background image. Overlay the heading [HEADLINE_TEXT] centered on the image in [TEXT_COLOR] color at [HEADING_SIZE] pixels. Add a subheadline [SUBHEADLINE_TEXT] below it. Place a CTA button labeled [CTA_TEXT] linking to [CTA_URL] underneath the text. Apply a [OVERLAY_COLOR] color overlay at [OVERLAY_OPACITY] percent opacity to ensure text readability. Set the section height to [HEIGHT] pixels on desktop. The background image should use cover sizing and center positioning. On mobile, maintain readability by adjusting text size down proportionally.

Expected Output

Build a hero with a full-width background image and centered text overlay.

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.