第 183 期 Shopify 店铺如何查找和定位元素 修改主题或添加代码 终极新手教程
💡
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，免费无广告。或者系统自带的压缩/解压功能。