shopify主题开发-踩坑记录

克里斯前端

已于 2023-05-18 18:04:36 修改

阅读量1.1k

点赞数 1

文章标签：前端 javascript 开发语言

于 2023-05-16 18:57:42 首次发布

本文链接：https://blog.csdn.net/qq_25203915/article/details/130711611

版权

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