概述

此定制会在 checkout 按钮上方添加清晰的费用明细，基于固定运费费率显示小计、运费和总计。它帮助客户在 checkout 之前了解最终金额，从而提升信任并减少犹豫。 **重要提示：**此方法仅适用于固定运费费率。如果你的商店使用动态运费，结果可能不准确。

如果你使用的是 Upcart V1.0

第 1 步：添加自定义 HTML

前往 Upcart > Cart Editor > Settings > Custom HTML
在 Select HTML Location 下拉菜单中，选择 Above checkout button
粘贴以下代码，并更新变量以反映你商店的运费和门槛：

<hr>  
  
<div class="cartSummarySection">  
  <div class="cartSummarySubtotal alignLeft">  
    Subtotal:  
    <span class="alignRight subtotalprice">{{UPCART_SUBTOTAL}}</span>  
  </div>  
  
  <div class="cartSummaryShipping alignLeft">  
    Shipping:  
    <span class="alignRight upcartShipping"></span>  
  </div>  
  
  <div class="cartSummaryEndTotal alignLeft">  
    Total:  
    <span class="alignRight upcartEndTotal"></span>  
  </div>  
  
  <div style="clear: both; display: flex;"></div>  
</div>  
  
<script>  
  var shippingThreshold = 15000; // In cents  
  var shippingCostWhenUnderThreshold = 290; // In cents  
  var textWhenUnderShippingThreshold = "$2.90";  
  var textWhenOverShippingThreshold = "FREE";  
  var currencySymbolToAddInfrontOfEndPrice = "$";  
  var shouldCurrencySymbolBeOnLeftSide = true;  
  
  window.upcartSubscribeCartLoaded((event) => {  
    var shippingText = window.upcartDocumentOrShadowRoot.querySelector(".upcartShipping");  
    var endTotal = window.upcartDocumentOrShadowRoot.querySelector(".upcartEndTotal");  
  
    if (event.cart.total < shippingThreshold) {  
      shippingText.innerText = textWhenUnderShippingThreshold;  
  
      if (shouldCurrencySymbolBeOnLeftSide) {  
        endTotal.innerText =  
          currencySymbolToAddInfrontOfEndPrice +  
          ((event.cart.total + shippingCostWhenUnderThreshold) / 100).toFixed(2);  
      } else {  
        endTotal.innerText =  
          ((event.cart.total + shippingCostWhenUnderThreshold) / 100).toFixed(2) +  
          currencySymbolToAddInfrontOfEndPrice;  
      }  
  
    } else {  
      shippingText.innerText = textWhenOverShippingThreshold;  
  
      if (shouldCurrencySymbolBeOnLeftSide) {  
        endTotal.innerText =  
          currencySymbolToAddInfrontOfEndPrice +  
          (event.cart.total / 100).toFixed(2);  
      } else {  
        endTotal.innerText =  
          (event.cart.total / 100).toFixed(2) +  
          currencySymbolToAddInfrontOfEndPrice;  
      }  
    }  
  });  
</script>

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

第 2 步：添加自定义 CSS

前往 Upcart > Cart Editor > Settings > Custom CSS
粘贴以下 CSS，并调整 background-color 或其他样式以匹配你的购物车底部区域：

.upcart-footer {  
  padding-top: 0px !important;  
}  
  
.cartSummarySection {  
  background-color: #f6f4ef !important;  
  padding: 10px 23px;  
}  
  
.cartSummarySubtotal,  
.cartSummaryShipping,  
.cartSummaryEndTotal {  
  color: black;  
  width: 100%;  
  text-align: left;  
  font-weight: normal;  
  font-size: 16px;  
  padding: 0;  
}  
  
#CartPopup hr {  
  margin: 0px !important;  
}  
  
.alignLeft {  
  float: left;  
}  
  
.alignRight {  
  float: right;  
}

最终效果

应用后：

checkout 按钮上方会显示费用明细
客户可以看到小计、运费（固定金额或 FREE）和总计
运费会根据你的门槛动态调整

这提高了费用透明度、提升了信任，并有助于减少 checkout 弃单。

如果你使用的是 Upcart V2.0

第 1 步：前往购物车汇总模块

首先启用自定义模板：在 Upcart > Cart Editor > Settings > Cart settings 中，展开 Advanced Settings 并勾选 Access custom templates。该设置默认关闭，在开启之前，Cart summary 标签页只会显示”Custom templates aren’t enabled”消息，而没有编辑器。
前往 Upcart > Cart Editor > Cart summary > Custom template

粘贴以下代码：

该区域的自定义代码位于第 52 行到第 73 行

<div>  
  <div className="upcart-internal-cart-summary upcart-public-cart-summary">  
    <div className="upcart-internal-cart-summary__discount-codes upcart-public-cart-summary__discount-codes">  
      <span className="upcart-internal-cart-summary__discount-label upcart-public-cart-summary__discount-label">  
        {props.totalSavingsText}  
      </span>  
  
      <div className="upcart-internal-cart-summary__slide-codes upcart-public-cart-summary__slide-codes">  
        {props.discountApplications.map((discountApplication) => (  
          <span  
            key={discountApplication.key}  
            className="upcart-internal-component-tag upcart-public-component-tag"  
          >  
            <span className="upcart-internal-component-tag__icon upcart-public-component-tag__icon">  
              <svg  
                xmlns="http://www.w3.org/2000/svg"  
                viewBox="0 0 20 20"  
                focusable="false"  
              >  
                <title>Discount tag icon</title>  
                <path  
                  fillRule="evenodd"  
                  d="M8.575 4.649a3.75 3.75 0 0 1 2.7-1.149h1.975a3.25 3.25 0 0 1 3.25 3.25v2.187a3.25 3.25 0 0 1-.996 2.34l-4.747 4.572a2.5 2.5 0 0 1-3.502-.033l-2.898-2.898a2.75 2.75 0 0 1-.036-3.852l4.254-4.417Zm4.425 3.351a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"  
                />  
              </svg>  
            </span>  
  
            <span className="upcart-internal-component-tag__text upcart-public-component-tag__text">  
              {discountApplication.title}  
            </span>  
  
            {discountApplication.type === "discount_code" && (  
              <button  
                type="button"  
                className="upcart-internal-component-tag__remove-button upcart-public-component-tag__remove-button"  
                onClick={props.handleRemoveDiscount}  
                aria-label="Remove tag"  
              >  
                {props.isRemovingDiscount ? (  
                  <div className="upcart-internal-component-loader upcart-public-component-loader" />  
                ) : (  
                  <svg  
                    xmlns="http://www.w3.org/2000/svg"  
                    viewBox="0 0 20 20"  
                  >  
                    <path d="M12.72 13.78a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-2.72 2.72-2.72-2.72a.75.75 0 0 0-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72 2.72 2.72Z" />  
                  </svg>  
                )}  
              </button>  
            )}  
          </span>  
        ))}  
      </div>  
    </div>  
  
    <div>  
      {props.showCartTotalDiscount && (  
        <span  
          className="upcart-internal-cart-summary__total-discount upcart-public-cart-summary__total-discount"  
          dangerouslySetInnerHTML={{  
            __html: props.formattedCartTotalDiscount,  
          }}  
        />  
      )}  
    </div>  
  </div>  
  
  {/* Custom code for summary section */}  
  <hr />  
  
  <div className="upcart-custom-cart-summary__container">  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">  
      Subtotal:  
      <span className="upcart-custom-cart-summary__subtotal-value">  
        ${(props.totalAfterAllDiscounts / 100).toFixed(2)}  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__shipping">  
      Shipping:  
      <span className="upcart-custom-cart-summary__shipping-value">  
        $2.99  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__cart-total">  
      Total:  
      <span className="upcart-custom-cart-summary__cart-total-value">  
        {/* totalAfterAllDiscounts excludes shipping — add the same 299 cents shown above. */}  
        ${((props.totalAfterAllDiscounts + 299) / 100).toFixed(2)}  
      </span>  
    </div>  
  </div>  
</div>

b. 相关部分是第 52 - 73 行的这一段，请参考这篇文档来决定你计划在屏幕上显示什么值

  <hr />  
  
  <div className="upcart-custom-cart-summary__container">  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">  
      Subtotal:  
      <span className="upcart-custom-cart-summary__subtotal-value">  
        ${(props.totalAfterAllDiscounts / 100).toFixed(2)}  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__shipping">  
      Shipping:  
      <span className="upcart-custom-cart-summary__shipping-value">  
        $2.99  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__cart-total">  
      Total:  
      <span className="upcart-custom-cart-summary__cart-total-value">  
        {/* totalAfterAllDiscounts excludes shipping — add the same 299 cents shown above. */}  
        ${((props.totalAfterAllDiscounts + 299) / 100).toFixed(2)}  
      </span>  
    </div>  
  </div>

c. 前往 **Upcart > Cart Editor > Settings > Custom CSS，**添加以下内容：

.upcart-custom-cart-summary__row {  
  display: flex;  
  flex-direction: row;  
  justify-content: space-between;  
}

需要帮助？

如果你想将此方案改造为支持多个运费门槛或更高级的逻辑，我们建议与 Shopify 专家合作。Upcart 的支持团队不提供实现或调试自定义代码方面的协助。

开始使用

购物车模块

购物车设置

固定购物车按钮

Multicart

自定义

分析

集成与兼容性

计费与账户

故障排除

在 checkout 按钮上方添加最终总计行

概述

如果你使用的是 Upcart V1.0

第 1 步：添加自定义 HTML

第 2 步：添加自定义 CSS

最终效果

如果你使用的是 Upcart V2.0

第 1 步：前往购物车汇总模块

需要帮助？

​概述

​如果你使用的是 Upcart V1.0

​第 1 步：添加自定义 HTML

​第 2 步：添加自定义 CSS

​最终效果

​如果你使用的是 Upcart V2.0

​第 1 步：前往购物车汇总模块

​需要帮助？

概述

如果你使用的是 Upcart V1.0

第 1 步：添加自定义 HTML

第 2 步：添加自定义 CSS

最终效果

如果你使用的是 Upcart V2.0

第 1 步：前往购物车汇总模块

需要帮助？