Header & footer

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

{
  "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).

Pins the footer to every page.

File contents

{
  "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 below.

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 <body>. 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.

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 <details>-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 <details> / <summary> 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).
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.

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:

Optional wave-pattern decoration.
Trust strip (4 editable perk lines).
Brand stack: logo + house paragraph, with the first newsletter block optionally floated to the right.
Block grid (merchant-configurable columns).
Bottom row: copyright, coordinate / seal text, legal menu.
Optional “Powered by Shopify” link.

Section settings

Branding

logo

image_picker

Logo for the dark footer. PNG or SVG with light artwork. Falls back to the bundled voyage-logo-white.svg.

logo_height

range

default:"60"

Logo height in pixels. Range 24–120.

brand_text

richtext

Brand paragraph rendered under the logo.

Trust strip

show_trust_strip

checkbox

default:"true"

Show the four-perk trust strip at the top of the footer.

trust_1

text

default:"Made by hand"

Trust line 1.

trust_2

text

default:"Lifetime repair on every garment"

Trust line 2.

trust_3

text

default:"Complimentary worldwide shipping"

Trust line 3.

trust_4

text

default:"30-day returns, free worldwide"

Trust line 4.

Layout

show_pattern

checkbox

default:"true"

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

copyright_suffix

text

Suffix after the copyright line.

coords

text

default:"EST · MMXXVI"

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_powered_by

checkbox

default:"false"

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

title

text

default:"Navigate"

Column heading.

The link list to render. Defaults to the footer menu in admin.

Rich text

title

text

default:"About"

Column heading.

content

richtext

Column body (rich text).

eyebrow

text

default:"Letters from the studio"

Eyebrow above the newsletter heading.

heading

text

Heading above the form. Optional.

placeholder

text

default:"your-email@example.com"

Email input placeholder.

submit_label

text

default:"Subscribe"

Submit button label.

success_message

text

default:"Thank you — your inbox awaits."

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

image_picker

Image to render in the footer column.

link

url

Optional link to wrap the image.

caption

text

Optional caption rendered under the image.

title

text

default:"Follow"

Column heading.

url_instagram

url

Instagram URL. Icon renders only when set.

url_facebook

url

Facebook URL.

url_pinterest

url

Pinterest URL.

url_tiktok

url

TikTok URL.

url_youtube

url

YouTube URL.

url_x

url

X / Twitter URL.

url_linkedin

url

LinkedIn URL.

Payment icons (limit 1)

title

text

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.

title

text

default:"Studio"

Column heading.

line1

text

default:"The Studio, Piano Terra"

First address line.

line2

text

default:"123 Studio Lane · The Studio"

Second address line.

text

default:"care@example.com"

Email. Renders as a mailto: link.

phone

text

default:"+39 02 0000 0026"

Phone. Renders as a tel: link.

note

text

default:"Visits by appointment"

Note under the contact lines.

show_studio_status

checkbox

default:"true"

Show the live studio status row below the contact list.

status_city

text

default:"The Studio"

City label for the status row.

status_voyage

text

default:"Currently sailing · Summer MMXXVI"

Voyager / season status line.

Default preset (block order)

Link list (“Navigate”)
Link list (“Service”)
Newsletter (“Letters from the studio”)
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

initial_state

select

default:"hidden"

On page load. Options: hidden (revealed on scroll), visible (always visible), off (never shown).

show_on_home

checkbox

default:"true"

Show on the home page (template.name == 'index').

show_on_collection

checkbox

default:"true"

Show on collection pages.

show_on_product

checkbox

default:"true"

Show on product pages.

show_on_cart

checkbox

default:"true"

Show on the cart page.

show_on_other

checkbox

default:"true"

Show on all other pages (blog, article, search, customer pages, etc.).

Style

bg_color

color

default:"#002F5B"

Background color.

text_color

color

default:"#F6F4EF"

Text color.

separator

select

default:"dot"

Separator between messages. Options: dot (·), diamond (◆), slash (/), star (✦), anchor (⚓), none.

Entrance & exit animation

entrance

select

default:"slide-down"

Bar entrance when it appears. Options: slide-down, slide-left, slide-right, fade, expand.

exit

select

default:"slide-up"

Bar exit when it leaves. Options: slide-up, slide-left, slide-right, fade, collapse.

Message layout

message_anim

select

default:"marquee-left"

Message layout. Options: marquee-left (continuous left scroll), marquee-right, static (all messages in a row, no scroll).

speed

select

default:"medium"

Marquee speed. Options: slow, medium, fast. Applies only to marquee modes.

Blocks

Message (max 12)

text

default:"Free worldwide shipping"

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 section instead — the announcement bar is single-line by design.

Cross-reference

Getting started · Page anatomy

See how the header, footer, and announcement bar fit into every page.

Theme setup · Layout and spacing

Section spacing, max widths, and the page-level rhythm.

Interactive features · Search panel

The search drawer rendered from the header’s search icon.

Getting started

Theme setup

Templates

Sections reference

Interactive features

Customization

Reference

Troubleshooting & support

Documentation Index

​Header section group — sections/header-group.json

​File contents

​When to edit

​Footer section group — sections/footer-group.json

​File contents

​Header — sections/header.liquid

​Section settings

​Default navigation behavior

​Mobile drawer

​Right-side utilities

​Blocks

​When to edit

​Footer — sections/footer.liquid

​Section settings

​Branding

​Trust strip

​Layout

​Bottom row

​Blocks (max 8)

​Link list

​Rich text

​Newsletter (limit 1)

​Image

​Social media

​Payment icons (limit 1)

​Studio (limit 1)

​Default preset (block order)

​When to use which block

​Announcement bar — sections/announcement-bar.liquid

​Section settings

​Visibility

​Style

​Entrance & exit animation

​Message layout

​Blocks

​Message (max 12)

​When to use

​Cross-reference

Getting started · Page anatomy

Theme setup · Layout and spacing

Interactive features · Search panel

Header section group — `sections/header-group.json`

File contents

When to edit

Footer section group — `sections/footer-group.json`

File contents

Header — `sections/header.liquid`

Section settings

Default navigation behavior

Mobile drawer

Right-side utilities

Blocks

When to edit

Footer — `sections/footer.liquid`

Section settings

Branding

Trust strip

Layout

Bottom row

Blocks (max 8)

Link list

Rich text

Newsletter (limit 1)

Image

Social media

Payment icons (limit 1)

Studio (limit 1)

Default preset (block order)

When to use which block

Announcement bar — `sections/announcement-bar.liquid`

Section settings

Visibility

Style

Entrance & exit animation

Message layout

Blocks

Message (max 12)

When to use

Cross-reference