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

Create a Video Hero Section

Add a full-width video hero section to your homepage with autoplay background video and overlay text.

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 
Add a video hero section to the top of my homepage. Use [VIDEO_URL] as the background video source. It should autoplay, be muted, and loop continuously. Overlay the heading [HEADLINE_TEXT] in [HEADING_COLOR] color with a [SUBHEADLINE_TEXT] subtitle below it. Add a call-to-action button labeled [CTA_TEXT] that links to [CTA_URL]. The button should use [BUTTON_COLOR] as the background color. Set the section height to [HEIGHT] pixels on desktop and auto-adjust for mobile. Add a semi-transparent dark overlay at [OVERLAY_OPACITY] percent opacity so the text remains readable over the video.

Generate the Liquid, CSS, and JavaScript for this video hero section as a custom section I can paste into my theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/video-hero.liquid), and paste the generated code in. Save, then open the theme editor, go to your homepage, and use “Add section” to place it at the top.

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