Skip to main content

Documentation Index

Fetch the complete documentation index at: https://voyage-theme.fasil.in/llms.txt

Use this file to discover all available pages before exploring further.

Voyager ships three hero treatments. They sit at the top of a page and own the first viewport. Pick one per page; they’re not designed to stack.
SectionUse when
Home · HeroThe cinematic option. Video or image carousel, parallax, coordinates plate. Built for the home page.
Image bannerA single full-bleed image with overlaid copy + CTAs. Best for collection landings, blog index, or content pages.
SlideshowA scroll-snap carousel of image slides with autoplay. Best when you have multiple campaigns to rotate without the production overhead of video.

​
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

​
show_section
checkbox
default:"true"
Master toggle. Hides the section entirely without removing it.
​
heading_size
range
default:"100"
Scales the script headline from 60% to 140% of the default size. Step 10, unit %.
​
show_scroll_cue
checkbox
default:"true"
Show the “SCROLL” indicator at the bottom.
​
show_plate
checkbox
default:"true"
Show the coordinates plate (location label + lat/long).
​
min_height
select
default:"100dvh"
Section height. Options: 100dvh (full viewport), 80dvh, 70vh, 60vh.

​
Style

​
eyebrow_color
color
default:"#F6F4EF"
Color of the small eyebrow line above each slide’s heading.
​
headline_color
color
default:"#F6F4EF"
Color of the script + sans heading.
​
body_color
color
default:"#F6F4EF"
Color of the body paragraph.
​
overlay_color
color
default:"#002F5B"
The dark gradient color laid over the image/video.
​
overlay_strength
range
default:"100"
Overlay opacity 0–100%. 0 = invisible, 100 = full strength.
​
cta_style
select
default:"light"
Button style. Options: light (outline), dark (outline), filled-cream, filled-navy.
​
text_align
select
default:"left"
Default slide text alignment. Options: left, center, right. Each slide can override.
​
headline_style
select
default:"both"
Which heading lines render. Options: both (script + sans), script (script only), sans (sans only).

​
Animation

​
slide_transition
select
default:"cinema"
Transition between slides. Options: cinema (clip-path reveal), crossfade, slide-left, slide-right, cut.
​
slide_ms
number
default:"6500"
Auto-advance interval in milliseconds.
​
text_stagger
select
default:"fast"
Text entrance speed. Options: fast, medium, slow.
​
parallax_intensity
select
default:"subtle"
Background parallax on scroll. Options: none, subtle, strong.

​
Plate label

​
plate_line
text
default:"KHOR DUBAI · SUMMER MMXXVI"
Small text shown in the coordinates plate.
​
plate_coords
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.
​
enabled
checkbox
default:"true"
Per-slide toggle. Lets a merchant temporarily hide a slide without deleting it.
​
eyebrow
text
default:"Edition I · MMXXVI"
Small uppercase line above the heading.
​
headline_script
text
default:"Summer"
The script half of the heading (the calligraphic accent word).
​
headline_sans
text
default:"Twenty Twenty-Six."
The sans-serif half of the heading.
​
body_text
textarea
Optional body paragraph below the heading.
​
poster
image_picker
Poster image for the slide. If video is also set, this is the LCP candidate that paints first.
​
fallback_unsplash_id
text
Unsplash photo ID used if poster is blank — for demo / preview purposes.
​
video_url
url
External video URL. If blank, slides 1–N fall back to bundled hero.webm / herov2.webm / hero-N.webm assets.
​
cta_label
text
default:"Shop the collection"
Primary CTA button text.
​
cta_url
url
Primary CTA destination.
​
cta2_label
text
Optional secondary CTA text.
​
cta2_url
url
Optional secondary CTA destination.
​
align_override
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 with fetchpriority="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.
Use Image banner instead on collection landings and content pages, where a single editorial still is enough. Use Slideshow when you have multiple campaign images but no video.

​
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
image_picker
Desktop image. The hero of the section.
​
image_mobile
image_picker
Optional mobile crop. Falls back to the desktop image if not set.
​
focal_x
range
default:"50"
Horizontal focal point 0–100%. Used to shift the visible center under different crops.
​
focal_y
range
default:"50"
Vertical focal point 0–100%.
​
overlay_opacity
range
default:"30"
Image overlay opacity 0–80%. Higher values darken the image for better text legibility.

​
Layout

​
height
select
default:"medium"
Section height. Options: small, medium, large, full (viewport).
​
text_alignment
select
default:"center"
Text alignment. Options: left, center, right.

​
Blocks

​
Eyebrow (limit 1)

​
text
text
default:"Voyager"
Eyebrow text.

​
Heading (limit 1)

​
script_prefix
text
Optional script word that precedes the main heading (e.g., “The Voyager”).
​
text
text
default:"Image banner"
The serif heading.

​
Body (limit 1)

​
text
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.
​
label
text
default:"Shop now"
Button text.
​
link
url
Button destination.
​
style
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.
Use Slideshow when you have 2–6 images to rotate. Use Home · Hero on the home page itself.

​
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

​
height
select
default:"medium"
Section height. Options: small, medium, large, full (viewport).

​
Autoplay

​
autoplay
checkbox
default:"true"
Auto-advance slides. Pauses on mouse-enter and respects prefers-reduced-motion.
​
autoplay_interval
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
image_picker
Desktop image.
​
image_mobile
image_picker
Optional mobile crop.
​
focal_x
range
default:"50"
Horizontal focal point 0–100%.
​
focal_y
range
default:"50"
Vertical focal point 0–100%.
​
overlay_opacity
range
default:"30"
Image overlay opacity 0–80%.
​
eyebrow
text
Small uppercase line above the heading.
​
script_prefix
text
Optional script word that precedes the heading.
​
heading
text
default:"Slide heading"
The serif heading.
​
body
richtext
Body paragraph.
​
button_label
text
CTA text. The CTA renders only when both label and link are set.
​
button_link
url
CTA destination.
​
button_style
select
default:"solid"
Button style. Options: solid, ghost.
​
alignment
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.
For a single still, use Image banner. For the home page, use 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.