Overview

Purpose

The Structure/ folder contains the core building blocks of the Noir theme.
These templates define the page skeleton (layout), shared includes, and infrastructure utilities that all pages/components rely on.

In Noir, Structure/ is where you start to understand:

how the page is assembled (Header / Body / Footer)

how components are resolved and rendered

which scripts/styles are loaded globally

which runtime globals are exposed to JavaScript

Files in `Structure/`

`LayoutA.liquid`

The main HTML layout template. Responsible for:

<head> meta tags and CSS includes

rendering header/body/footer component lists

loading vendor libraries, componentscripts.js, theme.js, Alpine

injecting runtime globals into window (feature flags, user info)

`ComponentsList.liquid`

Renders a list of components by resolving each component include name using the convention:

Components_<model.Name>_<model.View>

This file is the core of Noir's component composition.

`Metas.liquid`

Central place for meta tags (SEO, canonical, social metadata, etc.) and other head-related tags used across all pages.

`CssVariables.liquid`

Outputs theme CSS variables (typically based on settings/palette).
Used to enable consistent theming and easier customization.

`GoogleTagManager.liquid`

Contains Google Tag Manager integration hooks.

`Json.liquid`

Debug utility: serializes models into the browser (commonly via window.viewModel) to help troubleshoot data contracts.

`StagingButton.liquid`

Outputs staging/debug UI used during development or staging environments.

How it fits together (quick mental model)

LayoutA.liquid builds the page shell and decides where Header/Body/Footer are rendered.

For each section, LayoutA.liquid calls Structure/ComponentsList.liquid.

ComponentsList.liquid includes each component template by name.

Global scripts (componentscripts.js, theme.js, Alpine) power interactions via global objects and Alpine stores.

Overview

Purpose#

Files in Structure/#

LayoutA.liquid#

ComponentsList.liquid#

Metas.liquid#

CssVariables.liquid#

GoogleTagManager.liquid#

Json.liquid#

StagingButton.liquid#

How it fits together (quick mental model)#