shopify部分功能定制化开发

1. 修改颜色、字体、图片大小等。

定位到代码，修改css,或者需要到shopify后台修改主题 Online Store -> Customize

        步骤解析：

        

2. 需求：修改page页布局

到shopify后台修改 Online Store -> Pages，
在富文本编辑器中直接编辑代码，增加style标签，因为在page.liquid内容最后会被渲染出来,无法直接修改代码。
参考： https://desiredesignshop.myshopify.com/pages/bulldog-tank

3. 增加购买按钮，buy at aliexpress等第三网站

 在app metafileds进行自定义字段配置，需要的时候引入
参考： https://sunnzoofficial.myshopify.com/products/16gb-bluetooth-hifi-digital-mp3-music-player-with-50-hours-audio-playback
代码： （位置：snippet文件夹下pr_form.liquid下）

<div class="cust_btn_wrapper"><button class="buy_at_amz"><a href="{{product.metafields.amazon.buy_at_amazon}}" target="_blank" >BUY ON AMAZON</a></button></div>

4. 增加可配置模块到产品页或其他自定义page页

 新建section，这个section里面定义schema设置各种配置项,在需要的liquid文件include进去。
参考： https://sunnzoofficial.myshopify.com/pages/promotion
代码：

{%- section 'promotion' -%}

图例：

Shopify代码目录

• assets
  • global.scss.liquid (全局样式)
  • theme.scss.liquid （主题样式）
  • theme.js
• config
  • settings_data.son
  • settings_schema.json
• layout
  • theme.liquid (主文件 引入assets中的js等文件)
• locales
• sections（各种页面可定制化配置的模块）
• snippets （粒度最小的组件，如sidebar/header）
• templates （各种页面模板，如产品页、collection页面、contactUs、aboutUs页面）
• config.yml

修改模式

1. 获取源代码到本地，本地修改后push到线上，需安装themekit, 参考 Redirecting…, 类似于git pull的theme download命令，类似于git push的theme watch
2. shoify后台进入edit code 修改线上代码
3. shopfiy后台进入customize修改配置