shopify主题开发-踩坑记录

shopify主题开发-踩坑记录

对shopify主题二次开发，其中遇到问题在此记录。

官方脚手架搭建教程

第一步 安装 Shopify CLI

Windows

npm install -g @shopify/cli @shopify/theme

第二步 使用 Dawn 初始化一个新主题

shopify theme init

进入项目目录

cd glitched-tone-theme

第三步：启动本地开发服务器

启动服务

shopify theme dev --store {store-name}

输入shopify theme info会提示一下内容

我们的店铺地址是https://XXX.myshopify.com/ 按照提示，开发者或许会输入一下命令

shopify theme dev --store {XXX}

这时候会出现以下错误

解决方案

shopify theme dev --store=https://XXX.myshopify.com

成功解决

此时第二个问题就会出现

"Ruby Environment Not Found" 

ruby下载地址

安装之后 重启 查看版本

ruby -v 

成功解决

成功运行

第三步 二次开发主题

首先是了解目录结构

每个商店主题下有7个目录，在templates目录下有一个customers文件夹，一共8个目录。除此之外，不能有其他的目录。如下：

└── theme
    ├── assets   // assets目录包含主题中使用的所有资源文件，包括图像、CSS和JavaScript文件。
    ├── config  // config目录包含主题的配置文件。 配置文件在主题编辑器的主题设置区域中定义设置，并存储它们的值。
    ├── layout  // layout目录包含主题的布局文件，模板文件通过这些文件呈现。 
    ├── locales  // locale目录包含主题的locale文件，这些文件用于提供翻译后的内容。 Locale文件允许您在主题编辑器中提供翻译体验，为在线商店提供翻译，并允许商家在在线商店中定制文本。
    ├── sections  // sections目录包含一个主题的sections。
    ├── snippets  // snippets目录包含较小的可重用代码片段的Liquid文件。 您可以使用Liquid render标记在整个主题中引用这些片段。
    └── templates  // templates目录下的每一个json文件是一个模板，每一个模板对应着一个页面。
        └── customers