Adding A Subtotal Line To Upcart

For those that prefer to have a subtotal line also be displayed above the checkout button

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:

1. Open the Upcart App within your dashboard.
2. Navigate to the Cart Editor.
3. 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="cart-subtotal-section"   
  style="display: flex; justify-content: space-between;"  
>  
  <span class="cart-subtotal-title">Subtotal</span>  
  <span class="cart-subtotal-value">#{{UPCART_SUBTOTAL}}</span>  
</div>

This is how your custom HTML settings should look like in Upcart:

CSS

In Settings =>Custom CSS, Change the font size and colors in custom CSS as needed. Don’t forget to hit “Save” when you’re done!

.cart-subtotal-section {  
  margin-bottom: 4px;  
}  
  
.cart-subtotal-title {  
  font-size: 24px;  
  color: red;  
}  
  
.cart-subtotal-value {  
  font-size: 18px;  
  color: green  
}

---

🚧 Support for Customizations

Upcart’s support team cannot assist with implementing custom CSS or HTML solutions in your cart.

If you need help designing or styling something custom, we recommend consulting a Shopify Expert:

See Shopify Experts