已收藏,可在 我的资料库 中查看
关注作者
您可能还需要
独立站
AI智能品类出海创新研讨会
立即报名
加入社群
独立站近期活动
卖家社群
跨境同行交流平台
查看更多
亚马逊社群
招商政策、运营进阶资料、业绩增长交流>
TikTok社群
招商政策、运营进阶资料、业绩增长交流>
独立站社群
招商政策、运营进阶资料、业绩增长交流>
Ozon社群
招商政策、运营进阶资料、业绩增长交流>
Shopee社群
招商政策、运营进阶资料、业绩增长交流>
沃尔玛社群
招商政策、运营进阶资料、业绩增长交流>
跨境同行资源
立即扩充
本地跨境资源
查看更多
深圳卖家社群
同城跨境资源交流,本地活动抢先知>
广州卖家社群
同城跨境资源交流,本地活动抢先知>
杭州卖家社群
同城跨境资源交流,本地活动抢先知>
宁波卖家社群
同城跨境资源交流,本地活动抢先知>
福建卖家社群
同城跨境资源交流,本地活动抢先知>
成都卖家社群
同城跨境资源交流,本地活动抢先知>
跨境同行资源
立即扩充
精品系列活动
查看更多
平台招商活动
平台活动综合社群,get主流平台活动方向>
运营增长活动
多城巡回式分享交流,直连官方解决疑难>
品类系列活动
选品、爆品交流分享,还能参加探厂计划直链源头>
亚马逊系列活动
亚马逊平台动向直击,入门进阶一手扶持>
独立站系列活动
独立站长期布局策略,全面解析新增长路径>
美客多系列活动
多场次、多品类,市场解读&美客多平台政策>
跨境同行资源
立即扩充
雨果X产业带系列
查看更多
时尚品类社群
选品技巧、品类指南、探厂品类源头工厂>
服装内睡社群
选品技巧、品类指南、探厂品类源头工厂>
大件家居社群
选品技巧、品类指南、探厂品类源头工厂>
美妆个护社群
选品技巧、品类指南、探厂品类源头工厂>
家电品类社群
选品技巧、品类指南、探厂品类源头工厂>
其他品类社群
选品技巧、品类指南、探厂品类源头工厂>
跨境同行资源
立即扩充

Shopify 二次开发 添加自定义部分

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

Shopify 二次开发 添加自定义部分


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

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

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

例如:网站的 Header、Footer
Shopify 二次开发 添加自定义部分
  下面写个静态部分的案例(在网站底部添加一个部分)
  1、打开 代码编辑 点击 新增Section
Shopify 二次开发 添加自定义部分
 2、创建部分后,里面的固定的模板

<!--HTML和Liquid标签编辑区-->
{% schema %}
<!--Schema  Settings 引用和设置-->
  {
    "name": "Section name",
    "settings": []
  }
{% endschema %}
{% stylesheet %}
<!-- stylesheet 编辑区 -->
{% endstylesheet %}
{% javascript %}
<!-- javascript 编辑区 -->
{% endjavascript %}
 Schema Settings引用和设置API
3、修改mysection.liquid文件内容
<div id="textsection">
  <div class="simpletext">
    <!--{{ section.settings.text-box }} 为 liquid 标签 与下面 settings 的 id 对应-->
    <h1> {{ section.settings.text-box }} </h1>
    <h3> {{ section.settings.text }} </h3>
  </div>
</div>
{% 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": "<p>Add your text here</p>"
    }
  ]
}
{% endschema %}
  4、在主题中使用 mySection

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

Shopify 二次开发 添加自定义部分
  调用方法{% section ‘section文件的名称’ %}

结果如下

Shopify 二次开发 添加自定义部分
Shopify 二次开发 添加自定义部分

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

       (来源:baymax)
         以上内容属作者个人观点,不代表雨果跨境立场!本文经原作者授权转载,转载需经原作者授权同意。

(来源:baymax)

分享到:

--
评论
最新 热门 资讯 资料 专题 服务 果园 标签 百科 搜索
雨果跨境顾问
【爆单冲刺】Google爆单冲刺包
雨果跨境谷歌官方顾问

收藏

--

--

分享
baymax
分享不易,关注获取更多干货