Layout & spacing

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

Container width applies to most sections, but full-bleed sections (Hero, Category archive, Chapters, Club) ignore it by design — they always span 100% so the imagery anchors the page.

​

Section spacing

The vertical breathing room between sections. Voyager applies the value as padding-top and padding-bottom on every section. On mobile, Voyager scales these down proportionally — Compact becomes 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. The rule colour is set separately in Colors → Functional → Rule / hairline. Style and colour are independent.

​

Card image ratio

The aspect ratio applied to every product-card image on collection pages, the home grid, recommendations, and quick-view triggers. Whatever ratio you pick, Voyager uses 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

​

Card hover affordances

Three toggles control what shows up on hover (or as static badges on mobile).

​

Hover image (second media)

Voyager automatically uses a product’s second media as the hover-reveal image on the collection page. This isn’t a setting you configure — it’s automatic. If your product has only one image, the card stays static on hover. To set up hover images cleanly: upload a primary product image, then a secondary image (a back-view, a flat-lay, a context shot). The second image becomes the hover state on every card. This is a small detail that lifts the collection page dramatically.

​

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