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.

The homepage in Voyager is built from six default sections, each independently configurable. You can add more, remove any, and reorder freely.

Add or hide a homepage section

1

Open the home template in the Theme Editor

Top bar → Home page (the dropdown next to the storefront preview).
2

To hide a section

Click the section in the left rail → click the eye icon at the top of the settings panel. Hidden sections stay in the template — toggle the eye again to bring them back.
3

To remove a section permanently

Click the section → click the trash icon. The section is removed from the template, but its settings are forgotten — don’t do this if you might add it back later.
4

To add a section

Scroll the left rail to Add section. Pick from Hero, Featured collection, Image banner, Multicolumn, Rich text, Testimonials, Video, Logo list, Image with text, Blog posts, Newsletter, Collection list, Custom liquid, Slideshow, and more.

Reorder sections

In the left rail, grab a section by its handle (six dots on the left of the row) and drag. Voyager uses standard Shopify section ordering — order matters, top is what visitors see first.
Watch the cinematic flow. The default order (hero → new arrivals → category archive → bundle → chapters → club) alternates light cream and deep navy bands so the eye keeps moving. If you reorder, try to preserve that contrast rhythm.

Add a hero slide with video

The hero is a carousel — each slide is a block.
1

Open the Hero section

Click Hero in the left rail (or click the hero on the preview).
2

Add a slide

Scroll to the bottom of the section’s settings → Add blockSlide. The new slide appears at the bottom of the carousel.
3

Upload a poster image

Poster image — 1400×900 minimum, JPG q85. This appears while the video loads and on devices with slow connections.
4

Upload the video

Video — MP4 or WebM, 1080p, under 4 MB. Voyager only autoplays the first slide; subsequent slides preload metadata only, so file size matters less for slides 2+.
5

Write the copy

Headline (script) for the eyebrow line, Headline (serif) for the main heading, Body for one-line subtext.
6

Set the CTAs

Button 1 and Button 2 each take a label and a URL. Button 1 is filled; Button 2 is outlined.
7

Reorder slides

Drag the slide block in the left rail. The first enabled slide is the one that autoplays its video on load.
Mobile autoplay only works when the video is muted and playsinline — both default-set by Voyager. If you re-encode an MP4 without these attributes upstream, autoplay will silently fail on iOS.

Change the new-arrivals collection

1

Click the New arrivals section

In the left rail.
2

Pick a collection

Collection dropdown → choose the collection you want surfaced. If yours isn’t listed, create it first in Products → Collections in the Shopify admin.
3

Tune the count

Products to show controls how many cards render (typically 4, 6, 8, or 12).
4

Rename the eyebrow

The default is “new arrivals” in script. Edit Eyebrow to match your season or drop.

Customize the category archive (6 tiles)

The category archive is a dark navy band with six collection tiles, each linking to a collection.
1

Open the Category archive section

In the left rail.
2

Edit each tile

Click a tile block → set Image, Label, and Link (a collection or page URL). Six tiles is the standard; you can add up to eight or remove down to four.
3

Adjust the band heading

Section heading and Eyebrow sit above the grid. Default reads as “the archive” in script with “Explore by category” beneath.

Wire up the bundle hotspots

The Bundle section shows a “Complete the look” stage image with clickable hotspots — each hotspot opens a product picker.
1

Open the Bundle section

In the left rail.
2

Upload the stage image

A flat-lay or styled image with clear space around each product. 1600×1200 works well.
3

Position each hotspot

Each Hotspot block has X (%) and Y (%) coordinates — 0 is top/left, 100 is bottom/right. Pick a product for each hotspot.
4

Preview on mobile

Hotspots render as numbered chips on mobile. If they overlap, nudge the coordinates by 5–10%.

Edit the Club CTA

The Club section is a full-bleed editorial image with a membership / community call-to-action overlaid.
1

Click the Club section

In the left rail.
2

Upload the background image

1600×900 minimum. Voyager darkens it with a CSS overlay so any photograph reads at the chosen text color.
3

Write the copy

Eyebrow (script), Heading, Body (one paragraph), Button label, Button URL.
4

Adjust the overlay strength

Overlay opacity — push higher if your photograph has bright midtones that fight with the text.
These are general-purpose sections you can drop anywhere on the homepage.
SectionWhen to use it
Featured collectionA second or third product grid — a separate drop, a sale collection, a curated edit
Image bannerA wide editorial photograph with a single CTA — typically used between product sections
Multicolumn2–4 vertical column cards — features, value props, a “house philosophy” row
Logo listA press strip, “as seen in,” or stockists row
TestimonialsCustomer quotes with avatars
VideoA standalone video section, not full-bleed like the hero
Rich textA long-form editorial paragraph, centered
Image with textA 50/50 image-plus-copy block
NewsletterAn inline email signup, separate from the footer one
Blog postsThe 2 or 3 latest articles from a chosen blog
To add any of them: Add section at the bottom of the left rail, then drag into position.

Where to next

PDP recipes

The product page is block-based — and there’s more to configure.

Sections reference

Every section, every setting.