本篇主要分享下 Shopify 如何在已有主题上去添加自定义的Sections 可以理解为组件

在 Shopify 主题中创建静态的部分

静态节听起来像它的名字一样-它是一个固定组件，可以通过主题编辑器进行自定义。此部分在页面上的位置基于页面模板中分配位置的位置而被锁定。在某种程度上，它就像一个片段，但具有超能力！部分将使用变量{% section ‘header’ %}而不是添加到Liquid模板中{% include ‘my-snippet-file’ %}。

例如：网站的 Header、Footer

  下面写个静态部分的案例（在网站底部添加一个部分）
  1、打开 代码编辑 点击 新增Section

 2、创建部分后，里面的固定的模板

{% schema %}

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

{% endstylesheet %}
{% javascript %}

{% endjavascript %}

 Schema Settings引用和设置API

3、修改mysection.liquid文件内容

  

    
    
 {{ section.settings.text-box }} 
    
 {{ section.settings.text }} 
  

{% schema %}
{
  // "name": "Text Box",  // 部分的名称 这里建议采用多语言写法避免因为设置的语言格式而出错，写法如下 
  "name": {
    "da": "Diasshow",
    "de": "Slideshow",
    "en": "mySection",
    "es": "Diapositivas",
    "fi": "Diaesitys",
    "fr": "Diaporama",
    "hi": "स्लाइडशो",
    "it": "Presentazione",
    "ja": "スライドショー",
    "ko": "슬라이드 쇼",
    "ms": "Tayangan slaid",
    "nb": "Lysbildefremvisning",
    "nl": "Diavoorstelling",
    "pt-BR": "Apresentação de slides",
    "pt-PT": "Apresentação de diapositivos",
    "sv": "Bildspel",
    "th": "สไลด์โชว์",
    "zh-CN": "我的部分",
    "zh-TW": "投影片輪播"
  },
  "settings": [
    {
      "id": "text-box",
      "type": "text",
      "label": "Heading",
      "default": "Title"
    },
    {
      "id": "text",
      "type": "richtext",
      "label": "Add custom text below",
      "default": "
Add your text here
"
    }
  ]
}
{% endschema %}

  4、在主题中使用 mySection

  在 Tempates 中找到要添加该部分的页面，我这里就添加在主题底部（全局使用）Layout 下的 theme.liquid

  调用方法{% section ‘section文件的名称’ %}

结果如下

关于静态部分的添加就简单的写到这里，后续再为大家补充

       （来源：baymax）
         以上内容属作者个人观点，不代表LEKSHOP立场！本文经原作者授权转载，转载需经原作者授权同意。

（来源：baymax）

相关推荐: 线上直播，会展服务创新的视觉工具

厦门商城系统开发线上直播，会展服务创新的视觉工具 “会展按下‘暂停键’，互联创新服务却不停摆。”中国食材电商节、武汉食和岛网络科技有限公司（以下简称武汉食和岛）总经理陈弘浩日前在国际会展业创新发展大会（以下简称会展创新大会）线上直播开幕式上，用一句话揭示了当下…