如何找到Shopify代码编辑区中需修改的指定HTML代码

• 登录Shopify后台，依次点击左侧菜单栏「在线商店」->「主题」
• 找到当前处于启用状态的主题，点击右侧「操作」下拉按钮，选择「编辑代码」即可进入站点源码编辑界面

你截图中的代码可优先用全局搜索的方式快速定位，点击编辑器顶部的搜索框，输入代码里的唯一特征字符串（比如特殊CSS类名、固定文本内容），选择全文件搜索，就能直接跳转到对应文件的对应行号，无需逐个文件翻找。

如果要按页面类型手动查找，可参考以下对应关系：

• 全局公共结构（头部、全局引入资源、页面外层框架等）：查找Layout目录下的theme.liquid文件，这是全站的根布局文件，所有页面的公共外层代码都存放在这里
• 首页专属内容：查找Sections目录下的index.liquid，或是对应首页模块的独立section文件（比如轮播、商品推荐模块对应的单独liquid文件）
• 商品详情页内容：查找Templates目录下的product.liquid，或是Sections目录下的product-template.liquid
• 集合列表页内容：查找Templates目录下的collection.liquid，或是Sections目录下的collection-template.liquid
• 页脚专属内容：查找Sections目录下的footer.liquid

如果你的主题是Online Store 2.0版本，部分模块代码是后台可视化自定义器添加的区块生成的，你可以先进入主题「自定义」界面，找到对应模块查看是否支持在设置面板直接修改，无需编辑源码。

内容的提问来源于stack exchange，提问作者fawraw