Shopify Section Patterns

Shopify 2.0 sections combine Liquid markup, optional inline CSS and JavaScript blocks, and a JSON schema for Theme Editor configuration. Use the section anatomy pattern: markup at the top, {% stylesheet %} and {% javascript %} blocks for styles and behavior, and {% schema %} at the bottom to define customizable settings and blocks.

Use the common section patterns provided: define your Liquid structure, add inline CSS for styling, include inline JavaScript to handle Theme Editor events like shopify:section:load, and configure the JSON schema with merchant-facing settings. This approach standardizes reusable sections and enables live customization.

Hook into shopify:section:load and other theme editor events using inline JavaScript within your section file. This lets you update section behavior dynamically when merchants change settings or load sections in the editor, supporting responsive customization workflows.

Shopify 2.0 sections support inline CSS and JavaScript when settings require dynamic styles or behavior specific to that section. External stylesheets work too, but inline blocks provide section-scoped styling and logic, reducing conflicts and improving maintainability for merchant-customizable themes.

The JSON schema drives Theme Editor customization by defining which settings merchants can control, organizing them into logical groups, and supporting nested blocks for repeatable content like product items. Schema configuration makes sections flexible and user-friendly without code changes.