如何访问checkout page与order details page的Liquid文件并替换自定义商品图片

阿华AIGC实验室

2026-5-15

如何在Shopify结账页和订单详情页替换自定义商品图片

嘿，我完全懂你现在的困扰——想替换结账页和订单详情页的商品图片，翻遍主题代码却找不到对应的Liquid文件对吧？这其实是Shopify的平台机制问题，我给你拆解下原因和可行的解决方案：

为什么找不到对应的Liquid文件？

Shopify的结账页（Checkout）核心部分是平台托管的，普通商家（非Shopify Plus）没有权限直接编辑底层Liquid文件；而订单详情页如果是Shopify官方托管的版本，同样没法直接修改核心代码。只有Shopify Plus商家能解锁这类页面的完整编辑权限。

下面分两种情况给你针对性方案：

如果你是Shopify Plus商家：直接编辑Liquid文件

Plus商家可以直接修改结账和订单相关的Liquid代码，步骤如下：

登录店铺后台，进入「在线商店」→「主题」
找到正在使用的主题，点击「操作」→「编辑代码」
在左侧文件列表里，找到「Checkout」文件夹，里面会有checkout.liquid、line-items.liquid这类核心文件
找到渲染商品图片的代码块（通常是{{ line_item.image | img_url: 'medium' }}这类Liquid标签），把它替换成你的自定义图片URL。比如可以结合商品元字段动态获取：{{ line_item.product.metafields.custom.custom_image.value }}（前提是你已经给商品添加了对应元字段）

如果你是非Plus商家：用替代方案实现

方案1：元字段 + 脚本注入

这是最常用的免费实现方案，步骤如下：

给商品添加自定义图片元字段
- 进入店铺后台的「产品」，编辑目标商品，拉到页面底部的「元字段」区域
- 添加一个新元字段，命名比如custom_image，类型选「URL」，填入你自定义图片的链接（建议把图片上传到Shopify文件库，确保链接稳定）

在结账页注入替换脚本

进入「设置」→「结账」，找到「附加脚本」区域
粘贴一段自定义JavaScript脚本，用来替换页面上的商品图片。这里给你一个基础示例（记得根据你店铺的HTML结构调整选择器）：

document.addEventListener('DOMContentLoaded', function() {
  // 示例中直接写死映射关系，实际可以结合元字段渲染逻辑优化
  const customImageMap = {
    '商品ID1': 'https://你的店铺域名.com/自定义图片1.jpg',
    '商品ID2': 'https://你的店铺域名.com/自定义图片2.jpg'
  };

  // 找到结账页的所有商品图片元素
  const productImgs = document.querySelectorAll('.line-item__image img');
  productImgs.forEach(img => {
    // 获取当前商品的ID（需根据店铺HTML结构调整，比如从data属性读取）
    const productId = img.closest('.line-item').dataset.productId;
    if (customImageMap[productId]) {
      img.src = customImageMap[productId];
      img.srcset = customImageMap[productId]; // 适配响应式展示
    }
  });
});

小提示：可以用浏览器开发者工具（F12）查看结账页的HTML结构，确认商品元素的类名和商品ID的存储位置，调整脚本里的选择器。

方案2：订单详情页的特殊处理

如果是店铺前台的订单详情页（非Shopify托管），可以先检查主题的「Templates」文件夹里有没有order.liquid，或者「Sections」里的订单相关片段。如果找到了，直接修改图片渲染逻辑即可；如果还是找不到，同样可以用上面的脚本注入方法，把脚本添加到主题的theme.liquid的</body>标签前，或者用店铺后台「在线商店」→「偏好设置」里的「额外代码」区域注入。