如何访问并修改Shopify站点中指定单独页面的代码

你可以根据自己的改动量级选下面两种方案，都不会影响站点其他页面的正常展示：

• 方案1：仅添加自定义样式/脚本/小范围代码改动，用页面句柄判断即可，不用新建模板
  1. 进入Shopify后台，打开「在线商店」-「主题」，找到当前启用的主题，点右上角「操作」选择「编辑代码」
  2. 打开布局目录下的theme.liquid文件，在<head>标签结束前（如果是要加页面底部内容就放在</body>标签前）插入Liquid判断逻辑：

  {% if page.handle == 'iphone-6' %}
  <!-- 仅在目标页面加载的内容写在判断标签中间 -->
  <style>
    /* 该页面专属CSS样式写在这里 */
  </style>
  <script>
    // 该页面专属JS逻辑写在这里
  </script>
  <!-- 也可以插入自定义HTML模块 -->
  {% endif %}
  

  这里的iphone-6就是目标页面URL中/pages/后的字段，也就是页面的固定句柄，如果要给多个单独页面加自定义代码，直接在判断条件里用or拼接即可，比如{% if page.handle == 'iphone-6' or page.handle == 'samsung-s24' %}。
• 方案2：需要大幅调整页面结构、重构页面布局，新建专属页面模板
  1. 同样进入主题代码编辑页，找到「模板」目录，点击「添加新模板」
  2. 模板类型选择「页面」，自定义模板名称（比如page-iphone6）后完成创建
  3. 在新建的模板文件中自由修改代码结构，调整成你需要的页面效果即可，这个模板的代码完全独立，不会影响其他默认页面
  4. 回到后台「在线商店」-「页面」列表，打开你要修改的目标页面，拉到页面底部的模板选择区域，选中你刚创建的专属模板，保存后页面就会套用新的独立模板。

注意：修改代码前建议先备份当前主题，在主题的「操作」菜单里点「备份主题」导出备份包，避免代码改错导致站点异常时无法快速回滚。

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