Homepage Hero

File: sections/homepage-hero.liquid

Templates: index.json

Description

Homepage Hero

Full-viewport hero section with autoplay video background (or image fallback), headline, description paragraphs, and CTA button. First section in the scroll-snapping homepage.

Features:

• Autoplay, muted, looping MP4 video background with image poster/fallback
• Semi-transparent dark overlay for text readability
• Two-line headline (large + small)
• Description paragraphs and rounded CTA button
• Staggered fade-in animation on load
• Scroll-snap alignment for homepage scroll behavior

Settings:

• video_url (text) — URL to MP4 video file from Shopify Files
• background_image (image_picker) — Fallback/poster image (1920x1080px recommended)
• headline_1 (text) — Large headline line, default “YOU ARE FAR MORE”
• headline_2 (text) — Small headline line, default “THAN YOU IMAGINED”
• description_1 (textarea) — First description paragraph
• description_2 (textarea) — Second description paragraph
• cta_text (text) — CTA button text, default “Start Your Journey”
• cta_link (url) — CTA button link

Blocks: None

Snippets Used: None

Dependencies:

• Tailwind CSS utility classes
• Minimal inline CSS for staggered fade-in animations and loading state

Tailwind Status: Full

Settings

ID	Type	Label	Default	Info
video_url	text	Background Video URL		Upload video to Shopify Files (Settings > Files), then paste the file URL here. Video will autoplay, loop, and be muted. Recommended: MP4 format.
background_image	image_picker	Background Image (Fallback/Poster)		Poster image shown before video loads, and fallback if video is not provided. Recommended size: 1920x1080px.
headline_1	text	Headline Line 1 (Large)	YOU ARE FAR MORE
headline_2	text	Headline Line 2 (Small)	THAN YOU IMAGINED
description_1	textarea	Description Text (First Paragraph)	For over 50 years, Monroe Institute has been the world’s leading center for consciousness exploration.
description_2	textarea	Description Text (Second Paragraph)	Access states of expanded awareness through our life-changing programs and unlock greater meaning and purpose in life.
cta_text	text	CTA Button Text	Start Your Journey
cta_link	url	CTA Button Link

Presets

• Homepage Hero

Usage

This section can be added via the Shopify theme editor.

{% section 'homepage-hero' %}