在Shopify主题中创建一个section

在Shopify中，一个section是主题布局的可重用和可配置的部分，通常包含了一系列的模板代码、样式和设置，这些都可以被商店管理员通过Shopify的后台界面来编辑。创建一个新的section涉及几个步骤，包括编写HTML、CSS、JavaScript（可选）以及Liquid模板代码，并在Shopify主题文件中正确组织这些文件。本文主要针对创建section的步骤做具体的说明：

1. 规划section

首先，确定所创建的section需要包含哪些元素和功能。比如，你可能想要创建一个包含轮播图、特色产品列表和文本区域的section。

2.按如下步骤添加新的section文件

在每个section文件中，你首先需要定义schema，它用于指定section的设置和配置。这通常通过

{% schema %}标签来完成。示例代码：

{% schema %}  
{  
  "name": "My Custom Section",  
  "settings": [  
    {  
      "type": "text",  //类型
      "id": "title",    //后续在html结构中引用{{section.settings.title}}
      "label": "Title",    //描述
      "default": "Enter a title"  // 默认值
    },  
    // 可以添加更多设置...  
  ]  
}  
{% endschema %}

在schema定义之后，你可以编写HTML和Liquid标签来定义section的布局和内容，示例代码：

<div class="my-diy-content">  
  <h2>{{ section.settings.title }}</h2>  
  <!-- 其他HTML内容 -->  
</div>

如果需要为section添加CSS样式或JavaScript脚本，可以使用{% stylesheet %}和{% javascript %}标签，示例代码：

{% stylesheet %}  
<style>  
  .my-diy-content{  
    /* CSS样式 */  
  }  
</style>  
{% endstylesheet %}  

{% javascript %}  
<script>  
  // JavaScript代码  
</script>  
{% endjavascript %}

3.在主题中使用自定义Section

找到页面模板添加Section标签：在你的Shopify主题中，找到你想要添加自定义section的页面模板（如page.liquid、theme.liquid等）,在模板中，使用{% section 'my-diy-content' %}标签来添加你的自定义section。确保将'my-diy-content'替换为你的section文件名（不包括.liquid后缀)

4、保存和测试后更新现有模板的代码

shopify theme dev 本地环境中预览和测试Shopify主题
shopify  theme push [--unpublished]   更改推送到shopify不发布

Shopify店铺优化开发，专业技术解答，欢迎留言。