Introduction
Welcome to this custom CSS tutorial! We’ll guide you through how to add an End Total line (Subtotal + Fixed Shipping + End Total) right above the checkout button using CSS. This is a great way to give your customers a clear breakdown of their costs just before they proceed to checkout.
If you're a store owner or developer with some basic CSS skills, this customization is for you. It not only enhances transparency but also improves the overall shopping experience by keeping the key cost details visible at the perfect moment. With a fixed shipping cost included in the total, your customers will have a better understanding of their final payment before completing the purchase.
Let’s dive in and make your checkout page more informative and customer-friendly!
WARNING: This is only designed to work with fixed shipping costs.
Accessing Custom CSS and HTML Settings
To begin customizing the CSS for your UpCart, follow these steps:
Open the UpCart App within your dashboard.
Navigate to the Cart Editor.
Click on Settings and scroll to the bottom of the page until you find the section labeled “Custom HTML” and "Custom CSS".
Here is the HTML Code to Copy and Paste into the HTML Section titled “Above Checkout Line”
Please note: Ensure you change the values of the variables below to match your current shipping thresholds.
<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>
// What value the free shipping unlocks, removing decimal points
var shippingThreshold = 15000;
// What the shipping cost will be, removing decimal points
var shippingCostWhenUnderThreshold = 290;
// What text to show when free shipping is NOT unlocked
var textWhenUnderShippingThreshold = "$2.90";
// What text to show when free shipping IS unlocked
var textWhenOverShippingThreshold = "FREE";
// What currency is this in? ($, €, £, ¥, etc.)
var currencySymbolToAddInfrontOfEndPrice = "$";
// true means the currency symbol should be on the left side.
// false means it should be on the the right side instead.
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>
Here is the CSS Code to Copy and Paste into the CSS Section:
Please note: Change background-color to match the color of the cart’s footer.
.upcart-footer
{
padding-top: 0px !important;
}
.cartSummarySection
{
background-color: #f6f4ef !important;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 23px;
padding-right: 23px;
}
.cartSummarySubtotal, .cartSummaryEndTotal,
.cartSummaryShipping
{
color:black;
width:100%;
text-align:left;
padding-left:0px;
padding-right:0px;
font-weight: normal;
font-size: 16px;
}
#CartPopup hr
{
margin: 0px !important;
}
.alignLeft
{
float: left;
}
.alignRight
{
float: right;
}
Below are example images of the tutorial outcome:
Under Shipping Threshold
Above the Shipping Threshold
Conclusion
And that's it! You've successfully learned how to add an End Total line above the checkout button. This simple enhancement helps improve transparency, making the checkout process smoother for your customers.
Still Need Help?
If you need any assistance with customizations, we recommend consulting with a Shopify Expert about adding HTML, CSS, and even JavaScript to your cart drawer.