Generate Video Background Section

Create a video background hero section with overlay, autoplay, text overlay, CTA buttons, and mobile fallback image.

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

Create a video background section block:

Features:

  Full-width video background (autoplay, loop, muted)
  Color overlay with adjustable opacity
  Text overlay (headline + subheadline)
  CTA button(s)
  Fallback image for mobile/slow connections


Settings:

  Video URL (YouTube, Vimeo, or hosted MP4)
  Fallback image picker
  Overlay color and opacity
  Headline text
  Subheadline text
  CTA button text and link
  Text alignment
  Minimum section height
  Play/pause button toggle


Requirements:

  Autoplay without sound (browser requirement)
  Mobile: show fallback image instead of video
  Responsive text sizing
  Accessible (video doesn’t autoplay for reduced-motion users)
  Lazy load video


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

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-background.liquid), paste the generated code in, and save. Then open the theme editor, go to your home page (or wherever you want the hero), and use “Add section” to place it.

How to Use

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