Theme layout

Base HTML structure for all pages.

Layout files

File	Used for
`layout/theme.liquid`	All storefront pages
`layout/password.liquid`	Password-protected store

theme.liquid structure

<head>
  - Meta, title, canonical
  - critical.css, product-card.css, swiper CSS
  - font-variables snippet (fonts + font_modify)
  - Color scheme CSS variables (inline)
  - content_for_header (Shopify apps/scripts)
</head>
<body>
  - Skip link
  - Header group (section group)
  - Main content (template sections)
  - Footer group (section group)
  - Overlay group (popups, mobile nav)
  - scripts-tag snippet (theme.js, global.js)
</body>

Section groups

Shopify OS 2.0 section groups bundle related sections:

Group file	Renders
`header-group.json`	Announcement + header
`footer-group.json`	Footer
`overlay-group.json`	Popups + mobile nav

RTL support

theme.liquid checks Theme settings → Layout → RTL and language list. When enabled, loads assets/rtl.css.

Color schemes

Color scheme CSS is generated inline in theme.liquid from Theme settings → Colors. Each scheme creates a .color-{id} class with CSS variables for background, text, buttons, borders.

JavaScript loading

snippets/scripts-tag.liquid loads:

global.js — Web Components, utilities
theme.js — Cart, product, search, UI
Section-specific JS loaded per section as needed