💡
Shopify 代码修改添加不再难,看这一期就够了
写在前面
首先感谢 Shopify 官方 Vikki 最近撰文介绍关于我的内容,如果你是最近接触或关注我的视频教程,可以 点击查看 Shopify 官方发布的文章
本期教程即使你完全不懂代码,没有用过 VS Code,也能跟着操作。
为什么要掌握查找和定位
绝大部分店铺都需要在运营过程中添加代码。其中,营销或插件代码一般加在 theme.liquid 中,在店铺后台编辑器中直接添加即可,一般广告平台或插件方都会告知加在哪个位置。
我的教程大多数也会尽量在店铺后台编辑器中演示,这样方便你跟着操作。但是有时主题版本不同代码或其所在的位置会不一样(改变),以及如果你想在不同的主题上尝试我的教程,就需要掌握网页元素的查找和定位方法,以便进行代码添加或修改。
工具和用法
之前已经发过 相关的视频教程 了,但也有反馈说不会用或者平台更新之后不好用,因此本期教程介绍通过 VS Code 来实现相关操作,避免受平台或浏览器插件更新影响。
操作步骤
- 下载并安装 VS Code
- 在店铺后台下载主题(参考视频演示)
- 解压文件
- 在 VS Code 中打开解压后的文件夹
- 搜索、修改、保存
- 压缩打包,上传到店铺后台
- 预览和发布主题
关于压缩:
Mac 可以直接在 VS Code 内置终端中使用命令行操作:
zip -r theme.zip . -x ".DS_Store"
Windows 推荐使用 7-zip,免费无广告。或者系统自带的压缩/解压功能。