Shopify 模版定制 添加自定义部分

本人 兼职 shopify、店匠二次开发、仿站、定制等开发服务，有需要的可以加我微信 abc939039210，备注 shopify

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

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

例如：网站的 Header、Footer

下面写个 静态部分的案例（在网站底部添加一个部分）

1 <!--HTML和Liquid标签编辑区-->

2 {% schema %}

3 <!--Schema  Settings 引用和设置-->

4   {

5     "name": "Section name",

6     "settings": []

7   }

8 {% endschema %}

9 {% stylesheet %}

10 <!-- stylesheet 编辑区 -->

11 {% endstylesheet %}

12 {% javascript %}

13 <!-- javascript 编辑区 -->

14 {% endjavascript %}

Schema Settings 引用和设置API

1 <div id="textsection">

2     <div class="simpletext">

3         <!--{{section.settings.text-box}}为 liquid 标签 与下面 settings 的id对应-->

4         <h1>{{section.settings.text-box}}</h1>

5         <h3>{{section.settings.text}}</h3>

6     </div>

7 </div>

8 {% schema %}

9 {

10    //"name":"Text Box",  // 部分的名称 这里建议采用多语言写法避免因为设置的语言格式而出错，写法如下

11    "name”：{

12       "da":"Diasshow",

13       "de":"Slideshow",

14       "en":"mySection",

15       "es":"Diapositivas",

16       "fi":"Diaesitys",

17       "fr":"Diaporama",

18       "hi":"स्लाइडशो",

19       "it":"Presentazione",

20       "ja":"スライドショー",

21       "ko":"슬라이드 쇼",

22       "ms":"Tayangan slaid",

23       "nb":"Lysbildefremvisning",

24       "nl":"Diavoorstelling",

25       "pt-BR":"Apresentação de slides",

26       "pt-PT":"Apresentação de diapositivos",

27       "sv":"Bildspel",

28       "th":"สไลด์โชว์",

29       "zh-CN":"我的部分",

30       "zh-TW":"投影片轮播"

31 },

32 "settings":[

33    {

34       "id":"text-box",

35       "type":"text",

36       "label":"Heading",

37      "default":"Title"

38   },

39  {

40     "id":"text",

41     "type":"richtext",

42     "label":"Add custom text below",

43    "default":"<p>Add your text here</p>"

44   }

45  ]

46 }

47 {% endschema %}

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

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

结果如下

1、在Shopify后台中，转到在线商店的网站地图。

2、在网站地图页面上，单击想要向其添加链接的菜单名称。

3、在菜单项部分中，单击添加菜单项。

4、在名称字段中，输入产品系列的名称。这将显示给客户。

5、在链接列表中，选择产品系列，选择要为其添加链接的产品系列。

6、单击添加。

7、单击保存菜单。就完成shopify固定链接的设置了。

---