开发主题

Shopify 主题是使用 Shopify 的主题模板语言Liquid以及 HTML、CSS、JavaScript 和 JSON 构建的。

（一）设置开发环境

1. macOS (Homebrew)：
   • brew tap shopify/shopify
   • brew install shopify-cli
2. Windows 和 Linux (npm)
   • npm install -g @shopify/cli @shopify/theme

（二）初始化主题

1. 运行shopify theme init

2. 提示输入模板名称

（三）启动本地开发服务器预览主题

1. 进入目录

2. 运行shopify theme dev --store {store}（store为开发商店的名称），我的开发商店名为 zhishou-test

3. 首次预览时需要登录

4. 点击链接去网页端登录，确认登录后返回项目即可

5. 补充

   运行时相关报错，可参考这里

6. 预览主题

（四）测试更改主题

1. 更改templates/index.json文件的image_banner

   

2. 前台预览：

   

（五）上传主题到商店

1. 输入命令：shopify theme push --unpublished

2. 输入主题名称:zhishou-test-theme

   

3. 上传完成后，打开商店后台，点击在线商店，可以看到刚上传的zhishou-test-theme主题。

   

（六）发布主题

若主题已开发完成，可在商店后台模板库区域点发布或运行命令shopify theme publish

（七）默认主题项目结构

1. assets目录包含主题中使用的所有资产，包括图像、CSS 和 JavaScript 文件。
2. config目录包含主题的配置文件。配置文件定义主题编辑器的主题设置区域中的设置，并存储它们的值。
3. layout目录包含主题的布局文件，通过它们呈现模板文件。
4. locales目录包含主题的区域设置文件，用于提供翻译的内容。区域设置文件允许您在主题编辑器中提供翻译体验，为在线商店提供翻译，并允许商家在在线商店中自定义文本。
5. sections目录包含主题的sections和section groups 。
6. snippets目录包含存放较小的可重用代码片段的 Liquid 文件。您可以使用 Liquid渲染标签在整个主题中引用这些片段。
7. templates目录包含主题的模板文件，它控制在每种类型的页面上呈现的内容。