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

(

.liquid

in

sections/

directory)

Separate CSS file

(in

assets/

directory)

Optional separate JS file

(in

assets/

directory)

CSS Inclusion

Each section must include its own stylesheet using:

{{

'section-name.css'

|

asset_url

|

stylesheet_tag

}}

Important

Do NOT mix styles of multiple sections in one file. Each section has its own CSS file.
Exception: above-the-fold sections (e.g., header , announcement bar ) can use styles from global theme files (like theme.css ) to load critical CSS. JavaScript Inclusion If a section needs JavaScript, include it separately: < script src = " {{ 'section-logic.js' | asset_url }} " defer = " defer "

</ script

Section Schema Requirements Every section schema MUST include padding settings. Required Padding Settings Add a "Paddings" heading in the schema with these settings: { "type" : "header" , "content" : "Paddings" } , { "type" : "range" , "id" : "padding_top" , "label" : "Padding Top" , "min" : 0 , "max" : 100 , "step" : 1 , "unit" : "px" , "default" : 0 } , { "type" : "range" , "id" : "padding_bottom" , "label" : "Padding Bottom" , "min" : 0 , "max" : 100 , "step" : 1 , "unit" : "px" , "default" : 0 } , { "type" : "range" , "id" : "padding_top_mobile" , "label" : "Padding Top (Mobile)" , "min" : 0 , "max" : 100 , "step" : 1 , "unit" : "px" , "default" : 0 } , { "type" : "range" , "id" : "padding_bottom_mobile" , "label" : "Padding Bottom (Mobile)" , "min" : 0 , "max" : 100 , "step" : 1 , "unit" : "px" , "default" : 0 } Schema Best Practices Add additional settings only when required Avoid over-configuring the schema Always include at least one preset Keep settings organized and logical Applying Padding in CSS Use the schema settings in your section CSS: .section- { { section.id } } -padding { padding-top: { { section.settings.padding_top } } px ; padding-bottom: { { section.settings.padding_bottom } } px ; } @media ( max-width : 749 px ) { .section- { { section.id } } -padding { padding-top: { { section.settings.padding_top_mobile } } px ; padding-bottom: { { section.settings.padding_bottom_mobile } } px ; } } Shopify Theme Documentation Reference these official Shopify resources: Shopify Theme Structure Section Schema Section Files Theme Settings Example Section Structure sections/ └── featured-collection.liquid assets/ ├── featured-collection.css └── featured-collection.js (optional) Instructions Create section file in sections/ directory with .liquid extension Create CSS file in assets/ directory matching section name Include CSS in section using stylesheet_tag filter Add schema with required padding settings Add at least one preset to the schema Keep files separate - never mix multiple sections' styles in one CSS file

theme-shopify-section-structure

安装