> ## 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. # Header & footer > The header, footer, announcement bar, and the two section groups that bind them across every page. Voyager's layout chrome is composed of two **section groups** — JSON files that pin a stack of sections to every page via `theme.liquid`. The header group contains the announcement bar plus the header section; the footer group contains the footer. | File | What it is | | ---------------------------------- | ------------------------------------------------------------- | | `sections/header-group.json` | Section group — pins announcement bar + header to every page. | | `sections/footer-group.json` | Section group — pins the footer to every page. | | `sections/header.liquid` | The header section. | | `sections/footer.liquid` | The footer section. | | `sections/announcement-bar.liquid` | The announcement bar section. | Section groups are the Online Store 2.0 way to compose layout-level sections. The merchant edits them in the Theme Editor like any other section, and they appear on every page that includes the group via `{% sections 'header' %}` / `{% sections 'footer' %}`. *** ## Header section group — `sections/header-group.json` Pins the announcement bar above the header on every page. Order: announcement bar first, header second. Both sections render with their default settings; the group itself has no schema settings of its own. ### File contents ```json theme={null} { "type": "header", "name": "Header", "sections": { "announcement-bar": { "type": "announcement-bar", "settings": {}, "blocks": { ... } }, "header": { "type": "header", "settings": {} } }, "order": ["announcement-bar", "header"] } ``` The default `blocks` for the announcement bar are four `message` blocks pre-populated with "Complimentary worldwide shipping", "Summer 2026 is here — Shop the collection", "Lifetime repair on every garment", and "EST · MMXXVI · MILANO". ### When to edit Most merchants will never edit this file directly — they'll edit the announcement bar and header sections from the Theme Editor and the changes save back to the group automatically. Edit the JSON file only if you want to: * Change the default blocks shipped with a new install (e.g. localize the messages for a non-English market). * Add a third layout-level section to the header (rare — typically just the bar and header are needed). *** ## Footer section group — `sections/footer-group.json` Pins the footer to every page. ### File contents ```json theme={null} { "type": "footer", "name": "Footer", "sections": { "footer": { "type": "footer", "settings": {} } }, "order": ["footer"] } ``` Simpler than the header group — only one section. The footer itself has eight block types that compose its content; see the [Footer section](#footer--sectionsfooter-liquid) below. *** ## Header — `sections/header.liquid` Centered wordmark, primary menu on the left, utilities on the right (currency / language / theme / sound / account / search / cart). The header is transparent over the hero on the home page and solid white-with-hairline on every other page; the scroll-aware switch is driven by JS via the `data-scrolled` attribute on ``. **Supports nested menus up to 3 levels** — top-level links with children render as hoverable parent buttons with a dropdown panel; children with their own children render as a column with a heading + nested list. ### Section settings The primary navigation menu. Leave on **Main menu** to use the merchant's standard navigation, or pick a different menu from Online Store → Navigation. ### Default navigation behavior If the merchant has Shopify's auto-generated default menu (links titled "Home", "Catalog", "Contact" in that order), Voyager detects this and renders its own design-intended menu instead — "New Arrivals", "Summer 2026", "Shop" — so a freshly installed theme looks right out of the box. As soon as the merchant edits the menu in admin, the design defaults are replaced by the merchant's links. ### Mobile drawer A `

`-based accordion drawer slides in from the side on mobile. Supports the same 3-level nesting as the desktop dropdown. No JavaScript required for the accordion mechanics — native `

` / `

` handles toggling, keyboard support, and ARIA. ### Right-side utilities The header right cluster contains: * **Currency switcher** — Rendered via `snippets/currency-switcher.liquid`. * **Language switcher** — Rendered via `snippets/language-switcher.liquid`. * **Theme toggle** — `data-theme-toggle` triggers the dark-mode flip. * **Sound toggle** — `data-sound-toggle` toggles ambient sound (off by default). * **Account** — Links to `/account`. * **Search** — Opens the search panel (rendered as a separate snippet, see [Interactive features · Search panel](/interactive-features/search-panel)). * **Cart** — Opens the cart drawer with a live item count. ### Blocks None — the header has no block types. ### When to edit The header is the most-touched section after the home hero. Common merchant edits: * Pointing `menu` at a different link list (e.g. a region-specific menu for a Japanese storefront). * Editing the underlying linklist in Shopify admin to change the primary menu structure. For changes to the right-side utilities (e.g. removing the sound toggle), edit the Liquid file directly — none of the utility icons are schema-configurable. *** ## Footer — `sections/footer.liquid` Block-based footer per Theme Store §3.2 / §5. The merchant adds, reorders, and removes columns: link lists, rich text, newsletter forms, images, social icons, payment icons, and a bespoke studio block. The layout sandwich, top to bottom: 1. Optional wave-pattern decoration. 2. Trust strip (4 editable perk lines). 3. Brand stack: logo + house paragraph, with the first newsletter block optionally floated to the right. 4. Block grid (merchant-configurable columns). 5. Bottom row: copyright, coordinate / seal text, legal menu. 6. Optional "Powered by Shopify" link. ### Section settings #### Branding Logo for the dark footer. PNG or SVG with light artwork. Falls back to the bundled `voyage-logo-white.svg`. Logo height in pixels. Range 24–120. Brand paragraph rendered under the logo. #### Trust strip Show the four-perk trust strip at the top of the footer. Trust line 1. Trust line 2. Trust line 3. Trust line 4. #### Layout Show the wave pattern decoration at the top of the footer. Float the first newsletter block to the brand stack row (next to the logo) instead of the column grid. Preserves the original two-column visual. #### Bottom row Suffix after the copyright line. Seal text. Rendered on the right of the bottom row with a small dot decoration. Menu of legal links (Privacy, Terms, etc.). Renders inline on the bottom row. Show the "Powered by Shopify" link. Off by default. ### Blocks (max 8) The footer supports up to 8 blocks. The default preset ships with four: two link lists, one newsletter, one social. #### Link list Column heading. The link list to render. Defaults to the `footer` menu in admin. #### Rich text Column heading. Column body (rich text). #### Newsletter (limit 1) Eyebrow above the newsletter heading. Heading above the form. Optional. Email input placeholder. Submit button label. Confirmation message. When `float_newsletter` is on (the default), the first newsletter block is pulled out of the column grid and rendered next to the brand stack. Any additional newsletter blocks render normally in the grid. #### Image Image to render in the footer column. Optional link to wrap the image. Optional caption rendered under the image. #### Social media Column heading. Instagram URL. Icon renders only when set. Facebook URL. Pinterest URL. TikTok URL. YouTube URL. X / Twitter URL. LinkedIn URL. #### Payment icons (limit 1) Optional column heading. Renders `shop.enabled_payment_types` automatically — the icons reflect the merchant's actual payment methods configured in Shopify admin. No URLs or images to manage. #### Studio (limit 1) A bespoke block for studio contact details, plus an optional live status row with city / voyage state. Column heading. First address line. Second address line. Email. Renders as a `mailto:` link. Phone. Renders as a `tel:` link. Note under the contact lines. Show the live studio status row below the contact list. City label for the status row. Voyager / season status line. ### Default preset (block order) 1. Link list ("Navigate") 2. Link list ("Service") 3. Newsletter ("Letters from the studio") 4. Social ("Follow") ### When to use which block | Need | Block | | --------------------------------------------------------- | ------------- | | Standard navigation list ("Navigate", "Service", "Help") | Link list | | Free-form copy column (about, mission, address paragraph) | Rich text | | Email capture in the footer | Newsletter | | Trust badge, certification, or campaign image | Image | | Social handles | Social | | Accepted payment methods | Payment icons | | Physical studio contact details + status | Studio | *** ## Announcement bar — `sections/announcement-bar.liquid` Slim horizontal strip above the header. Editable messages, configurable per-template visibility, marquee animation modes, entrance / exit animations, and color customization. JS in `theme.js` handles the scroll-reveal behavior and the body-padding offset so the page slides cleanly when the bar appears. ### Section settings #### Visibility On page load. Options: `hidden` (revealed on scroll), `visible` (always visible), `off` (never shown). Show on the home page (`template.name == 'index'`). Show on collection pages. Show on product pages. Show on the cart page. Show on all other pages (blog, article, search, customer pages, etc.). #### Style Background color. Text color. Separator between messages. Options: `dot` (·), `diamond` (◆), `slash` (/), `star` (✦), `anchor` (⚓), `none`. #### Entrance & exit animation Bar entrance when it appears. Options: `slide-down`, `slide-left`, `slide-right`, `fade`, `expand`. Bar exit when it leaves. Options: `slide-up`, `slide-left`, `slide-right`, `fade`, `collapse`. #### Message layout Message layout. Options: `marquee-left` (continuous left scroll), `marquee-right`, `static` (all messages in a row, no scroll). Marquee speed. Options: `slow`, `medium`, `fast`. Applies only to marquee modes. ### Blocks #### Message (max 12) Message text. The default preset ships with 4 messages: "Complimentary worldwide shipping", "Summer 2026 is here — Shop the collection", "Lifetime repair on every garment", "EST · MMXXVI · MILANO". ### When to use Standard merchant uses: * Shipping & returns reassurance ("Free worldwide shipping", "Lifetime repair"). * Active campaign messaging ("Summer 2026 is here"). * Brand seal / coordinates ("EST · MMXXVI · MILANO"). * Time-limited promos — set `initial_state` to `visible` so the message is loud from first paint, then toggle back to `hidden` when the promo ends. For announcements that need rich content (images, multi-line copy, CTAs), use a [Rich text](/sections-reference/editorial-sections#rich-text--sectionsrich-text-liquid) section instead — the announcement bar is single-line by design. *** ## Cross-reference See how the header, footer, and announcement bar fit into every page. Section spacing, max widths, and the page-level rhythm. The search drawer rendered from the header's search icon.