Skip to Content
DeveloperGlobal Layout

Global Layout

layout/theme.liquid is the master HTML shell wrapping every storefront page. (layout/password.liquid is the equivalent for the password-protected page.)

What theme.liquid renders, in order

  1. Charset / viewport meta tags.
  2. css-variables.liquid — inlined first so custom properties exist before any stylesheet applies. See Styles & CSS Variables.
  3. base.css preloaded — design system, typography, layout primitives, reset, accessibility.
  4. critical.css preloaded — critical-path CSS, scroll-lock, section grid.
  5. Font preloading — conditional preconnect to Shopify’s font CDN and preload of the heading/body font variants (skipped for system fonts).
  6. meta-tags.liquid — Open Graph, Twitter cards, canonical.
  7. seo-structured-data.liquid — the JSON-LD @graph. See Structured Data.
  8. seo-head-extra.liquid — search-engine verification tags + hreflang.
  9. global.js loaded deferred.

<body>

  • Body class color-scheme-1 (default; any section can switch its own scheme), plus .anim-on when animations are enabled.
  • A skip-to-content link for accessibility.
  • {% sections 'header-group' %} — announcement bar + header.
  • <main id="main-content"> wrapping {{ content_for_layout }} (the page template).
  • {% sections 'footer-group' %} — footer.
  • Persistent UI rendered once and reused across pages:
    • <dialog id="cart-drawer"> — the AJAX cart drawer
    • the quick-view modal
    • a back-to-top button

Why persistent UI lives in the layout

The cart drawer and quick-view modal are in the layout (not a template) so they persist across navigation and can be opened from anywhere. They’re refreshed in-place via the Section Rendering API — see JavaScript (global.js).

OverviewStyles & CSS Variables