shopify免费开发theme，以及vscode预览theme，全过程

最新推荐文章于 2025-12-18 18:11:50 发布

原创最新推荐文章于 2025-12-18 18:11:50 发布 · 629 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #shopify

文章目录

前言
一、如何免费注册shopify？
二、vscode预览
总结

前言

之前就想研究shopify，但他的商店注册需要付费，也不是说他多贵吧，但我不想卖东西，就想做shopify的theme，感觉有点不合适，然后我就开始研究研究（其实就半天），然后我就打通了，但我还是注册了shopify store，别问为啥，问就是体验（其实没想到怎么免费的就想着先注册看看吧）。哈哈哈

一、如何免费注册shopify？

因为不注册shopify是无法预览项目的，而且还要对接shopify里的一些数据吗。shopify有一点特别好，就是你注册了一个测试store，跟他说就是为了开发theme，他会给你一些测试数据，就你一进入商店里面就有数据了，非常非常非常之nice。我感觉前端每次最讨厌的就是要自己弄数据库，写接口，虽然不难写，但很麻烦，写着写着就没精力开发了。

1.先注册

https://partners.shopify.com/，这个网站就是专门为开发者提供的网站，随便什么邮箱都能注册，我用的126的反正，是ok的。

2.验证邮箱

邮箱要验证，会给你邮箱发个邮件，那个邮件如果你是在电脑上直接点击的验证，是没问题的，要是在手机上点击验证，是不行的，必须在电脑上（我已经试过了），然后你在手机上点击验证，再在电脑上点击（通过邮件上的网址），可能会没有验证成功，再登陆这个网站的时候https://shopify.dev/，可能会报错verify your email，这个时候你要去https://partners.shopify.com/里面，在右上角里点击个人中心，然后看你的邮箱是不是显示的未验证，如果是在这个页面的最上面有写着重新发送邮件验证邮箱，再重新发一次，你在电脑上点击验证就ok啦

3.结束语

到此全都搞定了，然后你进入https://dev.shopify.com/dashboard，页面如下，点击create dev store就可以啦。就开始创建自己的商店了。这个商店别人也能看，有密码，给他就好了，这个密码，在vscode开发的时候也要用到
在这里插入图片描述
这就是创建的开发商店，他里面会有模拟数据，非常nice。我感觉如果想学运营的，也是可以用这个方法，然后功能都熟悉了，说自己做过shopify也不是不可以哦，哈哈哈

二、vscode预览

1.shopify-cli

我是用的shopify-cli，因为我是纯自己研究的，我也不知道还有没有其他的。毕竟我现在刚站门口，哈哈哈。有厉害的可以带带我
装的时候，我用的是npm i -g @shopify/cli。我本来用的shopify-cli，结果它不识别shopify的命令，我又去查，才发现名字不对，shopify-cli偏偏还能安装，就绝了。

2.初始化一个项目

shopify theme init
在这里插入图片描述
他就两个问题，第二个问题是你选择哪个ai开发工具，我是装了copilot所以我就选了它，但我装是装了，没买，哈哈哈。关于shopify开发中的任何问题我都是直接问题的shopify里自带的ai，我觉得还蛮好用的，哈哈哈。起码确确实实帮我解决了问题，毕竟自家的ai应该还是比较了解自家的系统的
在这里插入图片描述

3.预览

shopify theme dev
默认不是热更新哦，shopify theme dev --hot-reload，加这个就是热更新啦。https://shopify.dev/docs/api/shopify-cli/theme/theme-dev更多的命令在这里找吧，我是属于能用就行，我可能比较专注于功能的实现

当你执行完这句话之后页面会出现下面这个提示，然后你回车shift一下就会自动打开默认浏览器，出现一个登录页面了

在这里插入图片描述