Sections

A section is a large customizable page component stored as one Liquid file under theme/sections/shared/ or theme/sections/retail/.

Each section file should contain:

• its visible HTML;
• its section-specific CSS inside <style>;
• its Liquid loops and conditions;
• one {% schema %} block;
• its right-panel settings;
• any section-local block definitions and locks.

This is a deliberate Upstorr Design Control rule. When an agency opens a section in Agency Mode, the useful design should not be hidden in a private React component or distant Casa-only runtime.

Use section.dom_id on the selectable root and scope section-specific styles with that identity. Read values from section.settings. Loop over section.blocks for configurable nested content.

A section may use reusable Liquid blocks and small snippets. Do not extract its unique appearance merely to reduce line count; that makes the section harder for agencies and AI to understand.

The schema parser accepts one complete schema block. Changing locked static block identities after installation fails validation because those positions are part of the section contract.