← All Skills
Theme 💎 Built for Sidekick ✍️ Sidekick drafts it — you apply it
shopify sidekick theme hero

Create an Image-with-Text Overlay Hero

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

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 
Generate the Liquid and CSS for a full-width hero section with a background image and centered text overlay, that I can paste into my theme as a custom section on my homepage. Use [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. Finally, tell me exactly which section file to create and how to add it to my homepage through the Shopify theme editor.

How to Use

  1. Copy the prompt above
  2. Open Shopify Sidekick in your Shopify admin
  3. Paste the prompt and replace the bracketed placeholders with your details
  4. Review Sidekick's response and apply the suggestions