Header navigation and utilities

The Header section controls your logo, main menu, mega menus, search, cart, wishlist, book CTA, and optional phone or secondary links. Studio Arcana separates **desktop navigation** (inline menu + utilities) from the **mobile drawer** so you can keep the top bar compact on phones.

Desktop layout

• **Logo left, menu center** — default service-studio layout.
• **Logo center, menu below** — editorial layout with a second nav row.
• **Logo center, menu inline** — single-row balanced header when you have fewer top-level links.

Search styles

• **Icon opens search panel** — opens predictive search in a modal (default).
• **Inline bar on desktop** — compact search affordance in the header bar on large screens; mobile still uses icon or drawer search.
• **Drawer only** — hides search from the header bar; shoppers search from the mobile drawer row.

Predictive search suggests products, collections, and pages using Shopify's storefront search API. Enable **Show search in mobile drawer** to add a search row at the top of the drawer.

Utility icons and mobile placement

• **Desktop utility style** — text labels, icons only, or icons with labels.
• **Mobile utility style** — defaults to icons only to save space.
• **Mobile header utilities** — comma-separated list (`search,cart` by default). Other utilities (account, phone, book, wishlist) appear in the drawer unless you add them here.
• **Utilities placement** — keep icons on the primary header row, move them to a slim row **above the primary header**, or show both. Use **Above-primary utility order** and alignment to control that row separately from the primary-row **Utility order**.
• **Book button placement** — with search and cart, at the **end of the primary menu** (keeps the Book button style), or both.

Customer account sign-in

When customer accounts are enabled, the header uses Shopify's **account component** (`shopify-account`). Shoppers sign in from an avatar menu without leaving the storefront. Requires **new customer accounts** in Shopify admin (Settings → Customer accounts). Choose the **Customer account menu** (default: customer-account-main-menu) to match your account navigation.

Phone and secondary menu

• Enable **Show phone link** and optionally override the number; otherwise your store phone from Settings is used.
• Assign a **Secondary menu** for gift cards, policies, or help links.
• Choose **Secondary menu placement**: drawer, beside search and cart, **above the primary header**, or drawer plus either desktop option.
• On desktop, place them **beside search and cart** or in a slim row **above the primary header**, aligned left, center, or right.

Separate mobile menu

Optional **Mobile menu** link list powers the drawer only. Leave empty to reuse the main menu. Useful when desktop IA is deep but mobile should stay short (for example: Services, Book, Shop, Contact).