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.

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

liquid

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

重要提示：请勿在单个文件中混合多个区块的样式。每个区块都应有独立的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 {
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
}

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

在区块CSS中使用Schema设置：

css

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

@media (max-width: 749px) {
  .section {
    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
```
的文件
创建CSS文件：在
```
assets/
```
目录下创建与区块同名的CSS文件
引入CSS：在区块中使用
```
stylesheet_tag
```
过滤器引入CSS
添加Schema：包含必填的内边距设置
添加至少一个预设到Schema中
保持文件独立：切勿在单个CSS文件中混合多个区块的样式