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.

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 whether secondary links appear in the drawer, desktop header, or both.

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