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 branding layer sits in Theme settings (the gear icon in the Theme Editor sidebar). Every recipe below assumes you’re already there. Voyager uses two logo variants — one for cream and light backgrounds, one for dark.
1

Open the Logo group

Theme settings → Logo.
2

Upload the default logo

Logo (default / navy variant) — your main wordmark in dark ink. This appears on the cream paper background almost everywhere.
3

Upload the light variant

Logo (light variant for dark backgrounds) — a white-fill version of the same mark. This appears on the navy hero overlay, the dark category archive band, and any other Scheme 2 / Scheme 4 surface.
4

Tune the desktop width

Logo width (desktop) — default 140 px, range 60–320. The mobile width auto-scales.
PNG with transparency is the safest format. SVG works too, but Shopify will reject SVGs that embed <text> tags or external fonts — flatten text to paths before exporting.

​
Replace the favicon

Theme settings → Logo → Favicon. Upload a square PNG or SVG. Voyager crops it to 32×32 for the browser tab. Test by hard-refreshing the storefront in an incognito window — favicon caching is aggressive in most browsers.

​
Set your brand primary color

Theme settings → Colors → Primary (ink). Paste your hex code (default #002F5B). The primary color drives:
  • The header wordmark fallback when no logo is uploaded
  • Filled buttons across the storefront
  • Active states (selected swatch ring, active filter chip, focused input border)
  • Editorial link underlines
Adjust the other brand tokens at the same time:
TokenDefaultUse
Primary (ink)#002F5BText, buttons, links, active states
Secondary (paper)#F6F4EFPage background, soft surfaces
Accent#C39738Italianno script, small flourishes
Muted text#565E6BCaptions, helper text, disabled labels

​
Customize one of the four schemes

Schemes are background–foreground pairs that sections can opt into. Voyager ships with four.
SchemeDefault backgroundDefault foregroundUsed by
1 — Default#F6F4EF cream#002F5B inkMost page sections
2 — Inverse#002F5B navy#F6F4EF creamHero overlay, category archive band
3 — Soft#EFE9DC deeper cream#0A0F18 charcoalEditorial accents, soft tiles
4 — Deep#0A0F18 charcoal#F6F4EF creamFooter
To customize:
1

Open Colors

Theme settings → Colors.
2

Find the scheme you want to change

Each scheme has its own header — Scheme 2 — Inverse (navy), etc.
3

Pick a new pair

Change Background and Foreground. Aim for at least a 4.5:1 contrast ratio — Voyager’s a11y system depends on it.
4

Preview every section

Schemes affect many surfaces. Walk the home, product, collection, and cart pages before publishing.
Two of the named theme styles — Warm Cream and Minimal Monochrome — work by swapping these scheme tokens. If you’ve selected a style and then edited a scheme, the style picker will keep your overrides; switching styles will overwrite them.

​
Soften the button corners

Voyager’s editorial default is sharp corners. To soften:
1

Open Buttons

Theme settings → Buttons.
2

Pick a corner radius

Corner radius → Sharp / 2 px / 4 px / 8 px / Pill. Sharp is the maritime default; 2 px and 4 px read warmer; Pill swings the whole storefront toward a contemporary DTC feel.
You can also change Default button style (Solid / Outline / Underline) and Letter-spacing (Normal / Wide / Extra wide editorial) from the same group. Most buttons inherit the global default; some sections override it per-button.

​
Toggle film grain

Theme settings → Animation → Editorial premium effects → Film grain overlay. Default is on. Uncheck to remove the subtle texture from every page.
Film grain is a single CSS pseudo-element pinned to the viewport. Toggling it has no measurable performance impact, but some clients with very saturated photography prefer to leave it off.

​
Disable the dark mode toggle

Voyager’s dark mode is a CSS-level scheme inversion, not a separate stylesheet. To remove the toggle UI from the header:
  1. Open sections/header.liquid in the code editor.
  2. Find the data-theme-toggle button.
  3. Wrap it in {% if false %}…{% endif %} or delete the block.
If you want to default the whole site to dark mode without the toggle, add data-theme="dark" to the <html> tag in layout/theme.liquid. Most merchants leave dark mode toggleable.

​
Change typography

Theme settings → Typography. Voyager uses three font slots.
SlotDefaultPurpose
BodyPlayfair Display body fallback (Tajawal in production)Paragraphs, labels, navigation
HeadingPlayfair DisplayPage headings, section titles, product names
Accent (italic / script)Playfair Display italicThe Italianno-feeling script that runs above headlines
Click each font picker, search Shopify’s library (1,200+ Google Fonts), pick a face, and the storefront re-skins live in the preview.
1

Pick a body font

Aim for something legible at 14–16 px — a humanist sans (Inter, Source Sans, Tajawal) or a quiet serif (Source Serif, EB Garamond).
2

Pick a heading font

Bigger personality, but still readable at h1 sizes. Playfair Display, Cormorant, Italiana, or Tenor Sans pair well with Voyager’s tone.
3

Pick an accent font

A script for the eyebrow text above hero headlines and product titles. Italianno, Allura, or Petit Formal Script are the closest matches to Voyager’s default mood.
4

Adjust scale

Body size (90–130%) and Heading size (90–160%) let you push the typographic ratio without changing fonts.

​
Where to next

Homepage recipes

Now wire your branded storefront to your products.

Theme setup deep dive

Every setting, explained.