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文件的名称’ %}

结果如下

添加产品size *** 作如下：

1、在 Shopify 后台中，转到在线商店页面。

2、点击添加页面。

3、输入页面标题。

如果要创建适应网站宽度的尺寸图表，请对页面标题输入 Size Chart。在搜索引擎产品页面预览分区中，页面的 URL 应以 /size-chart 结尾。

如果您想创建仅对特定厂商的产品显示的图表，请输入厂商名称，后跟 Size Chart。例如，如果您的厂商为 Great Owls，则对页面标题输入 Great Owls Size Chart。在搜索引擎产品页面预览分区中，页面的 URL 应以 /great-owls-size-chart 结尾。

如果您要创建仅对特定产品类型显示的图表，请输入产品类型，后跟 Size Chart。例如，如果要显示特定于鞋子的尺寸图表，请对页面标题输入 Shoes Size Chart。在搜索引擎产品页面预览分区中，页面的 URL 应以 /shoes-size-chart 结尾。

4、在内容框中创建一个表，用于包含尺寸图表信息。按所需呈现效果对表格进行自定义。

5、在可见性分区中，确保将页面设置为可见。

点击保存。

---