Total cart amount line

Topic summary

A Shopify store owner wants to add a custom line displaying the total cart amount beneath the cart icon on mobile view. The cart itself functions correctly—this is purely a visual enhancement.

Solution Provided:

  • Create a custom snippet called ‘custom-cart-total’ in the theme code editor
  • Use Liquid code with {{ cart.total_price | money }} or {{ cart.total_price | money_with_currency }} depending on whether currency symbol is needed
  • Add custom CSS styling within the snippet
  • Render the snippet wherever the total should appear using {% render 'custom-cart-total' %}

Remaining Issues:

  • Styling: The text needs to be smaller and positioned directly under the cart icon
  • Dynamic Updates: The total shows “00” until page refresh when items are added to cart, requiring JavaScript modifications

The responder notes that implementing the JavaScript fix requires theme-specific knowledge and recommends hiring a Shopify developer if the store owner lacks sufficient JavaScript experience, as cart update logic varies significantly between themes.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.

Hi, I wanna code fix under the cart ion an line with { total cart amount } ..I ve coded it somehow but it s doesnt calculating when you add to cart… Please help me achieve this.. my website: www.aiciavem.ro

1 Like

Hi there! I’d be happy to help you fix the cart total issue on your website. Can you please share the code snippet you’ve tried so far? Additionally, what platform or ecommerce system is your website built on (e.g. Shopify, WooCommerce , custom)? This will help me better understand and provide a more accurate solution.

Hey @Sao23 ,

Thanks for sharing your store URL! I went ahead and added some products to the cart, and everything seems to be working perfectly. The cart total updated as expected when I added or removed products, or when I adjusted the quantities. You can check the screenshot I’ve added below for reference:

If I’ve missed anything or if there’s something else you’re trying to address, please feel free to let me know. Otherwise, rest assured that your store’s cart journey is working smoothly, and everything seems to be functioning as expected for your customers.

If my response helped you, please consider giving it a like ( :+1: ) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Thank you!

Regards,

Abhishek from Swym

Hi Mr. Swym , sorry if my english wasnt or is not the best. I don t have any problem with the cart, all is working perfectly.. I just wanna add on mobile view an “ total amount in cart “ line under the cart icon.. All is working perfectly ,it s just an upgrade that I want

Hi @Sao23 ,

Thanks for confirming that everything works as expected and letting me know what you’re looking for.

Now, to add a line that shows the total price of the cart, you can follow these steps:

  1. Open the code editor, as shown in the screenshot below.

  1. Create a snippet called ‘custom-cart-total’ and add the below code based on your needs. Don’t forget to include your custom CSS within the style tag, as shown in the code, to ensure the total price is displayed in the layout you desire on your store.

a. If you would like to display the price without currency, use this code:

Total amount in cart: {{ cart.total_price | money }}

{% comment %} 
  Add the desired styling for the price component inside the style tag 
{% endcomment %}

​

b. If you would like to display the price with currency, use this code:

Total amount in cart: {{ cart.total_price | money_with_currency }}

{% comment %} 
  Add the desired styling for the price component inside the style tag 
{% endcomment %}

​
  1. To display the total price on mobile devices, you can use the code below. Simply add it wherever you want the total price to appear on your store:
{% render 'custom-cart-total' %}
  1. Done? Now save the file, and try previewing to confirm if the changes work for you.

I hope this will help you in getting the desired layout.

If my responses helped you, please consider giving them a like ( :+1: ) and marking them as accepted solutions if they resolved your issue. Your feedback helps other community members with similar questions.

Thank you!

Regards,
Abhishek from Swym

1 Like

Thanks a lot! I ll try in some short time,thanks!

1 Like

Hi back Swym, sorry for late answer. I have 2 problems, one from styling, please help me put the widget fix under the cart icon, and with a lot more smaller text, and the secound one( probably js) , when you add something to cart, until you refresh the page it will still show you total: 00 ron

Hi @Sao23 ,

I can help you with the CSS. I checked your live theme and looks like you did not add this feature yet there and are working on a duplicate theme. Please share with me the preview link for your theme on which you have added this total price component and I will help you in improving the styling.

To update the cart price dynamically when products are added or removed, you’ll need to modify the JavaScript code to reflect the correct price every time the cart is updated. Since every theme has its own set of files and a unique structure, I can’t provide the exact code or suggest the right location to add it, especially in your case, where products can be added from multiple sections like the homepage, product pages, and collection pages.

If you’re not familiar with implementing this, I can suggest the steps to you, but it might not be helpful if you don’t have enough knowledge about Javascript. The best course of action would be to hire a Shopify developer who can assist you in properly implementing this solution for your store.

Thank you!

Regards,
Abhishek from Swym

1 Like

Thanks a lot Swym!

1 Like