> ## 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. # Layout & spacing > Container width, section pacing, rule weight, card image ratios, and card hover affordances. 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. | 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. | 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 | 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. | 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 | 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. | 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 | 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 | 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](/interactive-features/quick-view-modal). | | **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. | ## 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 Three presets that ship with curated layout + colour combinations. Page transitions, scroll reveals, image blur — Voyager's motion system.