# Voyager

> Documentation for the Voyager Shopify theme — editorial fashion theme for considered brands.

## Docs

- [Apps and integrations](https://voyager-theme.fasil.in/customization/apps-and-integrations.md): App block support across Voyager, the Custom Liquid escape hatch, and notes on the most common app categories.
- [Branding recipes](https://voyager-theme.fasil.in/customization/branding-recipes.md): Logos, favicon, color, schemes, button radius, grain, dark mode, and typography — everything that makes Voyager look like your shop.
- [Checkout branding](https://voyager-theme.fasil.in/customization/checkout-branding.md): Match the Shopify Checkout to your Voyager theme — colors, typography, logo, and full presets for all three theme styles.
- [Homepage recipes](https://voyager-theme.fasil.in/customization/homepage-recipes.md): Add, hide, reorder, and configure every section that makes up the Voyager homepage.
- [Product page recipes](https://voyager-theme.fasil.in/customization/pdp-recipes.md): Reorder blocks, edit accordions, configure provenance, wire the bespoke CTA, add custom Liquid, enable subscriptions, and connect app blocks on the PDP.
- [Recipes overview](https://voyager-theme.fasil.in/customization/recipes-overview.md): An index of the most common Voyager customizations, with direct links to the step-by-step instructions.
- [Page anatomy](https://voyager-theme.fasil.in/getting-started/anatomy.md): The name of every component on Voyager's home, product, and cart pages.
- [Installation](https://voyager-theme.fasil.in/getting-started/installation.md): Install Voyager from the Shopify Theme Store and prepare it for customization.
- [Introduction](https://voyager-theme.fasil.in/getting-started/introduction.md): Voyager is a premium Shopify theme for considered fashion and lifestyle brands.
- [Quick start](https://voyager-theme.fasil.in/getting-started/quick-start.md): Set up Voyager for your brand in about 10 minutes.
- [Age verifier](https://voyager-theme.fasil.in/interactive-features/age-verifier.md): A splash gate that asks the visitor to confirm their age before the storefront becomes visible. Off by default — opt in for liquor, spirits, and age-restricted brands.
- [Cart drawer](https://voyager-theme.fasil.in/interactive-features/cart-drawer.md): The slide-in cart — how it opens, refreshes, and renders accelerated checkout.
- [Dark mode & film grain](https://voyager-theme.fasil.in/interactive-features/dark-mode-and-grain.md): Two surface treatments that lift Voyager from clean to cinematic — both purely CSS, both free at runtime.
- [Magnetic CTAs & custom cursor](https://voyager-theme.fasil.in/interactive-features/magnetic-and-cursor.md): The two cursor-aware micro-interactions that give Voyager its tactile feel.
- [Offer popup](https://voyager-theme.fasil.in/interactive-features/offer-popup.md): A three-stage email/SMS capture modal — persuasion, capture, then the reward code.
- [Page transitions](https://voyager-theme.fasil.in/interactive-features/page-transitions.md): The navy curtain that rises and falls between pages — Voyager's cinematic navigation rhythm.
- [Quick view modal](https://voyager-theme.fasil.in/interactive-features/quick-view-modal.md): A product picker that opens over the page — variant selection and add-to-bag without leaving the collection.
- [Search panel](https://voyager-theme.fasil.in/interactive-features/search-panel.md): A live, full-width search dropdown with recent terms, popular searches, and a four-product preview grid.
- [Size finder](https://voyager-theme.fasil.in/interactive-features/size-finder.md): A cross-brand size mapping that helps customers pick the right Voyager size based on what they wear elsewhere. Brand matrix is fully merchant-editable.
- [Tab title recall](https://voyager-theme.fasil.in/interactive-features/tab-title-recall.md): Rotate the browser-tab title with editable messages when the visitor switches to another tab — and restore it the moment they return.
- [CSS tokens reference](https://voyager-theme.fasil.in/reference/css-tokens-reference.md): Every CSS custom property Voyager defines — brand palette, schemes, typography, layout, motion.
- [JavaScript API](https://voyager-theme.fasil.in/reference/javascript-api.md): Voyager's public JavaScript surface — global functions, custom events, and data-attribute hooks.
- [Section schema tables](https://voyager-theme.fasil.in/reference/section-schema-tables.md): Every section's settings and blocks — one row per section, with counts and block-type breakdowns.
- [Template reference](https://voyager-theme.fasil.in/reference/template-reference.md): Every template file, the route it serves, its format, and the section(s) it composes.
- [Theme settings reference](https://voyager-theme.fasil.in/reference/theme-settings-reference.md): Every setting in Voyager's settings_schema.json — group by group, with defaults and types.
- [Before / after slider](https://voyager-theme.fasil.in/sections-reference/before-after-slider.md): A draggable image-comparison section. Move a vertical divider left or right to reveal one image over another. Useful for skincare results, ingredient transformations, and styling comparisons.
- [Commerce sections](https://voyager-theme.fasil.in/sections-reference/commerce-sections.md): Cart, collection (PLP), category archive, and the home-page bundle picker.
- [Custom & advanced](https://voyager-theme.fasil.in/sections-reference/custom-and-advanced.md): Custom Liquid section, custom Liquid blocks, and the @app block type for Shopify app embeds.
- [Customer section templates](https://voyager-theme.fasil.in/sections-reference/customer-section-templates.md): The seven editorial customer pages — login, register, account, order, addresses, password reset, activation.
- [Editorial sections](https://voyager-theme.fasil.in/sections-reference/editorial-sections.md): Six content patterns for storytelling: chapters, club, image-with-text, multicolumn, rich text, testimonials.
- [Engagement sections](https://voyager-theme.fasil.in/sections-reference/engagement-sections.md): Newsletter, contact form, blog posts, and the three blog / contact template sections.
- [Header & footer](https://voyager-theme.fasil.in/sections-reference/header-and-footer.md): The header, footer, announcement bar, and the two section groups that bind them across every page.
- [Hero & banners](https://voyager-theme.fasil.in/sections-reference/hero-and-banners.md): Home hero, image banner, and slideshow — the three full-bleed hero patterns in Voyager.
- [Ingredients & usage blocks](https://voyager-theme.fasil.in/sections-reference/ingredients-and-usage-blocks.md): Two PDP blocks that surface beauty/wellness-specific structured data: ingredient lists and application instructions. Reads per-product metafields with a manual fallback.
- [Media sections](https://voyager-theme.fasil.in/sections-reference/media-sections.md): Video, logo list, and map — the three media-led patterns.
- [Product sections](https://voyager-theme.fasil.in/sections-reference/product-sections.md): Main product (15 blocks), featured product, featured collection, new arrivals, related, and complementary.
- [Promo tiles](https://voyager-theme.fasil.in/sections-reference/promo-tiles.md): A 2–4 column grid of image+text tiles with overlay copy. Useful for seasonal collections, limited drops, curated edits, and editorial archive links.
- [Sections overview](https://voyager-theme.fasil.in/sections-reference/sections-overview.md): All 47 sections in Voyager, grouped by purpose. Find a section, see its template availability, jump to its reference.
- [Support](https://voyager-theme.fasil.in/support.md): Get help with the Voyager theme — theme functionality, settings, customization, or installation.
- [Alternate page templates](https://voyager-theme.fasil.in/templates/alternate-templates.md): Voyager's three editorial page variants — About, Lookbook, Contact — and how to assign them.
- [Blog and article](https://voyager-theme.fasil.in/templates/blog-and-article.md): Voyager's editorial journal templates — blog index and article detail.
- [Cart](https://voyager-theme.fasil.in/templates/cart.md): The cart page — line items, accelerated checkout, notes, selling plans, drawer parity.
- [Collection page](https://voyager-theme.fasil.in/templates/collection-page.md): Chip nav, filter sidebar, view-mode picker, product grid — the PLP, in detail.
- [Collection pagination modes](https://voyager-theme.fasil.in/templates/collection-pagination.md): Three ways to handle overflow on the collection page — numbered pagination, a load-more button, or infinite scroll. Merchant chooses the mode from one theme setting.
- [Customer pages](https://voyager-theme.fasil.in/templates/customer-pages.md): Voyager's seven editorial customer templates — and the Classic vs New customer accounts trade-off.
- [Gift card](https://voyager-theme.fasil.in/templates/gift-card.md): The issued-gift-card template — a standalone passport with QR, Apple Wallet pass, and print.
- [Homepage](https://voyager-theme.fasil.in/templates/homepage.md): The six default sections that compose Voyager's home, in the order they appear.
- [Product page](https://voyager-theme.fasil.in/templates/product-page.md): Voyager's block-based PDP — fifteen draggable blocks, complementary and related products, gallery and zoom.
- [Search and 404](https://voyager-theme.fasil.in/templates/search-and-404.md): Search results, the not-found page, and the predictive-search JSON endpoint.
- [Templates overview](https://voyager-theme.fasil.in/templates/templates-overview.md): Every Voyager template at a glance — JSON, Liquid, default sections, and how alternate templates are assigned.
- [Colors](https://voyager-theme.fasil.in/theme-setup/colors.md): The brand palette, four schemes, functional tokens, and how dark mode flips them.
- [Layout & spacing](https://voyager-theme.fasil.in/theme-setup/layout-and-spacing.md): Container width, section pacing, rule weight, card image ratios, and card hover affordances.
- [Logo & favicon](https://voyager-theme.fasil.in/theme-setup/logo-and-favicon.md): Upload your wordmark, set its width, and brand the browser tab.
- [Theme styles](https://voyager-theme.fasil.in/theme-setup/theme-styles.md): Three named presets that swap the whole storefront's palette, typography, and pacing in one click.
- [Typography](https://voyager-theme.fasil.in/theme-setup/typography.md): Body, heading, and accent fonts — pairing them well, scaling them carefully.
- [Common issues](https://voyager-theme.fasil.in/troubleshooting/common-issues.md): Twenty-plus fixes for the questions Voyager merchants run into most often.
- [Frequently asked questions](https://voyager-theme.fasil.in/troubleshooting/faq.md): Thirty-plus answers to the questions Voyager merchants ask before they buy and after they install.
- [Internationalization](https://voyager-theme.fasil.in/troubleshooting/internationalization.md): Shopify Markets, multi-currency, multi-language, RTL, locale files, and money formatting in Voyager.
- [Performance and accessibility](https://voyager-theme.fasil.in/troubleshooting/performance-and-accessibility.md): What's built into Voyager, what merchants control, and how to keep both healthy after going live.
- [Support and changelog](https://voyager-theme.fasil.in/troubleshooting/support-and-changelog.md): How to reach the Voyager team, what's in scope, and the version history of every release.

## OpenAPI Specs

- [openapi](https://voyager-theme.fasil.in/api-reference/openapi.json)