⚠️ 重要提示 此自定义功能仅适用于 Upcart 购物车模块的版本 1。如果你最近将购物车升级到了版本 2，这些自定义可能无法工作。你需要使用迁移指南中为版本 2 提供的新选择器。如果你的自定义功能未按预期工作，你可以自行将购物车回退到版本 1：在购物车编辑器中，使用左侧菜单顶部的 Cart version 下拉菜单并选择 V1.0 (Legacy)。该下拉菜单会在购物车中所有模块都升级到 V2 后出现。我们目前正在为模块版本 2 开发新的自定义模板，很快就会推出。

概述

此自定义功能可让你在购物车中存在特定商品时隐藏购物车的特定部分，例如奖励进度条。当你想为某些 SKU 简化购物车体验，或防止特定促销活动与某些商品同时出现时，此功能非常有用。此设置使用商品 ID 来检测购物车中有哪些商品，并在找到匹配项时隐藏所选元素。你将在 Upcart 编辑器中使用自定义 HTML 和 CSS 来应用该逻辑。

何时使用

当购物车中有促销商品时隐藏奖励进度条
根据商品类型隐藏自定义内容块、信任徽章或 upsell 版块
为特定商品保持更简洁或更有针对性的结账流程

此方法需要基础的 HTML 和 JavaScript 知识。

第 1 步：查找商品 ID

前往 Shopify Admin > Products
点击你要定位的商品
从 URL 中 /products/ 之后复制数字商品 ID

示例：

/products/1234567890 → 1234567890

你将在控制可见性的 JavaScript 数组中使用这些 ID。

第 2 步：添加自定义 HTML

前往 Upcart > Cart Editor > Settings > Custom HTML
将以下代码同时粘贴到 Above announcements/rewards 和 On empty cart screen 两个 HTML 位置
将 productIDsToExclude 中的值替换为你的商品 ID
将 .YOUR-CLASS-HERE 更新为你想隐藏的购物车元素（例如：.upcart-rewards、.custom-message、.trust-badge）

<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>

旧版说明： window.upcartOnCartLoaded 回调仍然可用，但已被弃用并会在控制台记录警告。所有新脚本请使用 upcartSubscribeCartLoaded。

第 3 步：可选的后备 CSS

如果你想确保元素在购物车完全加载之前就被隐藏，请在 Custom CSS 部分添加以下代码：

.YOUR-CLASS-HERE {   display: none; }

注意： 在 JavaScript 运行之前，这可能会对所有用户临时隐藏该元素，从而导致闪烁。在大多数情况下，最好依靠 JavaScript 方法。

最终效果

设置完成后：

如果购物车包含指定商品之一，目标购物车元素（例如奖励进度条）将被隐藏
否则该元素保持可见
你可以复用此逻辑，根据针对特定商品的规则隐藏或显示不同元素

仍需帮助？

对于更复杂的自定义功能，我们建议与 Shopify 专家合作。他们可以协助处理购物车抽屉内的 HTML、CSS 和 JavaScript。查看 Shopify 专家

开始使用

购物车模块

购物车设置

固定购物车按钮

Multicart

自定义

分析

集成与兼容性

计费与账户

故障排除

使用商品 ID 隐藏特定购物车元素

概述

何时使用

第 1 步：查找商品 ID

第 2 步：添加自定义 HTML

第 3 步：可选的后备 CSS

最终效果

仍需帮助？

​概述

​何时使用

​第 1 步：查找商品 ID

​第 2 步：添加自定义 HTML

​第 3 步：可选的后备 CSS

​最终效果

​仍需帮助？

概述

何时使用

第 1 步：查找商品 ID

第 2 步：添加自定义 HTML

第 3 步：可选的后备 CSS

最终效果

仍需帮助？