如何使用Shopify cli开发主题

4,303 阅读3分钟

1. 首先你得需要有一个shopify店铺。开发商店也行,付费商店也行。开发商店的优势是可以永久使用商店,可以更好的开发主题。注册地址:www.shopify.com/partners

(当然你都已经找到这了我相信你应该是有店铺的image.png

2. 安装ruby。

(1) win下载地址:rubyinstaller.org/downloads
(2) Mac下载请参考:www.jianshu.com/p/c073e6fc0…
(3) 目前推荐的版本是2.7.4-1

3. 安装完成后在Git Bash输入ruby --version和gem --version 验证一下是否都安装成功了,如果没有就重新安装一遍。

微信图片_20211109182021.png

4. 在Git Bash输入 gem install shopify-cli 全局安装shopify脚手架。

微信截图_20211115102427.png

5. 输入shopify login --store=xxx.myshopify.com(你的店铺地址)

注意:
(1) 等号的两边不能有空格,然后就会调转到一个登录页面,需要登录一下。
(2) 不要用Git Bash 输入该命令,等半天没反应,然后请求超时,原因不明。知道的小伙伴欢迎把答案甩我脸上。
(3) 需要用win自带的小黑窗口(win+R 然后输入cmd 即可)

微信图片_20211109182742.png

6. 然后手动创建一个文件夹(命令行创建也行)在文件夹的路径打开PowerShell(按住shift然后鼠标右键点击就会出现在此处打开PowerShell窗口) 输入 shopify theme pull 选择你想要的下载的主题。

注意:也不要用Git Bash 输入该命令,因为无效,原因不明。知道的小伙伴欢迎把答案甩我脸上。

微信图片_20211109183103.png

7. 下载完后输入 shopify theme serve运行项目。

微信截图_20211109184347.png

  • 第一个地址是本地环境的地址
  • 第二个地址是本地环境后台的地址
  • 第三个地址是其他小伙伴可以访问的预览地址

8. 由于shopify cli创建的项目与themeKit拉取的项目不太一样,具体表现在shopify cli创建的项目在商店后台是不存在的,所以我们需要把项目代码提交到GitHub上,利用GitHub与shopify后台连接,这样就可以保障代码不会丢失。

步骤:

  • git init 初始化git仓库
  • git add . 提交所有文件
  • git commit -m “初始化git仓库”
  • 然后去GitHub创建一个项目,创建完成后将以下框出来的命令复制粘贴到终端
    image.png
  • 最后 git push origin master 把代码推送上去

9. shopify后台与GitHub进行关联

步骤:
(1) 从店铺后台添加模板,选择从GitHub连接

image.png

(2) 右侧出现登录的抽屉,点击登录后浏览器会弹出一个GitHub的登录窗口,点击登陆。(如果显示无法连接账户就清除缓存或者开无痕模式)

微信图片_20211110115404.png

(3) 登陆成功后就选择项目和分支,最后点击连接

image.png

(4) 成功之后就会出现在你的模板库,操作跟之前的模板没有任何区别

微信截图_20211110115919.png

(5) 之后开发主题的过程就是git四连了image.png

注意注意注意注意注意注意!!!

从第二个地址点进去的后台自定义和从商店的模板库点击自定义是不一样的,第二个地址自定义一些内容后是不会同步到settings_data.json文件中的,需要从后台的模板库点击编辑才会同步到settings_data.json文件中,编辑完成之后及时git pull 同步到本地,以免代码丢失。(原因不明。。。) 微信图片编辑_20211111115508.jpg 微信截图_20211111115428.png

补充:

关于Shopify cli命令

  • shopify login :登录商店
  • shopify logout:退出登录
  • shopify version:打印版本号。  
  • shopify whoami:标识您当前登录的合作伙伴组织或存储。

shopify 主题命令

[init | serve | pull | push | delete | check | publish | package | language-server]
用法示例:shopify theme init
更多示例请输入 shopify --help 查看。