Overview

This customization adds a clear cost breakdown above the checkout button, showing subtotal, shipping, and total based on a fixed shipping rate.

It helps customers understand their final amount before checkout, improving trust and reducing hesitation.

Important: This method only works with fixed shipping rates. If your store uses dynamic shipping, results may be inaccurate.

If you are on Upcart V1.0

Step 1: Add custom HTML

Go to Upcart > Cart Editor > Settings > Custom HTML
From the Select HTML Location dropdown, choose Above checkout button
Paste the following code and update the variables to reflect your store’s shipping cost and threshold:

<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;

  upcartOnCartLoaded = (cart) => {
    var shippingText = window.upcartDocumentOrShadowRoot.querySelector(".upcartShipping");
    var endTotal = window.upcartDocumentOrShadowRoot.querySelector(".upcartEndTotal");

    if (cart.total_price < shippingThreshold) {
      shippingText.innerText = textWhenUnderShippingThreshold;

      if (shouldCurrencySymbolBeOnLeftSide) {
        endTotal.innerText =
          currencySymbolToAddInfrontOfEndPrice +
          ((cart.total_price + shippingCostWhenUnderThreshold) / 100).toFixed(2);
      } else {
        endTotal.innerText =
          ((cart.total_price + shippingCostWhenUnderThreshold) / 100).toFixed(2) +
          currencySymbolToAddInfrontOfEndPrice;
      }

    } else {
      shippingText.innerText = textWhenOverShippingThreshold;

      if (shouldCurrencySymbolBeOnLeftSide) {
        endTotal.innerText =
          currencySymbolToAddInfrontOfEndPrice +
          (cart.total_price / 100).toFixed(2);
      } else {
        endTotal.innerText =
          (cart.total_price / 100).toFixed(2) +
          currencySymbolToAddInfrontOfEndPrice;
      }
    }
  };
</script>

Step 2: Add custom CSS

Go to Upcart > Cart Editor > Settings > Custom CSS
Paste the following CSS and adjust background-color or other styles to match your cart footer:

.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;
}

Final result

Once applied:

A cost breakdown appears above the checkout button
Customers see subtotal, shipping (fixed or FREE), and total
The shipping cost dynamically adjusts based on your threshold

This increases cost transparency, improves trust, and can reduce checkout abandonment.

If you are on Upcart V2.0

Step 1: Go to cart summary module

Go to Upcart > Cart Editor > Cart Summary > Custom template

Paste the following code:

The custom code for the section is from Line 52 to Line 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-internal-cart-summary__total-discount upcart-public-cart-summary__total-discount"
        dangerouslySetInnerHTML={{
          __html: props.formattedCartTotalDiscount,
        }}
      />
    </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">
        ${(props.totalAfterAllDiscounts / 100).toFixed(2)}
      </span>
    </div>
  </div>
</div>

b. The relevant part is this section from line 52 - 73, use this doc to decide what value you are planning to display on the screen

  <hr />

  <div className="upcart-custom-cart-summary__container">
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">
      Subtotal:
      <span
        className="upcart-internal-cart-summary__total-discount upcart-public-cart-summary__total-discount"
        dangerouslySetInnerHTML={{
          __html: props.formattedCartTotalDiscount,
        }}
      />
    </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">
        ${(props.totalAfterAllDiscounts / 100).toFixed(2)}
      </span>
    </div>
  </div>

c. Go to Upcart > Cart Editor > Settings > Custom CSS, add this:

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

Need help?

If you want to adapt this for multiple shipping thresholds or advanced logic, we recommend working with a Shopify Expert. Upcart’s support team does not provide assistance with implementing or debugging custom code.

Adding A Subtotal Line To Upcart

Setting Up a Custom Template in Upcart

Add an End Total Line Above the Checkout Button