> ## Documentation Index
> Fetch the complete documentation index at: https://voyager-theme.fasil.in/llms.txt
> Use this file to discover all available pages before exploring further.
# Homepage
> The six default sections that compose Voyager's home, in the order they appear.
The homepage is a JSON template — `templates/index.json` — that composes six sections in a deliberate order. The rhythm runs from cinematic wide shot to product close-up to category index to merchandising vignette to editorial chapter to membership invitation. Each section is independent. Reorder them. Hide them. Add others alongside. The structure exists to be edited.
## Default order
| # | Section | Type | Default purpose |
| - | -------------- | ----------------------- | --------------------------------------------------------------------------------- |
| 1 | `hero` | `home-hero` | Full-bleed video / poster carousel with overlay copy + dual CTAs. Up to 8 slides. |
| 2 | `new-arrivals` | `home-new-arrivals` | Script-headed product grid pulled from a chosen collection. |
| 3 | `archive` | `home-category-archive` | Dark navy band with six collection tiles. |
| 4 | `bundle` | `home-bundle` | "Worn together" hotspot picker on a stage image. |
| 5 | `chapters` | `home-chapters` | Two-up full-width editorial tiles. |
| 6 | `club` | `home-club` | Membership / community CTA over a full-bleed image. |
## Section-by-section
### 1. Hero
A full-bleed slideshow that stages the season. Each block is one slide — eyebrow line, headline script, headline sans, fallback Unsplash image, CTA label, CTA URL. The default ships with two slides ("The long voyage." and "On the Riviera."), but the section supports up to eight.
Section-level settings:
* `plate_line` — small caption rendered over the slide (default: `GENOVA · SUMMER MMXXVI`).
* `slide_ms` — slide duration in milliseconds (default: `6500`).
Replace `fallback_unsplash_id` with a real `image_picker` upload via the Theme Editor. The Unsplash IDs only show through if no merchant image is set.
### 2. New arrivals
The first product moment on the page. A script accent ("New Arrivals" by default) sits above a four-card grid pulled from a chosen collection. The default config uses the `new` collection handle and limits to four products.
```json theme={null}
"new-arrivals": {
"type": "home-new-arrivals",
"settings": {
"script": "New Arrivals",
"collection": "new",
"product_limit": 4
}
}
```
### 3. Category archive
A dark navy band that interrupts the page rhythm — six collection tiles in a flowing layout. Each tile is a block of type `category` with a `collection` reference, `fallback_title`, `fallback_count`, `fallback_url`, and `fallback_unsplash_id`. The fallbacks render only when the referenced collection is missing or empty.
The default six tiles cover Shirts, Trousers, Shorts, Knitwear, Outerwear, and Accessories.
### 4. Bundle
The "Worn together" moment. A single full-bleed stage image with up to four hotspots — each hotspot pinned by `x` / `y` coordinates (percentages), side preference (`left` / `right`), and a referenced product. The customer can build a complete look from a single image, then add the lot to cart with one click.
Section settings:
* `script` — heading accent (default: `Worn Together`).
* `list_multiplier` — tunes the bundled total preview (default: `112`).
* `fallback_unsplash_id` — the stage photo.
Each hotspot block carries `x`, `y`, `side`, `default` (whether it's pre-selected), `fallback_name`, `fallback_price`, and `fallback_unsplash_id`.
### 5. Chapters
A two-up moment — typically used to split the catalog by audience or by silhouette. Each block is a `chapter` with a script label, CTA, link, and fallback image. The default ships with "Top Wear" and "Bottom Wear".
The section-level `heading` setting (default: `Men's Wardrobe`) sits above the two chapters as a frame.
### 6. Club
A full-bleed editorial image with overlay copy and a single CTA. By default, it's a membership invitation:
```json theme={null}
"club": {
"type": "home-club",
"settings": {
"title": "Join Voyager Club",
"copy": "Early access to each season's edition, private invitations…",
"cta_label": "Become a Member",
"cta_url": "/account/register"
}
}
```
Swap the copy for a community sign-up, a press feature, or a closing image.
## Reordering sections
In the Theme Editor, drag any section in the left sidebar to a new position. The JSON `order` array updates automatically — you never need to edit `templates/index.json` by hand.
The default `order`:
```json theme={null}
"order": ["hero", "new-arrivals", "archive", "bundle", "chapters", "club"]
```
## Adding standalone sections
Voyager's homepage accepts any section that allows the `index` template in its `presets` group. Click **Add section** in the Theme Editor's home view and you'll see:
| Section | Use it for |
| ------------------- | --------------------------------------------- |
| Image banner | Full-bleed image with overlay copy and CTA |
| Multicolumn | 2–4 columns of icon + heading + body |
| Rich text | Editorial paragraph + button |
| Slideshow | Generic carousel (independent of `home-hero`) |
| Video | Native or YouTube/Vimeo embed |
| Testimonials | Two- or three-up press quote tiles |
| Featured collection | Generic version of new-arrivals |
| Featured product | A single PDP-style product preview |
| Collection list | Tile grid of merchant-chosen collections |
| Logo list | Press / partner logos |
| Newsletter | Standalone email capture |
| Blog posts | Three-up article preview |
| Image with text | Side-by-side image + copy + CTA |
| Custom Liquid | App snippets, custom HTML |
The six default sections (`home-*`) are intentionally homepage-only — they don't appear in the **Add section** library on other templates. Use the generic sections above when you want similar layouts on product or collection pages.
## What's next
Every setting on the home-hero section — slides, plate line, slide duration.
Every section Voyager ships with.