怎么开发一个分区（Section）

在 Shopify 主题开发中，如果你想增加一个新的 section 用于复用某个板块，并允许用户在 Theme Editor 中添加一些自定义参数，那么你可以学习下本文。

第一步：创建自定义 Section 文件

在你的 Shopify 主题目录下的 sections 文件夹中新建一个文件，例如 section-name.liquid。

随后你看到该文件的默认代码, Section name, 是这个模块的名字, 你可以改成其他。

section-name.liquid


{% schema %}
{
    "name": "Section name",
    "settings": []
}
{% endschema %}

添加 liquid 代码

例如: 咱们添加一个展示商品的 Collection section，区块名称叫做系列商品展示

section-name.liquid


 
{% schema %}
{
    "name": "Collection Products",
    "tag": "section",
    "settings": [
        {
            "type": "collection",
            "id": "collection",
            "label": "选择系列"
        },
        {
            "type": "number",
            "id": "products_to_show",
            "label": "显示商品数量",
            "default": 4,
        }
    ],
    "presets": [
        {
            "name": "系列商品展示",
            "category": "产品"
        }
    ]
}
{% endschema %}
 
{% if section.settings.collection != blank %}
{% assign collection = collections[section.settings.collection] %}
<div class="collection-products-section">
    <h2>{{ collection.title }}</h2>
    <div class="products-grid">
        {% for product in collection.products limit: section.settings.products_to_show %}
        <div class="product-card">
            <a href="{{ product.url }}">
                <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title }}">
                    <p>{{ product.title }}</p>
                    <p>{{ product.price | money }}</p>
            </a>
        </div>
        {% endfor %}
    </div>
</div>
{% else %}
<p>请在主题编辑器中选择一个系列。</p>
{% endif %}

添加样式（可选）

你可以在 assets 文件夹的 CSS 文件中添加自定义样式，比如 base.css 或 theme.css：

base.css


.collection-products-section {
    padding: 40px 0;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}
.product-card {
    text-align: center;
}
.product-card img {
    max-width: 100%;
    height: auto;
}

在 Theme Editor 中添加该 Section

进入 Shopify 后台的主题编辑器（Customize Theme）：
找到你想添加该模块的页面（如主页）。
点击 “添加分区”（“Add section”）。
找到你新建的系列商品展示（Collection Products）模块并添加。
在右侧设置栏中选择你想展示的系列。

到这里我们已经完成了Section的增加，接下来你可以修改或者美化这个Section了。