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.
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-coloror 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.
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.