Video Hero

File: sections/video-hero.liquid

Templates: product.gateway-voyage.json

Description

Video Hero

Full-viewport hero section with a background image, centered text overlay, and a prominent play button. Clicking the play button opens a fullscreen modal overlay with the embedded video (YouTube or Vimeo). The modal has a close button and clicking the backdrop also dismisses it.

Features:

• Full-viewport background image with dark overlay for text readability
• Configurable overlay opacity
• Eyebrow text, large heading, subtitle, and bottom description
• Animated play button that opens a video modal
• Supports both YouTube and Vimeo embeds
• Modal with dark backdrop, close button, and escape key support
• Responsive layout with mobile-first Tailwind classes

Settings:

• background_image (image_picker) — Hero background image (1920x1080 recommended)
• overlay_opacity (range) — Dark overlay opacity 0–100, default 40
• eyebrow (text) — Small uppercase text above the heading
• heading (text) — Large hero heading
• subtitle (textarea) — Italic subtitle below the heading
• bottom_text (textarea) — Italic description text below the play button
• video_platform (select) — “youtube” or “vimeo”
• video_id (text) — YouTube or Vimeo video ID
• play_button_color (color) — Play button background color, default #007674
• min_height (select) — Section minimum height, default “100vh”

Blocks: None

Snippets Used: None

Dependencies:

• YouTube / Vimeo iframe embed (external)

Tailwind Status: Full All layout, typography, and responsive behavior use Tailwind utilities. Inline <style> only for overlay opacity (requires Liquid variable) and play-button pulse animation.

Accessibility:

• Play button uses <button> with aria-label
• Modal traps focus and supports Escape key to close
• Video iframe includes title attribute
• Background image is decorative (no alt needed)

Settings

ID	Type	Label	Default	Info
“	header
background_image	image_picker	Background Image		Full-width hero background. Recommended: 1920x1080px or larger.
overlay_opacity	range	Overlay Opacity	40	Dark overlay over the background image for text readability.
min_height	select	Section Height	100vh
“	header
text_color	color	Text Color	#ffffff
eyebrow	text	Eyebrow Text	Portal to Expanded Awareness	Small uppercase text above the heading.
heading	text	Heading	Gateway Voyage Online
subtitle	textarea	Subtitle	A Proven System for Expanding Consciousness — From the Comfort of Your Home	Displayed in italics below the heading.
bottom_text	textarea	Bottom Text	Experience Monroe’s most proven method for exploring expanded awareness — and awaken to the greater dimensions of who you are.	Displayed in italics below the play button.
“	header
video_platform	select	Video Platform	youtube
video_id	text	Video ID		YouTube: the ID from the URL (e.g., ‘dQw4w9WgXcQ’ from youtube.com/watch?v=dQw4w9WgXcQ). Vimeo: the ID from the URL (e.g., ‘123456789’ from vimeo.com/123456789).
play_button_color	color	Play Button Color	#007674

Presets

• Video Hero

Usage

This section can be added via the Shopify theme editor.

{% section 'video-hero' %}