theme-shopify-section-structure
Shopify Section Structure
Guidelines for organizing Shopify theme sections with proper file structure, schema configuration, and padding settings.
When to Use
- Creating new Shopify theme sections
- Modifying existing section schemas
- Setting up section file structure (Liquid, CSS, JS)
- Adding padding controls to sections
Section File Structure
Each section must have:
- Liquid section file (
.liquidinsections/directory) - Separate CSS file (in
assets/directory) - Optional separate JS file (in
assets/directory)
CSS Inclusion
More from niccos-shopify-workspace/shopify-cursor-skills
theme-shopify-liquid-templates
Liquid template best practices for Shopify themes - snippets, logic, image handling, and SVG usage. Use when writing or modifying Liquid templates in Shopify themes.
80theme-shopify-css-guidelines
CSS naming conventions (BEM), nesting rules, and encapsulation guidelines for Shopify themes. Use when writing CSS for Shopify theme sections.
50theme-shopify-javascript-standards
JavaScript standards for Shopify themes - custom elements, file structure, and best practices. Use when writing JavaScript for Shopify theme sections.
43app-shopify-admin-graphql
Execute Shopify Admin API calls via GraphQL in Shopify Remix apps. Use when querying or mutating Shopify data (customers, orders, products, shop, segments, subscriptions), when writing GraphQL for the Admin API, or when handling throttling and retries.
35theme-shopify-html-data-comments
HTML structure, data attributes, and commenting guidelines for Shopify themes. Use when structuring HTML markup and adding comments to Shopify theme code.
32app-shopify-polaris-web-components
Use Shopify Polaris Web Components (s-* custom elements) for App Home UI. Use when building App Home surfaces (not embedded apps), designing UI with s-page, s-section, s-stack, s-box, s-button, and other s-* components. Do not use @shopify/polaris React - App Home requires Web Components.
23