logo
Shopify Builds>Surfaces>Global

Global

Global is the surface for work that renders on every page rather than on one template: the theme layout, the header and footer section groups, navigation, localization controls and the shared snippets a storefront loads everywhere. Nothing here belongs to a single page type, which is exactly what makes any change to it a change to the whole storefront at once.

How We've Used It

Two kinds of work live here. Information architecture — header and footer menus, breadcrumbs, country and language selectors — where the constraint is that a section group cannot be duplicated per market, so divergence has to go through market context files instead of Liquid conditionals. And load order, which is the layout's real job: which stylesheets are preloaded, which scripts are deferred, what the document has already committed to before the first section renders. Both are unglamorous and both carry further than they look, because a global surface is the one place where a small decision is repeated on every page a shopper sees.

Builds Using It

55 further gated builds use it; their pages follow.

Related Entities

Builds

Audience-targeted announcement bar with sticky-height measurement

Dawn's announcement bar, extended so each announcement block carries an audience setting, the section counts the matching blocks before it renders, and that count decides whether the page gets no bar, a static line or a carousel — with slide numbering that matches what's actually on screen, and a pinned height the rest of the layout can read.

LUS Brands

Rotating announcement carousel above the header, with pause control

An auto-rotating promo bar rendered by the layout above the header: a looped Swiper of up to ten text blocks that reserves its height before any script runs, waits for the carousel library on a bounded retry, and gives the shopper a real pause control whose label always says what it will do next.

Nudestix

Adults/Kids audience-switching header with automatic menu swap

One Liquid predicate decides which audience a page belongs to. The header reads it, replaces the entire navigation with the kids menu, and keeps a two-button switch back to the adult side in reach on desktop and mobile alike.

LUS Brands

Curl Quiz 3.0: a nine-step diagnostic quiz rendered entirely from Shopify metaobjects

A nine-step hair diagnostic on the LUS Brands storefront whose questions, options and selection rules live in Shopify metaobjects rather than in the section's code. The theme editor exposes exactly one setting.

LUS Brands

Detached mobile drawer with three-level native-details navigation

The mobile menu panel lives outside the element that opens it. The theme's own drawer class was taught that shape, and the panel it opens is a native `<details>` accordion three levels deep that expands without JavaScript.

LUS Brands

Font delivery and a template-conditioned image preload in a licensed theme's layout

Three Ships' `theme.liquid` decides its own font delivery on a licensed theme — the picked faces preloaded, an Adobe Fonts `@font-face` block inlined with its loader demoted behind it — and emits one image preload on exactly one template type, under an explicit condition.

Three Ships

GA4 ecommerce dataLayer instrumentation across a Rebuy cart

A client-side event layer that hangs off the network rather than off the DOM: a `fetch` wrapper that recognizes a cart add, a diff against the previous cart so the event reports what changed, and item taxonomy read from a block the product page already renders.

Three Ships

Theme-wide section reveal that replaces Dawn's per-element scroll animations

One entrance animation for every top-level section on the storefront, applied from the layout rather than authored into each section — with the hide decided before first paint, the reveal driven by an intersection observer, and reduced-motion and no-JavaScript visitors never hidden from anything.

LUS Brands

Server-rendered page-context dataLayer, declared in the head and pushed at browser idle

`theme.liquid` declares `window.dataLayer` ahead of the platform's head content, then pushes a context object assembled in Liquid — locale, shop country, page type and, for signed-in customers, subscriber, loyalty and login state — when the browser is idle, so every tag in the container reads the same server-side facts.

Three Ships

Predictive search moved off Shopify onto an external search API with client-side templating

The type-ahead rebuilt from the inside: same custom element, same keyboard model, same ARIA contract — a different data source and a render step that did not exist before.

Nudestix

Metafield-driven two-level FAQ accordion grafted into a help-center app's shell

The help-center page kept the app's shell. The answers inside it moved into a Shopify page metafield, and a two-level accordion we wrote renders them — deep-linkable, keyboard-operable and reusable elsewhere in the theme.

LUS Brands

Layout shell rewritten as a load-order contract: origin hints, two stylesheet tiers and an interaction-gated session recorder

Dawn 6.0.2's `theme.liquid` reworked so that the order things load in is written down: connection hints before the title, stylesheets sorted into a blocking tier and a deferred tier, fonts preloaded, and a session-recording script that waits for the shopper to move.

Nudestix

Swell VIP tier and email-subscriber segmentation resolved in Liquid

Two Liquid variables in `theme.liquid`: `loyalty_status`, resolved from the tags the loyalty vendor writes onto the customer record, and `subscriber_status`, resolved from email-marketing consent — both assigned before `content_for_header` and emitted only for signed-in customers.

Three Ships

Country/market selector hardened for three simultaneous instances

Dawn's country selector, rendered three times on every page, with every option id namespaced by the position that rendered it and three ARIA attributes removed — so the three instances stop colliding and the vendor's own localization script needed no change at all.

LUS Brands

Mega-menu header with separate mobile menu and image blocks

A second link-list setting gives the mobile drawer its own information architecture, and section blocks put imagery into panels that Shopify's link lists have no way to carry it in.

Three Ships

Title-matched mega menu with a full-depth link-list fallback

Shopify gives a navigation item no settings of its own. This menu joins each top-level link to a theme-editor block by matching their titles, and renders a full link-list panel for every item that has no block behind it.

Nudestix

Mega-menu product rail (v2): a library-free slider in a theme asset, constructed per panel when the panel is seen

The second generation of Nudestix's menu rail — a merchandiser title, a shop-all link and a track of navigation cards — keeps its slider in `megamenu-slider.js`, a small class that measures slide width at move time and is constructed per panel on first intersection.

Nudestix

Metafield-driven breadcrumbs across product, collection, page, blog and article

One breadcrumb snippet whose ancestor trail is authored per product and per collection through a `custom.breadcrumbs` collection-list metafield, with a three-level fallback for products and natural trails for pages, blogs and articles — rendered as a real navigation landmark from a single argument-free `{% render %}`.

LUS Brands

Tabbed mobile Shop menu with featured banner panel

A custom `<shop-tabs>` element turns the drawer's first-level Shop menu into horizontal tabs with panels of category links, merges a theme-editor banner block into the tab order by position, and leaves every other drawer item on the vendor's accordion.

Three Ships

Side-by-side product comparison drawer and modal table

A compare-products flow with no app behind it: card checkboxes write the selection to localStorage, a drawer pinned to the bottom of the viewport carries it from collection to product page and back, and the modal table fetches each product's long-form copy from that product's own page section at the moment the shopper asks to compare.

Nudestix

Quiz results: a 34-rule, priority-ordered recommendation engine running client-side from metaobject data

The half of the Curl Quiz that turns answers into products. Liquid renders every possible recommendation once into hidden templates; a matcher in the browser runs 34 priority-ordered rules and clones the survivors into three result groups.

LUS Brands

Themed host section for Shopify Forms app blocks

A section whose only block type is `@app`, wrapping any app block in the theme's width, padding and background scaffolding — and, when a merchandiser switches it on, writing the `--forms-heading-*` and `--forms-body-*` custom properties that Shopify's Forms embed reads for its own typography.

Three Ships

DOM and shadow-DOM remediation layer for Yotpo, Rebuy and Recharge widgets

Corrections applied to markup the theme didn't write: `MutationObserver` routines that re-level a review widget's headings, demote headings inside a cart drawer, re-anchor a subscription add-to-cart control, and append a stylesheet inside a subscription widget's shadow root — every one re-entrant, so the fix converges instead of looping.

Three Ships

Accessible play/pause web component for autoplaying hero video

A `<play-pause>` custom element that gives a muted, autoplaying hero video a real keyboard-reachable control — self-wiring from a selector in its own markup, so Swiper can clone and reorder slides without any script knowing how many there are.

Nudestix