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.
Voyager gives you four global layout controls — container width, section spacing, rule style, and card image ratio — plus a handful of toggles for card behaviour. Combined, they let you tune the storefront’s pace without touching any single section.
All controls live in Theme settings → Layout and Theme settings → Cards.
Container width
| Option | Value |
|---|
| Full width | The storefront uses 100% of the viewport, edge to edge. Best for full-bleed image-led brands. |
| 1440 px | A wide container that still respects a side gutter on ultrawide displays. |
| 1280 px (default) | The editorial standard — comfortable line-lengths, generous margins on desktop. |
| 1024 px | A narrow container that pulls everything tight. Reads like a magazine spread. |
Section spacing
The vertical breathing room between sections. Voyager applies the value as padding-top and padding-bottom on every section.
| Option | Approx. desktop spacing | Best for |
|---|
| Compact | 60–80 px | Catalog-dense storefronts where merchandising matters more than mood |
| Comfortable (default) | 90–120 px | The editorial default — generous but not slow |
| Spacious | 130–180 px | Brands selling few high-priced pieces; lets each section read as a chapter |
40 px, Spacious becomes 80 px. You don’t need to set mobile spacing separately.
Rule / divider style
The weight of every hairline rule in the theme — between cart line items, around product cards, under accordion headers, separating footer columns.
| Option | Weight | When to use |
|---|
| Thin (default) | 1 px | The signature Voyager hairline — quiet, editorial |
| Medium | 2 px | When your imagery is high-contrast and the rule needs to hold its own |
| Double | A 1 px rule with a 1 px gap and a second 1 px rule | The Italian editorial detail — works beautifully on cream backgrounds |
Card image ratio
The aspect ratio applied to every product-card image on collection pages, the home grid, recommendations, and quick-view triggers.
| Option | Ratio | Best for |
|---|
| Portrait (default) | 4 : 5 | Apparel, footwear, full-body lookbooks — the editorial fashion standard |
| Square | 1 : 1 | Accessories, beauty, jewellery — anywhere the product reads compactly |
| Landscape | 4 : 3 | Home goods, furniture, wide editorial product photography |
object-fit: cover to fill the frame. If your photography isn’t shot to ratio, the crop happens at the centre of the image — important faces, logos, or product details near the edge will be cut.
Card text alignment
| Option | Result |
|---|
| Left (default) | Card title and price hug the left edge — reads as a catalog row |
| Center | Both centred under the image — reads as a gallery |
Card hover affordances
Three toggles control what shows up on hover (or as static badges on mobile).
| Setting | Default | What it does |
|---|
| Show quick-view hover button on product cards | true | The eye icon + “Select Options” CTA that opens the quick-view modal. See Quick view. |
| Show wishlist hover button on product cards | true | The heart icon stored in localStorage under voyage-wishlist. |
| Show product vendor | false | Renders the product’s vendor (brand name in Shopify) above the title. Useful for multi-brand storefronts; leave off for single-house brands. |
Colour swatches on cards
If your product has a Color (or Colour) option, Voyager automatically renders a swatch row below the card title — small circles in each option’s colour. Hovering a swatch swaps the card’s main image to that variant’s media.
Swatch behaviour:
- Colours map to CSS values via the option value name. “Navy” becomes
#002F5B, “Cream” becomes #F6F4EF, “Charcoal” becomes #0A0F18 — Voyager ships with a mapping for ~40 common colour names.
- Unknown names fall back to a neutral grey ring.
- For exact colour matching, name your variants with hex codes inside square brackets:
Navy [#002F5B]. Voyager parses the hex and uses it.
What’s next
Theme styles
Three presets that ship with curated layout + colour combinations.
Animation
Page transitions, scroll reveals, image blur — Voyager’s motion system.
