textarea
Home · Hero — sections/home-hero.liquid
A cinematic carousel of up to 8 slides. Each slide is an image or video poster with overlaid eyebrow, script + sans heading, body copy, and up to two CTAs. Carousel auto-advances on a configurable timer with a numbered progress nav at the bottom right and an optional coordinates plate at the bottom left.
Available on: All templates. Designed for the home page.
Section settings
Visibility
checkbox
default:"true"
Master toggle. Hides the section entirely without removing it.
range
default:"100"
Scales the script headline from 60% to 140% of the default size. Step 10, unit
%.checkbox
default:"true"
Show the “SCROLL” indicator at the bottom.
checkbox
default:"true"
Show the coordinates plate (location label + lat/long).
select
default:"100dvh"
Section height. Options:
100dvh (full viewport), 80dvh, 70vh, 60vh.Style
color
default:"#F6F4EF"
Color of the small eyebrow line above each slide’s heading.
color
default:"#F6F4EF"
Color of the script + sans heading.
color
default:"#F6F4EF"
Color of the body paragraph.
color
default:"#002F5B"
The dark gradient color laid over the image/video.
range
default:"100"
Overlay opacity 0–100%. 0 = invisible, 100 = full strength.
select
default:"light"
Button style. Options:
light (outline), dark (outline), filled-cream, filled-navy.select
default:"left"
Default slide text alignment. Options:
left, center, right. Each slide can override.select
default:"both"
Which heading lines render. Options:
both (script + sans), script (script only), sans (sans only).Animation
select
default:"cinema"
Transition between slides. Options:
cinema (clip-path reveal), crossfade, slide-left, slide-right, cut.number
default:"6500"
Auto-advance interval in milliseconds.
select
default:"fast"
Text entrance speed. Options:
fast, medium, slow.select
default:"subtle"
Background parallax on scroll. Options:
none, subtle, strong.Plate label
text
default:"KHOR DUBAI · SUMMER MMXXVI"
Small text shown in the coordinates plate.
text
default:"25.27°N 55.30°E"
Second line of the plate.
Blocks
Slide (max 8)
The hero accepts up to 8 slide blocks.checkbox
default:"true"
Per-slide toggle. Lets a merchant temporarily hide a slide without deleting it.
text
default:"Edition I · MMXXVI"
Small uppercase line above the heading.
text
default:"Summer"
The script half of the heading (the calligraphic accent word).
text
default:"Twenty Twenty-Six."
The sans-serif half of the heading.
Optional body paragraph below the heading.
image_picker
Poster image for the slide. If video is also set, this is the LCP candidate that paints first.
text
Unsplash photo ID used if poster is blank — for demo / preview purposes.
url
External video URL. If blank, slides 1–N fall back to bundled
hero.webm / herov2.webm / hero-N.webm assets.text
default:"Shop the collection"
Primary CTA button text.
url
Primary CTA destination.
text
Optional secondary CTA text.
url
Optional secondary CTA destination.
select
default:"inherit"
Override the section-level text alignment for this slide. Options:
inherit, left, center, right.Default preset
Ships with 3 slide blocks pre-populated. The first slide is the LCP candidate — its poster loads eagerly withfetchpriority="high"; later slides are lazy.
When to use
The home hero is opinionated for the editorial-luxury home page treatment. Use it when:- You have video assets (or are using the bundled fashion video) and want cinematic motion at the top of the home page.
- You want a coordinates plate, scroll cue, and numbered progress dots — features that mark the home page as the “destination” page.
Image banner — sections/image-banner.liquid
Full-bleed image with overlaid eyebrow, heading, body, and CTA blocks. Editorial vocabulary: large script heading optional, restrained body, magnetic CTAs. Built for collection page tops, blog index, or content pages where the home hero isn’t appropriate.
Available on: All templates.
Section settings
Image
image_picker
Desktop image. The hero of the section.
image_picker
Optional mobile crop. Falls back to the desktop image if not set.
range
default:"50"
Horizontal focal point 0–100%. Used to shift the visible center under different crops.
range
default:"50"
Vertical focal point 0–100%.
range
default:"30"
Image overlay opacity 0–80%. Higher values darken the image for better text legibility.
Layout
select
default:"medium"
Section height. Options:
small, medium, large, full (viewport).select
default:"center"
Text alignment. Options:
left, center, right.Blocks
Eyebrow (limit 1)
text
default:"Voyager"
Eyebrow text.
Heading (limit 1)
text
Optional script word that precedes the main heading (e.g., “The Voyager”).
text
default:"Image banner"
The serif heading.
Body (limit 1)
richtext
default:"<p>Tell your house's story in one line.</p>"
Body paragraph (rich text).
Button (limit 2)
Up to two button blocks can be added.text
default:"Shop now"
Button text.
url
Button destination.
select
default:"solid"
Button style. Options:
solid, ghost (outlined).Default preset
Ships with 4 blocks: eyebrow, heading (script_prefix: "The Voyager", text: "Summer 2026"), body, button.
When to use
Reach for image banner when you need a full-bleed top-of-page treatment but don’t need video or multiple slides. Typical placements:- Collection landing pages (with the collection’s featured image as the banner).
- Blog index — a single editorial still introducing the journal.
- Long content pages where a quiet hero anchors the rest of the layout.
Slideshow — sections/slideshow.liquid
Full-bleed image carousel with overlaid copy and CTAs per slide. Native scroll-snap carousel with dot indicators; auto-advances on a configurable timer. Each slide is a block — add, remove, and reorder as needed.
Available on: All templates.
Section settings
Layout
select
default:"medium"
Section height. Options:
small, medium, large, full (viewport).Autoplay
checkbox
default:"true"
Auto-advance slides. Pauses on mouse-enter and respects
prefers-reduced-motion.range
default:"6"
Seconds between auto-advances. Range 3–12.
Blocks
Slide (no max)
Each slide is one full-bleed image with overlaid copy and an optional button.image_picker
Desktop image.
image_picker
Optional mobile crop.
range
default:"50"
Horizontal focal point 0–100%.
range
default:"50"
Vertical focal point 0–100%.
range
default:"30"
Image overlay opacity 0–80%.
text
Small uppercase line above the heading.
text
Optional script word that precedes the heading.
text
default:"Slide heading"
The serif heading.
richtext
Body paragraph.
text
CTA text. The CTA renders only when both label and link are set.
url
CTA destination.
select
default:"solid"
Button style. Options:
solid, ghost.select
default:"center"
Text alignment for this slide. Options:
left, center, right.Default preset
Ships with 2 blank slide blocks for the merchant to configure.When to use
Slideshow is the middle ground between image banner (single still) and home hero (video-led). Use it when:- You have multiple campaign images to rotate — a seasonal capsule plus a press feature, say.
- You don’t want or need video.
- You want autoplay without the production overhead of the home hero.
Cross-reference
Editorial sections
Image-with-text, chapters, multicolumn — content patterns that sit below a hero.
Templates · Homepage
See how
home-hero is placed by default in the home template.