Navigation, Header & Footer

Pick a premium header template and layout variant, build your top navigation and mega-menus, configure your footer columns and payment icons, and set how the menu behaves on mobile.

Your header and footer appear on every page of your store, so they're worth setting up carefully. Both have their own dedicated editor with a live preview of how they'll look on desktop and mobile.

Screen: Online Store → Theme → Page Layouts, then open Header or Footer from the journey rail. Both editors show a live mock of the header or footer in context.

Premium header templates and layout variants

Your header has two separate configuration surfaces that work together:

• The template gallery (this section) — picks the header's overall structure (one of 11 templates) via a switcher, and its look (a colour/theme recipe for that structure) via a drawer next to a live preview of your storefront header that stays visible the whole time you're browsing.
• The classic Header editor (Desktop / Mobile / Shared modes, described below) — your navigation links, mega-menus, colours, and mobile behaviour. Whichever template and arrangement you pick still renders your logo, navigation links, and brand colours from here — the template gallery changes the shape and skin, not the content.

Screen: Online Store → Theme → Page Layouts → Header, or click Browse Templates from inside the classic Header editor's Desktop mode.

The structure sidebar and the template gallery

Opening Header (or Footer) shows a narrow sidebar on the left. At the top is your current template's colour swatch, then its name as a clickable button with a small dropdown arrow — this is the structure switcher. Below it sits a Templates › link, then your header's bands/tiers, and a pinned Theme Settings entry — the same Content / Features / Advanced controls the old Config tab held (see the table below), just reached from this sidebar instead of a tab strip. Your live storefront preview fills the rest of the screen throughout.

Changing structure. Click the template name (with the dropdown arrow) to open a menu listing all 11 header designs (7 for Footer). Selecting one applies immediately — there's no staging step and no Apply button for this control, so your live preview and your saved structure update together the moment you click. Locked (unpaid-plan) designs show a lock icon and can't be selected; on the v2 theme, unlocked flagship designs additionally show a Flagship pill.

Removing a row (tier). Every row in the sidebar tree except Header Navbar (Announcement, Utility Bar, Sub-nav) has its own trash icon. Clicking it doesn't remove the row immediately — it swaps the icon for a confirm/cancel pair; click the checkmark to actually remove the row, or the cancel icon to back out and keep it. Header Navbar has no trash icon at all — it can't be removed, on any template.

Hiding a row (tier) without removing it. Next to the trash icon, every row except Header Navbar also has a Show / Hide eye toggle — the same show/hide control used on ordinary page sections. Click it to hide the row instead of deleting it: the row stays in your structure tree (dimmed, so you can tell at a glance it's hidden) with all of its saved content intact, and clicking the toggle again brings it straight back with nothing to re-enter. Header Navbar can never be hidden this way, on any template — it's always shown.

Showing a block on mobile or desktop

Blocks you add to a header row are hidden on mobile by default and shown on desktop. You decide per block, so a long block can stay desktop-only while a small one shows on phones too.

These switches apply to blocks you added. The built-in logo, navigation, and search are not governed by them. Whole rows have their own mobile control: the row's menu in the structure tree offers Hide on mobile or Show on mobile (and the same for desktop).

Add Cart, Account, or Wishlist to a header row

The Header editor's Add block dialog lists these as three separate choices in its Commerce group. It no longer offers one combined Cart & account icons choice when you add a new block.

Open an icons block to change what it shows

Select the block under Header Navbar → Content (Start, Center, or End zone). Its settings show a Show list with one on/off switch per icon, plus Cart affordance (Item count, Mini preview, or Opens drawer) when the cart icon is part of the block.

• A block that holds a single icon (for example a block added as only Cart) shows only that icon's switch. The other two icons are not listed, because they belong to other blocks.
• A block that holds several icons (an older combined block) shows a switch for each of cart, account, and wishlist.
• Cart affordance appears only when the block includes the cart.

If you expect a switch for an icon and it is missing, that icon is probably its own separate block in another zone; open that block instead.

Finding Header and Footer controls by task

In the current Store Editor, the right inspector groups Header and Footer controls by what you are trying to change. Select the Header, Footer, a row, or one of its blocks, then choose the relevant Content, Design, or Behaviour lens:

Only groups that apply to the selected subject are shown. Open a group to reach its controls; opening another group in the same panel closes the first, and the editor remembers your open group for that panel and lens during the current session. Nested Header and Footer panels use these same task names, so look under Layout rather than “Slot layout”, and Spacing & sizing or Colors rather than the retired “Spacing & Appearance” or standalone “Appearance” headings.

Use Search this block's controls when you know the outcome but not the group. Merchant terms such as “background”, “font”, “sticky”, “cart”, or “mobile” match both control labels and the task group's related terms. N changed filters the current lens to edited controls; it is disabled when that lens has no changes. On narrow windows, compound inputs wrap inside the inspector instead of creating a horizontal scrollbar, so do not drag the panel sideways to look for a clipped label.

Changing look. Click Templates › to open the gallery drawer. It shows one section, headed Templates, of look cards — colour/theme recipes for the structure you currently have active; switching structure first changes which cards you see here. It has:

Exactly one card shows the Selected badge at a time. Hovering a card (or, on touch devices, its preview affordance) shows a Previewing badge and briefly swaps your live preview to that look without staging it; moving away restores whatever was staged before (or your published choice, if nothing is staged yet).

For the Header specifically, each look card in this drawer renders a real, live miniature of that look — not a flat colour swatch — composited over a photographic hero background, so you're judging the look the way it will actually sit above your homepage's hero image rather than in isolation on a blank card.

Moving a store off its original (legacy) header or footer

A store created before the template picker existed can still be on its original layout, which belongs to no template. The sidebar for such a header shows Header rows unavailable and the line "This header keeps its original layout." Nothing is broken: the storefront keeps rendering that header as it always has.

To move to a template:

1. Open the Store Editor, choose the Header (or Footer) and click Templates ›. The drawer is titled Change template.
2. Read the notice at the top of the Templates section: "Your header uses its original layout. Pick a template and press Apply to switch. Until then your storefront keeps its current header." For the footer it reads "Your footer uses its original layout. Pick a template and press Apply to switch. Until then your storefront keeps its current footer."
3. Below the notice, structure chips (when more than one structure is available) and look cards appear. Because your original layout is not one of them, the drawer opens on the first structure so you have something to browse. Click another chip to see that structure's looks.
4. Click a look card to stage it. The live preview shows it, but nothing is applied yet.
5. Click Apply. Back (or Esc) leaves without switching and your original layout stays.
6. Apply does not publish: it changes your draft only. The storefront changes after you Publish.

Opening the drawer, browsing chips, hovering cards or saving other edits never switches the layout; only Apply does.

The 11 templates: Floating Pill Navbar, Two Tier Utility Bar, Centered Logo Split Nav, Tech SaaS Bar (a SaaS-dashboard-style bar), Serif Luxury Bar, Minimal Hamburger Bar, Retro Arcade Bar, Transparent Overlay, Side Rail, Masthead, and Dept Store.

The 7 arrangements

Arrangement (rearranging the same header structure — logo/nav/actions positions) is a separate control from structure and look, and doesn't live in the template gallery drawer described above. Open the Theme Settings entry in the sidebar, switch to its Design tab, and scroll to (or jump-chip to) the Variant section — each arrangement carries an Arrangement identity chip.

Cart, wishlist, and account icons (Theme Settings)

Every one of the 11 templates ships three matching Theme Settings toggles under Features: Show Cart Icon, Show Wishlist Icon, and Show Account Menu — all on by default. When enabled, the cart and wishlist icons show a live count badge (hidden when the count is 0, capped at 99+), and clicking wishlist while signed out sends the customer to login instead of the wishlist page.

When you add these shortcuts to a Header row, Add block → Commerce presents Cart, Account, and Wishlist separately. See Add Cart, Account, or Wishlist to a header row for the complete setup flow and the behaviour of older combined blocks.

Color Schemes and Type Pairing (Theme Settings)

Two more controls sit in the Theme Settings entry of the sidebar — one for Header, one for Footer — that let you fine-tune colour and font pairing without leaving the template system for the Theme Hub.

Color Schemes. Theme Settings → Color Schemes. The Header page shows one row for the Header bar, plus a second Header panel (mega menu) row on templates whose mega-menu has its own colour axis. The Footer page shows two rows: Footer and Footer bands. Each row has two dropdowns:

Default (no scheme) doesn't mean "no colour" — it means that surface keeps inheriting your store's regular active theme colours exactly as it did before this panel existed. Picking any other scheme overrides that surface's colours independently of your Theme Hub palette. This panel is hidden entirely while your store is still on the legacy (classic, pre-template-picker) header or footer — colour schemes only apply once you've published a premium template.

Ground image. The Header bar, Footer, and Footer bands rows each also have a Ground image (URL) field beneath their dropdowns — a background image for that surface, layered under the scheme colour above. Leave it blank to use the scheme colour only.

Gradient-mesh ground (Header bar, Footer, and Footer bands). Below the Ground image field on the Header bar, Footer, and Footer bands rows is a row of small colour-swatch buttons labelled Gradient-mesh ground (curated presets) — a curated set of abstract gradient-mesh backgrounds you pick with one click, rather than a freeform gradient editor. Clicking a swatch applies it and clicking the same swatch again clears it. A mesh preset and a Ground image URL are mutually exclusive on the same row: picking a mesh swatch clears whatever Ground image URL was set, and typing a Ground image URL clears whatever mesh swatch was selected — so a merchant is never shown both a photo and a mesh swatch as "selected" with only one actually visible on the storefront.

Header Colors. Below Color Schemes on the Header's Theme Settings → Page Style group, a Header Colors section lists individual named colour swatches for the header specifically — in merchant language, not raw token names — for example nav text, a secondary/muted nav text (on templates that use one), one or more accent swatches, an Icon Color swatch, and background/surface swatches. Which exact swatches appear depends on your active template; each one shown is verified to actually be read by that template, so you won't see a swatch that quietly does nothing. A handful of templates also add status-dot swatches (small colour indicators some layouts render). This is different from the Advanced group's Color Overrides list further down the sidebar — that one holds store-wide tokens most of which the header doesn't consume at all; Header Colors is the scoped, verified-useful set for this surface.

Type Pairing. Theme Settings → Typography → Type Pairing. A curated catalog of paired display/body fonts — 62 pairings across four style tiers (editorial, geometric, display, and monospace), for example "Playfair Display + Inter", "Space Grotesk + Space Mono", or a single-family option like "Barlow" — plus a Template default option that leaves the template's own built-in fonts alone. Picking a pairing overrides your store's Theme Hub font choice for that header or footer only.

Sticky Behavior (Theme Settings)

The Theme Settings entry also has its own Sticky Behavior control, separate from the Mobile mode's simple sticky toggle described later in this guide:

When Smart Reveal is selected, an Initial Visibility option (Visible by default, or Hidden) controls whether the header is already shown or already hidden the moment the page loads, before the customer has scrolled at all.

This control is available on every header template. The footer has a more limited version of the same control, named Sticky Behavior, with three choices: None, Always and Reveal at end. A footer can't "reveal" on scroll-up the way a header can, since it sits at the bottom of the page; Reveal at end is its own variant (it makes the footer fixed, see the footer note further down). This is separate from the footer's Back to top button (None / Back to top / Scroll up), which controls the round arrow button; see The Footer Editor.

Header editor: Desktop, Mobile, and Shared modes

The Header editor's Desktop / Mobile / Shared control at the top is not just a preview-viewport switch — it swaps the entire settings form underneath it. Each mode edits a different set of settings and drives a matching live preview on the right:

Spotlight the Header area you are editing

Use Spotlight when a full Header preview makes it difficult to see which row or child block your settings belong to.

Esc clears the current selection and returns you to the page-level view, which removes the cutout. It does nothing while your cursor is in a text field, a dropdown, or an open dialog, so typing never drops your selection; click outside the field first if Esc seems to be ignored.

Spotlight starts on for Header and Footer and off on other pages. Once you switch it, the editor remembers your choice for this store in this browser (it is not saved to your storefront or shared with teammates). The same toggle works on page sections, where it dims everything except the selected section or block.

Spotlight is an editor-only viewing aid: it does not save a style or alter the published header. On a converted older header, it follows the visible child blocks that make up the selected row, so it still produces a usable cutout without silently writing a new row structure into your draft.

Start, Center and End containers

The Header Navbar row always has exactly three containers, Start, Center and End. Header Navbar → Content lists them all, and each container lists everything the header places there: the template's own built-in items (Logo, Navigation, Search, and the Cart & account icons row) together with any blocks you added. The structure sidebar nests the same items under the same three containers, even when a container is empty. Adding, moving, removing or reordering an item never creates a fourth container or an extra header row.

All placement is managed in this one place. The Design tab no longer has a Start/Center/End zone-order editor, and the Header's Behaviour lens no longer has a Components group.

What customers see: items in Start sit at the left of the header, Center items are centred, and End items sit flush at the right edge. Items stay inside their container on the storefront, with no stray vertical scrollbar.

Edge cases:

• Removed items lists only what Restore can bring back. An icon (Cart, Account, Wishlist, and so on) appears under Removed items only when it is switched on under Built-in items and has been hidden. An icon whose Built-in items switch is off, or that your template cannot show, is never listed there. Switch it on under Built-in items first.
• Logo display. Select Logo & Brand Name under Header Navbar (or select Edit on the Logo row) and open Content. Logo display offers Current design, Image, Brand name and Image and brand name. Image shows only the logo image, with no visible brand name or tagline (the name stays as the image's accessible name). Save, then refresh the preview to see the change. Brand name shows text only. Image and brand name shows both. If the text you still see sits inside the logo picture itself, it is part of the uploaded image file.

Built-in items move when you add them

On the Header Navbar row, the header already shows a built-in Search, Cart, Account, and Wishlist. When you add the matching block from Content → (Start, Center, or End) → Add block, the block becomes the one copy: the built-in item is hidden and your block shows in the zone you chose. You never end up with two carts or two search fields.

Other points:

• Logo is locked: its row in the container list shows a lock and it cannot be removed, but it can be moved to another container. In the structure sidebar the Logo & Brand Name part likewise has no hide or remove button.
• Moves are per device. The built-in item is hidden only on a device where your block is actually displayed. If your block is not displayed on mobile, the built-in Cart, Account, Wishlist, or Search stays on the mobile header; the same holds for Desktop. Removing the last block of that kind restores the built-in on each device that had been handed over.
• Search, Cart, Account, and Wishlist are one-of-a-kind. Once one is placed in a zone, its entry in the Add block picker is greyed out and reads "Already placed — edit or move the existing item." Edit or move the placed block instead of adding a second.
• A Search that was moved or removed shows under Removed items. Open Header Navbar → Content; the Removed items list shows a Search that has been handed over to a block or that was hidden. Select Restore to bring it back. Placement lives only in Content, so there is no second list in Design to disagree with it.
• A draft saved before this change that hid Navigation or Search through the old part toggle opens with those items already listed under Removed items. Opening such a draft only changes the display; it is not rewritten until you make an edit.
• This move behaviour applies to the Header Navbar row only. On Announcement Bar, Utility Bar, and Secondary Navigation, blocks are added alongside the row's content, and the hint reads "Added blocks share this row with its main content. Remove a block to remove just that element. Use Design to switch to a blocks-only layout."
• Keep this row's built-in layout (under Design) is on by default. Its helper text reads "Your blocks share one row with its built-in content." Turn it off and it reads "Only your added blocks appear in this row; built-in content is hidden." Each container's layout choice, Arrange items (Side by side or Stacked), now sits under that container in Content.
• A Secondary Navigation row with nothing in it shows "No secondary links yet. Add links to show this row on your storefront." and an Add links button.
• Which blocks the Add block picker offers depends on the row: Announcement Bar offers Announcement and Free-shipping progress; Utility Bar offers contact, social links, store hours, utility links, language and currency, and pincode check; Header Navbar offers Search, the Cart / Account / Wishlist choices, a button, divider, spacer, text and paragraph; Secondary Navigation offers Category links.

Set the header per device: Desktop, Tablet, Mobile

The Header Navbar's Content panel and its Design slot panel carry a Navbar device control with three buttons: Desktop, Tablet, and Mobile. Block placement, Start/Center/End membership, and Login/Sign up visibility are saved per device, so a layout you build for one device does not move anything on the others. Tablet is the band between 768px and 1023px wide.

Add a block to a specific zone

Each of the Start, Center, and End containers has its own Add button. It opens the block picker already targeted at that zone, so the block you choose lands there for the device you are editing. The picker lists the regular blocks plus four built-in header actions:

A built-in entry that cannot apply on the device you are editing is shown disabled with the reason beside it, for example "On mobile, navigation lives in the Mobile menu" (Navigation is unavailable on Mobile) and "On desktop, links show in the navigation bar instead of a Mobile menu" (Mobile menu is unavailable on Desktop). Login and Signup are available on all three devices.

In the Built-in items group, a row is locked, with the reason "Already added as a block in a container on this device. Remove that block to use the built-in item.", when an authored block already shows that action on the device you are editing. Remove the block to unlock it. The CTA button is never listed as a built-in item: add it with Add block in a container (it sits in the End container by default).

Login and Sign up as movable blocks

By default the header draws its native Login and Sign up pills in the template's own position. Every header template that draws these pills lists them as Login and Sign up rows in the Header outline, including Two-tier utility bar, Department store, Masthead, Side rail, and Transparent overlay, and including stores whose saved header has empty rows. The one template with no native pills is Centered logo split nav, so it lists no rows. Opening the rows changes nothing until you hide or move one.

To place a pill yourself instead:

An unmoved native pill has no label or style fields; selecting it shows the notice "Move this button into a zone to customise its label and look." Both buttons only show to signed-out visitors, and only when the store's login/signup is enabled. When both native pills are hidden on a device and no Login/Sign up block is placed, signed-out visitors get the single Account icon instead.

Click header parts on the canvas, and review the live version

The canvas toolbar's Single and Compare buttons choose between one device preview and all three side by side. On the Header, a part you click in either view is selected, including parts that render only on mobile; a part that is not shown on any device cannot be clicked. Clicking the announcement bar, the utility bar or the main navbar background selects that row in the rail and opens its inspector, and clicking the logo selects Logo & Brand Name. Esc pressed while the preview has focus is passed to the editor and clears the selection, just as it does when the editor has focus. Selecting a part keeps the Spotlight cutout on the whole Header rather than shrinking it to that part, so the next part you click is still reachable. A dimmed area still shows the hint described above.

If the top bar shows Live — draft differs on the Header, select it to open History. There, Restore live version opens a Restore live version? confirmation and replaces your draft with what is published. If the live version cannot be fetched, History shows "The live version could not be loaded. Close and reopen History to try again." and the button stays disabled.

Header parts and row panels

Every header template — all 11 designs, including an older header that was converted rather than built from scratch — lists the same four core parts under Header Navbar in the structure sidebar: Logo & Brand Name, Navigation, Search, and Call-to-action (alongside Cart, Account, Wishlist and any other blocks you added). The editor's sidebar calls the main row Header Navbar, and this guide does too; older screenshots or notes may call it the "Main Bar". The parts are a way to reach each piece's settings; showing them does not add rows or blocks to your saved header, and just opening the editor changes nothing on your storefront.

The sidebar lists Cart, Wishlist, Account, and Language / currency only when the header would really show them, using the same rules as your storefront: the Theme Settings toggle and Store Branding switch for that icon are on, the item is not listed under Removed items in Header Navbar → Content, and the Header Navbar row is displayed. Account can also be absent on designs that show their own Log In and Sign Up buttons while the customer is signed out. Language / currency needs a locale label or current language/currency set under Utility Bar. A block you added yourself appears as its own row regardless of this. If an item you expect is missing from the sidebar, it is missing from the storefront for the same reason; the four core parts above are always listed.

Utility Bar, Announcement, and Header Navbar rows use the inspector's Content, Design, and Behaviour tabs.

Changes to the Utility Bar and Menu links fields save as you type. Announcement row fields work differently: they go into your draft and reach customers only when you publish the Header (see Announcement row: draft saving, button, and background image). Announcement rows on a grid-style announcement layout also show the announcement zones editor under Content.

Announcement row: draft saving, button, and background image

Select Announcement Bar in the structure tree of Online Store → Theme → Page Layouts → Header. The panel has three tabs: Content, Design, and Behaviour.

These fields now live in your draft: Message, Link, Display behavior, Messages, Counts down to, Timer label, Button label, Button link, Button opens in, Alignment, Background image, Show separator line, Let customers close the bar, and Keep visible while scrolling. Earlier versions saved the announcement row to your live store the moment you typed. Now you can edit and check the preview without anything reaching the storefront, and the changes ride the same Save, Publish, and History flow as the rest of the Header draft.

After you apply a store template. Open Announcement Bar in the Header structure tree. If the template includes announcement text, Message (Content tab) already shows it; before this fix it appeared empty. Whatever you type in Message or the other announcement fields overrides the template's value, and your edit is kept. Saving any Header change also keeps the rest of the template's header settings, such as the logo size, header icons and announcement row, instead of dropping them.

Menu links. The Navigation part and the Header Navbar row share one Menu links editor, so a link you change in one place is the same link in the other. Each row has a Show toggle and a More actions menu with Edit, Duplicate, Move up, Move down, Make dropdown, Make mega menu, and Delete (Protected link entries cannot be deleted). Add link at the bottom opens the same label-and-destination form. The Navigation part also has Menu source (Store menu or Categories), Item style (Links, Pill, Underline), Active item style, Open menus on (Hover or Click), and When links do not fit — the same options described under Header navigation.

Edit mega menu. A link that already carries a mega panel shows an Edit mega menu action in two places: in its More actions menu (next to Make mega menu), and as an Edit (link name) mega menu button under the list in the Navigation part. Both open that link's mega panel settings directly. For a link with no mega panel yet, use Make mega menu first. The master switch under Theme Settings → Features → Mega Menu must be on, as described in The Mega Menu master switch.

Per-section Design and header-wide looks

Header Design is split by section, so a colour you set on one row does not repaint the others.

Colour the Secondary Navigation or Utility Bar

Setting the Secondary Navigation colours never changes the Utility Bar colours, and the other way round. Neither changes the Header Navbar row.

Header navigation (Desktop mode)

Open Header from the Page Layouts journey rail, then make sure the mode switcher at the top is set to Desktop.

Navigation links

Select Online Store → Theme → Page Layouts → Header → Header Navbar → Navigation. The compact Menu links list contains every built-in and custom destination in its storefront order. Select a row to edit it; use its drag handle to reorder it, its switch to keep it saved but hidden, and More actions for the non-drag alternatives.

The destination text appears when a row is hovered or focused. A protected built-in link also shows a lock: its visibility switch and Delete action are disabled, so a required store route cannot be hidden or removed accidentally.

Secondary navigation row

Use Secondary Navigation for a separate link row below the Header Navbar. It is authored independently from Header Navbar → Navigation → Menu links: showing this row does not copy or inherit the main menu.

Utility Bar

Contact details and quick links shown in a slim strip above your main navigation. Every one of the 11 header templates can carry a Utility Bar row today — it isn't limited to Two Tier Utility Bar, Masthead, and Dept Store any more. Side Rail renders it as its own strip alongside the vertical column rather than nesting it inside the rail (the rail has no horizontal "above" to stack a strip on top of), and Transparent Overlay renders it as part of the same floating bar that solidifies on scroll. Two Tier Utility Bar, Masthead, and Dept Store still have their own bespoke, hand-styled strip layout (unchanged); the other 8 templates render a shared, generic Utility Bar strip.

Screen: Online Store → Theme → Page Layouts → Header, then select the Utility Bar row in the sidebar tree — it's only present once you've added the row (Two Tier Utility Bar, Masthead, and Dept Store carry it natively from the moment you switch to that structure; on any other template, add it via the Add tier (+) control in the sidebar, or the Guided setup dialog's Rows step above). The fields below render directly in that panel and autosave — there's no Save button on this panel; each edit is saved automatically about 600ms after you stop typing, and a small Saving spinner next to the "Utility bar" heading confirms it's in flight.

Each list field (menu, account, social links) uses the same Add link row-editor as Utility policy links: type a label and URL, click Add link, and the new row appears immediately below with its own delete control. There's no limit enforced in the editor UI, and rows autosave the same 600ms-after-you-stop-typing way every other field on this panel does — there's no separate save step per row.

Whether a rendered header actually displays these fields today depends on your chosen template's render mode. As of this write-up, the shared Utility Bar strip (all templates except Two Tier Utility Bar, Masthead, and Dept Store) renders these seven fields' underlying data through its preset variant switch (Contact strip / Menu strip / Selectors strip / Social strip / Split / Centered message) — pick the variant matching the field group you filled in (e.g. fill in Utility menu links and choose the Menu strip variant to see them appear) rather than expecting every field to render at once regardless of variant. If a field you filled in isn't showing up, check the Utility Bar row's Style controls for the variant selector first before assuming the save didn't work.

Additional content items (2026-09-02). These fields sit below the fields above, in the same panel.

Add a delivery pincode check to the Utility Bar

The Delivery pincode check block lets a customer test a six-digit delivery pincode without leaving the page. It is a Utility Bar block only: the editor does not offer it on Announcement, Header Navbar, Sub-nav, rail, flyout, or mega-menu surfaces.

Announcement

A one-line bar across the very top of your header — free shipping, a sale, a delivery cut-off. It's available on every one of the 11 header templates, including Transparent Overlay and Side Rail (the two templates that don't otherwise use the tier system) — add it the same way as any other row: the Add tier (+) control in the sidebar, or the Guided setup dialog's Rows step.

Screen: Online Store → Theme → Page Layouts → Header (mode switcher set to Desktop), just below Utility Bar (if present — Announcement doesn't require a Utility Bar row to also exist). If your store uses a premium header template, this section instead shows an Edit Header banner that takes you into the page editor — open HEADER from there and select the Announcement row in the structure tree on the left; it's the same fields either way.

Compose linked rotating announcements

Use an Announcement block when each rotating message needs its own destination rather than one shared link for the whole bar.

Move the built-in announcement into a zone

When a retained Announcement Bar row has an Announcement block in its Start, Center, or End zone, the row's own message (including a Marquee, and its pause control) is shown inside the first visible Announcement block instead of at the row's default position, so it appears once, in the region you chose. Only the first visible Announcement block in the row is drawn this way; further ones in the same row are not rendered while Keep this row's built-in layout is on. The message shown is the row's own (set under the row's Content); the block's own Message fields are not used while the row's built-in content is retained, and if the row has no message of its own the block shows nothing. To show the block's own messages instead, turn off Keep this row's built-in layout under Design. Removing the block returns the message to its default position.

Bar geometry. Four more fields, below Alignment in the same group, controlling the bar's own size and spacing rather than its content:

Button (optional).

Bar behaviour (optional).

Ground image (optional). A background image for the bar itself.

Inline logo / mark (optional). A small image shown beside the message, separate from your main store logo.

A freshly added Announcement tier starts with all Announcement fields blank, including Logo URL (optional) and Logo link URL (optional). A logo destination from a previously configured or removed Announcement tier is not carried into the new tier; enter it again if the new logo should be clickable.

Announcement & Utility Bars as Their Own Rows (Layout Axes)

By default the Announcement and Utility Bar rows above render inline with your header, folded into the same strip they've always used (Legacy). A separate opt-in switch turns them into their own full-width bands stacked around the Header Navbar instead, and unlocks eight more Layout Axes controls that only make sense once the bars are separate rows.

Screen: on your header's Config panel, open the Layout tab and scroll to Layout Axes. The master switch is:

Once Stacked is selected, eight more Layout Axes controls become interactive (they render disabled, with a small italic hint underneath reading Requires "Announcement & Utility Bars as Their Own Rows" set to "Stacked", whenever the switch above is still Legacy):

| Top Bar Position | Own row above (default) / Below Header Navbar / Inline with Header Navbar / Hidden | Where the Utility Bar row sits. "Inline with Header Navbar" folds it into the header's action-icon area instead of giving it its own band, and is always hidden on mobile regardless of the "Show on mobile" control below | | Top Bar Content | Contact info (default) / Menu / Selectors / Social / Split / Centered message | Which Utility Bar fields show, and how they're grouped left/centre/right. Contact info is byte-identical to today's Utility Bar (Contact phone, Contact email, Location address, Locale label, Utility policy links only). The other five options draw from those same fields plus Menu links, Account links, Social links, Current language, Current currency, and Message (documented above) — see the callout below for exactly which fields each variant uses | | Use full width | Off (default) | Lets the Utility Bar row span edge-to-edge, keeping only a slim inner gutter so the end items never sit flush against the browser edge | | Show on mobile | On (default) | Whether the Utility Bar row also renders on the mobile header. Only this row is affected — the Header Navbar's mobile behaviour never changes | | Keep visible on scroll | Off (default) | The Utility Bar row sticks to the top of the viewport as the customer scrolls | | Show separator line | Off (default) | Adds a bottom border under the Utility Bar row |

Top Bar Style Axes (Layout Axes)

A further 14 Layout Axes controls (2026-09-03) restyle the Utility Bar row itself — scrolling/paging behaviour, typography, a border set, and icon styling. They live in the same Layout tab, Layout Axes list, directly below the eight controls above.

On a Legacy-row header, all 14 share the same gate as the eight controls above: they render disabled until Announcement & Utility Bars as Their Own Rows is set to Stacked, with the same Requires "Announcement & Utility Bars as Their Own Rows" set to "Stacked" hint underneath. On a tier-stack header, all 14 are the exception described in the callout at the top of this section — they render enabled with no hint and restyle the stacked Utility Bar row directly, even though the master switch that normally gates them is hidden on that header.

Display mode

Typography

Border

Icon

Bar Height (Layout Axes)

The header's own Header Navbar has a height field in its Layout Axes list — every template except Side Rail shows it, labelled to match that template's own vocabulary for the bar (for example Floating Pill Navbar calls it "Pill Height", Masthead calls it "Section Ribbon Height", and every other template calls it "Header Height" or "Main Bar Height").

Screen: the same Layout tab's Layout Axes list as Spacing Rhythm and Top Bar Style Axes above.

Search Style (Layout Axes)

A separate control changes how the search box itself is presented when Search is enabled.

Screen: the same Layout tab's Layout Axes list as above.

Logo Height (Layout Axes)

Two ways to size your logo inside the header bar — an exact pixel height, or a percentage of the bar's own height so the logo scales automatically if you later change the bar's height.

Screen: the same Layout tab's Layout Axes list as above.

Space After Logo

The Header's Layout Axes list has Space After Logo (0-96px, steps of 2; blank keeps the design's own rhythm), the gap between the logo and the navigation. It is hidden, not dimmed, on the centred-navigation and stacked header arrangements, where the navigation sits in the centre and a gap after the logo does not apply. If you do not see it, check the header arrangement.

Edit the Header Brand block

Go to Online Store → Theme → Page Layouts → Header → Header Navbar. In the navbar slot layout, select Edit logo on the Brand block. The inspector splits the block's controls across the same task lenses used elsewhere:

If no store name exists, the Content lens says No store name set; select Change in Site-wide → General and enter it there. Logo size (16 to 240 px) is enabled whenever the header has a logo to draw: an image set on the header itself, a logo in the Header Navbar's unsaved branding draft, or the store's saved logo from Site-wide → Branding. With none of those it stays disabled, with the prompt Upload a logo in Site-wide → Branding to change image size. Upload the shared asset there, return to the Brand block, set the display and sizes, then select the top-bar Save action.

Legacy header logo image (Media tab)

The legacy template picker also has a template-specific logo-image override, independent of the current Store Editor Brand block above and of your footer logo. Swapping this legacy override does not upload or replace the store-wide logo.

Screen: open Header from the Page Layouts journey rail, select your header template, then switch the picker's sub-tab row from Content to Media.

The Mega Menu master switch (Theme Settings → Features)

Before authoring any mega or disclosure panel, there's one store-wide switch that has to be on: Online Store → Theme → Page Layouts → Header → Theme Settings → Features → This template → Mega Menu. It's a plain on/off toggle, on by default for every store that hasn't touched the Features list before.

Mega panels: a multi-column dropdown with a promo image

Mega panels are configured from the link they belong to; there is no separate Mega Panels list below Menu links, and there are no per-link Configure buttons anymore. Go to Online Store → Theme → Page Layouts → Header → Header Navbar → Navigation → Menu links, then use either entry path:

• While adding or editing a link with a stable destination, set Opens to Mega panel.
• On a saved link, open More actions → Make mega menu.

After the link is saved, its row shows a Mega indicator. Once the panel has authored content, selecting that indicator opens the same panel editor directly. The selected mega panel also opens on the canvas automatically while you edit it, so you can see the columns and image tile without turning on Show open. Leaving the panel selection returns the canvas to its normal interaction; Show open remains available when you deliberately want the panel held open.

A separate Mega Panel Width control (Card / Full Width / Full Bleed) lives in Theme Settings → Layout, not inside the per-link panel editor — it applies to every mega panel on your header at once, controlling how wide the dropdown panel renders relative to the page: Card keeps it a contained width, Full Width stretches it to the header's own width, and Full Bleed stretches it edge-to-edge of the browser viewport.

Mega-panel image tile captions, open icon panels and sticky footers

Disclosure panels: a second, richer dropdown type

The same editor supports Dropdown panel, Mega panel, Side drawer, Full-screen takeover, and Side rail. It opens when you choose one from the link's Opens control, or when you choose Make dropdown or Make mega menu from More actions. It can layer on top of, or replace, a link's legacy mega panel data.

Screen: Online Store → Theme → Page Layouts → Header (Desktop mode), or the page editor's Main Bar → Navigation → Menu links. Select a saved row to edit Opens, or use that row's More actions menu.

The editor now opens as a wide (640px) side drawer rather than mounting inline in the narrow settings rail, so there's real room to work — organised into three sections plus a collapsed Advanced accordion:

How it opens

Appearance

The visible layout controls for this panel — column/tile spacing and similar presentation settings. Below them, an Advanced accordion (collapsed by default) holds the finer, less commonly touched geometry controls: corner radius, minimum height, and panel width/max-width in pixels — these used to sit always-visible in this card; they're tucked away now so the everyday controls aren't crowded by settings most stores never need to touch.

Also inside Advanced: a Show dividers between columns toggle. Off (the default) shows no divider at all — an unset panel renders exactly as it always has. Turned on, it draws a thin vertical rule between each column, and — once a panel has enough columns that they wrap onto more than one row (a narrow panel width, or many columns at once) — the same toggle also draws a horizontal rule between the wrapped rows, so every row reads as visually separated from the next. It's one switch driving both the vertical and horizontal rule; there's no separate control for each. Has no visible effect on a single-row panel with only one column, since there's no second column or row for a rule to sit between.

Panel content

The drawer's footer has Cancel, Save panel, and — once a panel exists for this link — a Remove disclosure panel button. If you try to close the drawer (via the backdrop, Escape, or Cancel) with unsaved edits, it shows a confirm prompt — "Discard unsaved changes? You have changes to this panel that haven't been saved. Closing now will lose them." — so an accidental dismiss doesn't silently drop your work.

Featured products in a header block

A Featured products block shows product cards from one category inside the header. It is available on the header only: never in the footer, and not on every header row.

Add the block

On the storefront, customers see that category's products as cards with the product image, name, and price, each linking to the product page (a card with no image just omits it). The storefront fetches only the categories your header uses, and shows no more than Number of products cards.

Featured products in a mega-menu panel

A link's mega panel has its own Featured products setting. Open it from Online Store → Theme → Page Layouts → Header: on the Header Navbar row, use the link's More actions → Edit mega menu (or the Edit (link name) mega menu button under the list in the Navigation part). In the panel settings, Featured products is a category picker, the same one the block uses. The help text reads "Products from this category are shown in the panel." Choose a category and it is saved as a category; a panel saved earlier with a collection still loads and shows that entry by name, and is rewritten as a category the next time you pick. The panel does not expose Number of products or Heading (optional); those two are set only on the block above. The Featured products and Promo tile controls show only for a legacy mega panel; a link whose panel was authored as a dropdown or navigation panel does not show them there.

Edge cases

• Nothing renders until a category is chosen. A freshly added block shows nothing on the storefront until you pick a Category.
• Not on every row. The Add block dialog for the Announcement Bar, Utility Bar, and Secondary Navigation rows does not list Featured products.
• Not in the footer. The footer's block picker never offers it.
• Categories only. Neither the block nor the mega-panel setting has a collection picker; collections are categories on this platform, and an older saved collection is shown by name and saved as a category on your next pick.
• A mega or dropdown panel that already carries a featured products setting, including one converted with Make dropdown (see above), keeps it.

Each link, inside a column, can also carry an icon and a trailing icon (picked from a fixed icon set — not free text) and a numeric count badge. Columns and their links can be reordered by drag handle.

Category strips: a row of square image tiles inside a disclosure panel

A separate block from the promo image tile above — a full-width row of several small square (or custom-shaped) image tiles side by side, for a "shop by category" strip inside a mega-style panel. Available in the same panel editor opened from Opens or the link row's More actions menu, below the columns/image-tile controls, as Category strips.

All three geometry fields (gap, height, min width) are blank by default, so an untouched strip renders with the same spacing it always has — filling them in is optional fine-tuning, not a required step.

Zone layout: reordering what sits at the start, centre, and end of the bar

Before arranging existing blocks, you can add a missing Search or CTA child to the Main bar of a converted older header. Select Header Navbar in the structure tree, select Add block, then choose Search or CTA button. The new child is placed in the End zone and selected immediately.

• Search → Content has Placeholder and Search in (Current design, Everything, Products, or Categories); Design has Presentation (Current design, Icon, Overlay, Inline field, or Expanded bar); Behaviour has Search suggestions.
• CTA → Content has Label and Link; Design has Style (Current design, Primary, Secondary, or Plain); Behaviour has separate Show CTA switches for desktop and mobile.

Use the child's remove/hide action if you added the wrong block. If Add block does not offer a type, that child already exists or is not legal for the selected header structure; edit the existing child instead of trying to create a duplicate.

The Header Navbar row also has its own Zone layout control, below the navigation content described above — a separate mechanism from the Arrangement picker described earlier in this guide. Where Arrangement swaps between whole pre-built layouts (Standard, Centered Split, Stacked, and so on), Zone layout lets you drag individual elements (brand/logo, navigation, and each action icon) between three tracks — Start, Centre, and End — and reorder them within a track, without changing which overall arrangement you're on.

• Drag an element's handle to move it within its track, or use its ⋮ Move to… menu to send it to a different track.
• The Centre track holds exactly one element at a time — dropping a second element there is refused with an inline message ("The centre track holds one element").
• Once you've moved anything from its default position, a Custom arrangement badge appears next to the Zone layout heading so you can tell at a glance that this header no longer matches its arrangement's stock layout.
• A separate Order within Actions control appears once the End track holds action items — it lets you set the relative order of the action kinds themselves (cart/wishlist/account, Sign Up, the CTA button group, Search, Log In, and anything else), independent of which track they're in.

Configure each action block separately

In Header Navbar → Design, expand Action blocks. Use the Desktop/Mobile switch at the top of the panel first: the list is device-specific. Cart, Account, Wishlist, and Language / currency appear as separate rows, including on converted headers whose saved structure predates the separate catalogue.

Language/currency begins as a label and stays hidden if the selected header does not currently enable its locale capability; select Show to opt it in, then choose its Display treatment. Use the row's reset action to restore its default visibility, display, and position. These controls change the header draft only; select Save Draft and Publish before expecting customers to see the new action set.

When your links don't fit: the "More" menu

There is no setting for this — every storefront header handles it for you. If the links you've added are wider than the space the header template gives the navbar, the navbar does not cut them off or hide them behind an invisible scrollbar. Instead:

1. The links that fit stay on the bar, in your configured order.
2. The remaining links move into a More dropdown at the end of the navbar.
3. Clicking More (or focusing it and pressing Enter / ↓) opens a panel listing them, with their badges intact. Esc closes it and returns focus to the More button; ↑ / ↓, Home and End move between items.

This is re-evaluated live as the browser window changes width, so the same store shows more links on a wide monitor and fewer (with a longer More list) on a narrow laptop. No link is ever dropped — bar plus More is always your full list.

When your icons and buttons don't fit: the actions "More" menu

The header's action cluster — search, wishlist, cart, account, Log In / Sign Up, and the header CTA button, free-shipping note and divider from the Config tab — gets the same treatment, and again there is no setting for it. If the cluster is wider than the space the template gives it, the controls that don't fit move into their own More dropdown at the right end of the bar rather than wrapping onto a second line (which a fixed-height header bar has no room for) or running off the edge of the page.

Which controls stay on the bar is not simply "the first ones". They are dropped in this order, last to be dropped first:

So on a crowded bar your customers keep the cart icon and see a More chevron beside it; the free-shipping note and the Log In link are what move inside. Clicking More (or focusing it and pressing Enter / ↓) opens the panel; each control works there exactly as it does on the bar, and Esc closes the panel and returns focus to the More button. Nothing is ever removed — bar plus More is always your full cluster, and it is re-evaluated live as the window resizes.

Header appearance

This card belongs to the legacy header editor (the pre-template-picker classic header). In the current Store Editor, use the Header's Design and Behaviour lenses described in Finding Header and Footer controls by task.

For pinning the header to the top on scroll, see Sticky Behavior on the Theme Settings entry, above.

Header editor: Mobile mode

Switch the mode control at the top of the Header editor to Mobile to edit your mobile navigation, slide-out menu, and mobile header bar. This replaces the entire form on the left with the same task groups as the Behaviour tab's Mobile group (Navigation, Mobile header, and Menus); the preview on the right switches to the mobile storefront.

Navigation style

Slide-out menu

Mobile header bar

Mobile Menu (Layout Axes)

Seven sizing/style controls for the mobile slide-out/dropdown menu panel itself, on the header's Config → Layout → Layout Axes list:

Footer

Open Footer from the Page Layouts journey rail, or click Browse Templates from inside the classic Footer editor to jump straight to Online Store → Theme → Page Layouts → Footer (same sidebar-plus-gallery shell described under The structure sidebar and the template gallery above — a structure switcher at the top of the sidebar, a Templates › link that opens a look-only drawer, and a Theme Settings entry for the old Config-tab controls).

Using the newer Store Editor instead? Its footer has a different layout (Footer Sections list, Change template, arrangements, composing with blocks); the step-by-step guide is The Footer Editor.

Footer Looks: picking a look now sets its own type voice, not just colour

Click Templates › to open the same look-only drawer described under Changing look above — one Templates section of look cards for your currently-active footer structure. Clicking a card stages it into your preview the same way it does for the header.

For the footer specifically, a look now carries its own art direction, not just colour: picking a look card can set its own heading weight, heading capitalisation, heading letter spacing, link weight, and text scale (the same five typography controls under Footer Type above), so two looks on the same footer structure can read in genuinely different typographic voices — a tight, uppercase, tracked-out small-type look next to a looser, larger, sentence-case one — not only different colours.

Footer arrangements: 5 options

Like the header, arrangement is a separate control from structure and look — it doesn't live in the template gallery drawer. Open the Theme Settings entry in the sidebar, switch to its Design tab, and jump to the Variant section for 5 options that rearrange the same footer content without changing what it contains:

Layout and content

Managing footer bands: reorder, duplicate, change type, remove

At the top of the Footer Section list (Online Store → Theme → Page Layouts → Footer, structure sidebar) sits a + button that opens the Add Footer Section menu. It's disabled, with a short caption underneath it — "All sections this template supports are added — delete one to add another." — once you've added every band type your current footer template supports. If your template supports none at all (a small number of templates have no addable bands), the caption instead reads that the template "doesn't support additional sections" and tells you to switch structure to add one. Hovering the disabled button also shows the same reason as a tooltip, and if you reopen the menu before it's fully exhausted, each already-used or unsupported type in the list shows its own reason ("Already added" / "Not supported by this template's layout") directly under its label, not only on hover.

Each row in the Footer Section list carries its own row controls, to the left and right of the row's name:

All of these save automatically, the same as any other band-row edit — there's no separate Save button for reordering, duplicating, or changing a band's type.

Link groups: custom columns inside the Link Columns band

Selecting the Link Columns band shows its column-body fields (Link toggles and Column Body Text — see Link toggles and Column Body Text further down this page) and, below them, a separate Link groups editor for building your own custom columns of links or text, in place of that band's default columns.

Each item inside a group has its own controls:

Call to Action band

Call to Action is a footer band type — add it from the same + Add Footer Section menu (or Change type menu) described above. It shows a headline, subtext, and up to two buttons (or an email signup field instead of a button), and renders nothing at all until at least one of its fields is set.

Screen: Online Store → Theme → Page Layouts → Footer, structure sidebar → select (or add) the Call to Action band:

Category Links: a multi-column link band for the footer (FE-04.2)

Category Links is an eighth band type, available on all 7 premium footer templates from the same + Add Footer Section menu (or Change type menu) described above.

Screen: Online Store → Theme → Page Layouts → Footer, structure sidebar → + Add Footer Section → Category Links. This opens the band's own settings panel:

Each group has:

Each item inside a group has a Link/Text kind selector: Link items get a Label and a URL field; Text items get a single free-form Text value field with no link behaviour. Every item also has a drag handle (reorder within its group) and a delete icon.

Per-band task groups

Selecting a band opens its settings panel; below its content fields (if any — some band types have none), the style controls are split by merchant task. Spacing & sizing holds padding and gaps, Shape & borders holds corner radius, and Colors holds the band background. All are optional and independent per band:

Clearing a field (deleting the number, or picking Default on Corner radius) removes that override entirely — the band falls back to the surrounding Footer bands scheme, exactly as if you'd never touched it. The canvas updates as you edit; select the top-bar Save action to persist the Footer draft.

Composing a Footer Section with blocks

Every footer band can also be built from smaller content blocks — image tiles, promo cards, logo rows, and more — the same block-composition idiom used for header rows (see Adding blocks to a header row above), applied to one band at a time instead of a zoned row. Select a band (Online Store → Theme → Page Layouts → Footer, structure sidebar) to open its settings panel; use the Components group for composition controls:

Block types offered on a footer band. Clicking Add shows only the block types this platform's renderer actually draws for a footer band — no type is ever shown disabled or "coming soon." As of this wave that list includes, alongside the existing link/utility/commerce block types also used on header rows:

Styling one band, group, or link: the Style tab

Everything above this point — Color Schemes, Footer Type, and the band composer's own blocks — lives behind a Config view of the Footer editor's sidebar settings panel. A second view, Style, sits next to it and is where you go to style a specific band, link column, or single link, instead of the whole footer at once.

Screen: Online Store → Theme → Page Layouts → Footer. Above the settings panel on the right of the structure sidebar, two chips read Config and Style — click Style to switch. The Style panel shows its own row of section chips: Type, Colour, Spacing, Background, This selection, and Show and hide.

Type. A Footer Typeface select at the very top of the panel (blank/"this page's own typeface" by default, or any pairing from the same catalog as the page-wide Type Pairing control) — swaps this footer's own heading and body typefaces, independent of the rest of the page. Below it, an Overall text size control (a percentage, applies to the whole footer design), then a Wordmark / Headings / Links / Body text switcher. Headings reveals Weight, Capitalisation, and Letter spacing; Links reveals Weight only. Picking Wordmark or Body text shows a note instead of controls — those two roles don't have a page-wide axis, only a per-selection one; use This selection below once you've picked something in the tree.

Colour. Five override swatches — Background, Text, Muted text, Hairlines and borders, Accent — plus the same Scheme (Default / Surface / Inverse / Brand / Transparent) and Emphasis (Standard / Subtle / Strong) dropdowns from Color Schemes → Footer above. A note under the swatches points out that Headings, Links, and Link hover colours aren't page-wide fields — set those per band, group, or link via This selection.

Spacing. Space above and below, Gap between footer blocks, and Content width (max width in px) for the whole footer design; a Newsletter box padding field appears too, only once your footer has a Newsletter band. "Gap between footer blocks" sets the space between the footer's top-level blocks (brand column, link columns, newsletter panel — or stacked rows, depending on your template's arrangement) — it does not change the spacing between individual links inside one column; that's the Gap between items (px) field under a band's own Spacing & sizing settings instead. Left/right space for one band specifically is, again, a This selection field.

Background. A Background image URL field; once a URL is set, a Focal point (X/Y sliders) and a Darkening over the image slider (0–100%, defaults to 45%) appear. Below that, a Gradient wash row of curated colour-swatch buttons — clicking one applies it and clears the background image URL, since a photo and a mesh preset are mutually exclusive (typing a URL clears the mesh selection back). This is the same bgImage/mesh state as the Ground image and Gradient-mesh ground fields under Color Schemes above — the difference is presentation: this tab's version is a compact URL box with no upload picker, while Theme Settings → Color Schemes' version (documented above) additionally offers Image focus (a 9-position focal grid) and Image overlay (Darkness / Overlay colour / a flat–top–bottom Direction toggle) plus a proper upload/media-library picker via the same control every other image field in this editor uses — use that one if you need to upload a file rather than paste a URL. On the Boxed Card Newsletter template only, an italic note under Gradient wash points you to the band-scoped Ground composition control described above, since this tab doesn't carry a page-wide equivalent for it.

This selection — styling one band, column, or link. Pick a row in the structure sidebar first — a band, a link column (group, shown when you expand a band that has columns), or a single link or text row inside a column (item) — then open the Style tab's This selection chip. What you see depends on what you picked:

Typeface is a Google Fonts field — type a family name or pick from a short curated list (Inter, Fraunces, Playfair Display, Cormorant Garamond, DM Serif Display, Space Grotesk, Sora, Manrope, Libre Baskerville, Bitter, Work Sans, Outfit, Cabinet Grotesk, Instrument Serif); any Google Fonts family name works even if it isn't in that list. Leave any field in This selection blank and that piece keeps the design's own value — nothing here is required.

Show and hide. Two cards, shown only for the bands that exist on your footer:

• Legal strip band — a Show this band switch (turning it off asks you to confirm first, since hiding the band also takes down everything nested in it — see the confirm dialog below), plus four sub-switches: Copyright line, Legal links, Language selector, and Payment method icons.
• Newsletter band — a Show this band switch (no confirmation needed here), plus three sub-switches: Headline and description, Phone number field, and Consent checkbox.

If your footer has neither band, this chip shows a note to add a Legal Strip or Newsletter band from the Config side first.

Link columns (Minimal Link template only)

The Minimal Link footer template has one control of its own in Theme Settings, alongside the shared Color Schemes and Type Pairing controls above: Link columns, a number field from 2 to 4 (default 3) that sets how many columns your footer's link groups are arranged into on desktop. It has no effect on any other footer template, and no effect on mobile, which always stacks columns regardless of this setting.

Social band content

Select the Social row in the Footer Section list (Online Store → Theme → Page Layouts → Footer, sidebar tree) to open its own settings panel. As of 2026-09-03 the panel has two parts, stacked one above the other: Social Links (the platform list + Appearance controls, new) and Link style (which platforms/text combination this band shows, existing).

Social Links. The exact same ordered-list-plus-Appearance editor as Social Links (new) in Store Branding → Socials — add/reorder/hide/remove platforms (including custom ones), then style the icons' layout, shape, border, size, gap, and alignment. It's the same underlying branding.socialLinksList / branding.socialPresentation data either editor writes to — a change made here shows up on the Store Branding → Socials tab too, and vice versa, since both are two mount points for one save.

Contact details in the footer

The Theme Settings entry of the footer editor has three optional contact fields — Contact phone, Contact email, and Address. Fill in any one of them and a contact row appears in the footer, between the main footer content and the bottom legal bar:

All three are blank by default and each is independent: set only the email and only the email shows, with no empty space where the other two would be. Leave all three blank and the footer renders exactly as it did before — no gap, no divider, nothing.

Link toggles

Toggle individual footer links on or off: About, Contact, FAQ, Track Order, Privacy Policy, Terms, Refund Policy, and Shipping Policy.

Column Body Text

Optional supporting text shown under a footer link column's heading, on the templates that render column bodies — a short paragraph rather than another list of links, for a column like "Our Story." Each of your footer's link columns (matching the Link toggles above) gets its own body-text field here; leave one blank and that column renders as a plain link list, exactly as it did before this field existed.

Legal Links

Additional legal/compliance links shown in the footer's legal strip alongside your existing Privacy Policy / Terms links — for things like a Cookie Policy or an Accessibility statement. Add any number of label/URL pairs; this list renders as its own block only when it has at least one entry, so an empty list has no visible effect and doesn't add a stray gap or divider.

Features

Once Newsletter sign-up is on, three more fields appear:

Next steps

• Browse and apply a store-wide theme
• Pick a layout for your product, category, and cart pages