跳转至主要内容
Shopify 主题开发

第 183 期 Shopify 店铺如何查找和定位元素 修改主题或添加代码 终极新手教程

通过 YouTube 观看本期 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,免费无广告。或者系统自带的压缩/解压功能。

相关教程推荐