> ## 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.
# Quick start
> Set up Voyager for your brand in about 10 minutes.
The fastest path from a fresh install to a storefront that looks like yours. Ten minutes, no code.
## Before you start
You'll need:
* Voyager installed on your store ([see Installation](/getting-started/installation))
* Your brand logo (PNG or SVG, ideally 480×120 or similar)
* One brand color (your primary ink)
* A hero image or short video (MP4 or WebM, under 4 MB for performance)
If you're missing any of these, the steps below note safe defaults you can use to keep moving.
## 1. Upload your logo (1 minute)
In the Theme Editor, click the **gear icon** (Theme settings) in the left sidebar.
1. Open the **Logo** group.
2. **Logo (default / navy variant)** — upload your main logo. This appears on cream and light backgrounds.
3. **Logo (light variant for dark backgrounds)** — upload a white-fill version. This appears on the navy hero overlay and any dark section.
4. **Logo width (desktop)** — start with `140 px`. Adjust later once you see the result.
5. **Favicon** — upload a square 32×32 PNG or SVG for the browser tab icon.
If you only have one logo file, upload it to both slots. Voyager will use the same logo everywhere — you can fix this later by uploading a true light variant.
## 2. Pick a theme style (30 seconds)
Theme settings → **Theme styles**. Three named presets:
| Preset | Best for |
| ---------------------------- | --------------------------------------------------------------------------------- |
| **Editorial Navy** (default) | Maritime / heritage / tailored / restrained — the original Voyager mood |
| **Warm Cream** | Beauty, home goods, wellness — warmer ink on warm cream with caramel accents |
| **Minimal Monochrome** | Sculpture, niche fragrance, art-led brands — pure black on white, no color accent |
Switching swaps the entire color palette, button corner radius, letter-spacing, section spacing, container width, and card image ratio in one click.
## 3. Set your brand color (1 minute)
Theme settings → **Colors** → **Primary (ink)**.
Paste your hex code (e.g. `#1A2C3E`). The primary color drives:
* Header brand wordmark fallback (if no logo uploaded)
* Buttons (filled style)
* Active states across the storefront
* Links in editorial text
The other three "schemes" (Scheme 2, 3, 4) keep their defaults for now. Voyager uses them to vary section backgrounds — Scheme 2 is the navy hero overlay, Scheme 3 is the soft warm-cream accent, Scheme 4 is the deep charcoal footer. Customize them later once you've seen them in context.
## 4. Replace the hero (2 minutes)
The home page hero is the first thing visitors see. By default it ships with travel-inspired demo imagery — swap it for your own.
1. Click on the **Hero** section in the left sidebar (or click the hero on the storefront preview).
2. Each slide is a **block** — click the first slide.
3. **Headline (script)** — your editorial subtitle (default: "the summer voyage")
4. **Headline (serif)** — your main heading (default: "Summer Collection")
5. **Body** — one-line subtext (default: blank)
6. **Poster image** — upload a still image (1400×900 minimum, JPG q85).
7. **Video** — optional. Upload an MP4 or WebM 1080p, under 4 MB. The poster appears while the video loads.
8. **Button 1 / Button 2** — label + link to a collection or page.
Delete the extra demo slides (or hide them) until you're ready to add your own. The hero shows the slides marked "enabled".
Hero videos load lazily — only the first slide's video starts on page load. Subsequent slides preload metadata only, which keeps the home page fast even with multiple videos.
## 5. Write your tagline (30 seconds)
Theme Editor → **Header group** → **Announcement bar** → **Message**.
Default: "Currently sailing · Summer MMXXVI". Replace with your own tagline — free shipping over \$X, current drop name, season + year, anything one short line long.
## 6. Connect your collections (2 minutes)
Voyager's homepage references specific collections. To wire them to yours:
1. Click the **New arrivals** section → **Collection** → pick your collection.
2. Click the **Category archive** section → for each block, pick a collection.
3. Click the **Featured collection** section (if added) → pick a collection.
If you don't have these collections yet, create them in **Products → Collections** first. Smart collections (rule-based on tags) auto-update as you add products with matching tags.
## 7. Set up the footer (2 minutes)
Footer is block-based. By default Voyager ships with:
* Newsletter signup (floating above)
* 4 link list columns (Explore, House & Service, Customer Care, Legal)
* Social icons
* Payment icons
* Studio block (location + EST · MMXXVI seal)
Edit each block to match your shop:
* **Trust strip** — 4 lines above the footer ("Complimentary worldwide shipping" etc.). Edit per line.
* **Link lists** — pick a menu in **Online Store → Navigation** (e.g., "Footer — Explore") and reference it here.
* **Studio block** — your address / location. Or remove if you don't want it.
* **Copyright text** — auto-updated, but you can override.
## 8. Publish (10 seconds)
Top-right of the Theme Editor: **Save** (saves draft) → close → go to **Themes** → **⋯** on Voyager → **Publish**.
Your visitors now see your customized Voyager.
## What's next
Learn the name of every element on each page — useful before deeper customization.
Logo specs, color schemes, typography, layout, and theme styles in detail.
Important decision: Classic vs New customer accounts affects which templates render.
Match the Shopify checkout page to your Voyager theme.