theme-shopify-section-structure

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shopify Section Structure

Shopify主题区块结构

Guidelines for organizing Shopify theme sections with proper file structure, schema configuration, and padding settings.

本文档为Shopify主题区块的组织提供指导，涵盖正确的文件结构、Schema配置以及内边距设置。

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

创建新的Shopify主题区块
修改现有区块的Schema
搭建区块文件结构（Liquid、CSS、JS）
为区块添加内边距控制

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)

每个区块必须包含：

Liquid区块文件（位于
```
sections/
```
目录下，后缀为
```
.liquid
```
）
独立的CSS文件（位于
```
assets/
```
目录下）
可选的独立JS文件（位于
```
assets/
```
目录下）

CSS Inclusion

CSS引入方式

Each section must include its own stylesheet using:

liquid

{{ '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.

每个区块必须通过以下方式引入自身的样式表：

liquid

{{ 'section-name.css' | asset_url | stylesheet_tag }}

重要提示：请勿将多个区块的样式混合在同一个文件中。每个区块都应有独立的CSS文件。

例外情况：首屏区块（如_header_、announcement bar）可使用全局主题文件（如

theme.css

）中的样式，以加载关键CSS。

JavaScript Inclusion

JavaScript引入方式

If a section needs JavaScript, include it separately:

liquid

<script src="{{ 'section-logic.js' | asset_url }}" defer="defer"></script>

如果区块需要JavaScript，需单独引入：

liquid

<script src="{{ 'section-logic.js' | asset_url }}" defer="defer"></script>

Section Schema Requirements

区块Schema规范

Every section schema MUST include padding settings.

每个区块的Schema必须包含内边距设置。

Required Padding Settings

必选内边距设置

Add a "Paddings" heading in the schema with these settings:

json

{
  "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中添加“内边距”标题及以下设置：

json

{
  "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

Schema最佳实践

Add additional settings only when required
Avoid over-configuring the schema
Always include at least one preset
Keep settings organized and logical

仅在必要时添加额外设置
避免过度配置Schema
始终至少包含一个预设
保持设置的组织性和逻辑性

Applying Padding in CSS

在CSS中应用内边距

Use the schema settings in your section CSS:

css

.section-{{ section.id }}-padding {
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
}

@media (max-width: 749px) {
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top_mobile }}px;
    padding-bottom: {{ section.settings.padding_bottom_mobile }}px;
  }
}

使用Schema设置来编写区块CSS：

css

.section-{{ section.id }}-padding {
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
}

@media (max-width: 749px) {
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top_mobile }}px;
    padding-bottom: {{ section.settings.padding_bottom_mobile }}px;
  }
}

Shopify Theme Documentation

Shopify主题官方文档

Reference these official Shopify resources:

参考以下Shopify官方资源：

Example Section Structure

区块结构示例

sections/
  └── featured-collection.liquid

assets/
  ├── featured-collection.css
  └── featured-collection.js (optional)

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

在
```
sections/
```
目录下创建后缀为
```
.liquid
```
的区块文件
在
```
assets/
```
目录下创建与区块名称匹配的CSS文件
使用
```
stylesheet_tag
```
过滤器在区块中引入CSS
添加包含必选内边距设置的Schema
为Schema添加至少一个预设
保持文件独立——切勿将多个区块的样式混合到同一个CSS文件中