⚠️ Important notice
This customization only works with Version 1 of the Upcart cart modules. If you recently upgraded your cart to Version 2, these customizations may not work. You will need to use the new selectors provided for Version 2 in the migration guide.
If your customizations are not working as expected, you can also revert your cart back to Version 1 instead of using Version 2.
We are currently working on new customization templates for Version 2 of the modules, and they will be available soon.
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.
Enabling Subtotal Line
You can easily enable the Subtotal line in the cart Design settings.
Here is where to find the setting:
Cart Editor > Design > Theme Settings > Enable Subtotal Line
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.