Introduction
If the subtotal setting (pictured below) isn't working for you, here's a document going over how to insert a subtotal line manually.
Inserting Subtotal via Code
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 below that is "Custom CSS".
HTML
Make sure to select an HTML location to target the changes you would like to see in UpCart. In our case, we would want the subtotal line to be "above the checkout button". Feel free to change the "Subtotal" text below to match your preferred language.
<div class="cartSummarySection">
<div class="cartSubtotalTitle alignLeft" >Subtotal
<span class="cartSubtotalValue alignRight">{{UPCART_SUBTOTAL}}</span>
</div>
<div style="clear: both; display:flex;"></div>
</div>
This is how your custom HTML settings should look like in UpCart:
CSS
Change the font size and colors in :root as needed.
:root{
--summarySubtotalTitleFontSize: 20px;
--summarySubtotalValueFontSize: 20px;
--summarySubtotalTitleColor: black;
--summarySubtotalValueColor: black;
--summarySubtotalTitleWeight: bold;
--summarySubtotalValueWeight: normal;
}
.cartSummarySection {
padding-bottom: 10px;
padding-top: 10px;
}
.cartSubtotalTitle {
color: var(--summarySubtotalTitleColor);
width:100%;
text-align:left;
padding-left:0px;
padding-right:0px;
font-weight: var(--summarySubtotalTitleWeight);
font-size: var(--summarySubtotalTitleFontSize);
}
.cartSubtotalValue {
color: var(--summarySubtotalValueColor);
font-size: var(--summarySubtotalValueFontSize);
font-weight: var(--summarySubtotalValueWeight);
}
/* Utility */
.alignLeft {
float: left;
}
.alignRight {
float: right;
}
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.