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 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)
  • 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:
PresetBest for
Editorial Navy (default)Maritime / heritage / tailored / restrained — the original Voyager mood
Warm CreamBeauty, home goods, wellness — warmer ink on warm cream with caramel accents
Minimal MonochromeSculpture, 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. 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

Page anatomy

Learn the name of every element on each page — useful before deeper customization.

Theme setup deep dive

Logo specs, color schemes, typography, layout, and theme styles in detail.

Customer accounts

Important decision: Classic vs New customer accounts affects which templates render.

Checkout branding

Match the Shopify checkout page to your Voyager theme.