How to Display the Cart Total in Your Shopify Header

How to Display the Cart Total in Your Shopify Header

If you want to show the total price of items in the cart directly in your Shopify store’s header, follow these step-by-step instructions. This customization requires editing code, so make sure to follow the steps carefully.

Step 1: Access Your Shopify Theme Files

1. Login to Shopify: Log in to your Shopify account and navigate to your Shopify admin dashboard.
2. Access Theme Editor: From the Shopify admin dashboard, go to Online Store > Themes. Find the theme you want to edit and click Actions > Edit code.

Step 2: Create a New Section File

1. Create cart-total.liquid: In the theme editor, under the Sections directory, click Add a new section. Name the file cart-total.liquid and click Create section.
2. Add Liquid Code: Paste the following code into the new cart-total.liquid file:

   {{ cart.total_price | money }}

Step 3: Update cart.js File

1. Find cart.js: In the theme editor, locate the assets directory and find the cart.js file.
2. Update getSectionsToRender(): Inside cart.js, find the getSectionsToRender() function and add the following code below the chat bubble section:

   {
     id: 'cart-total',
     section: 'cart-total',
     selector: '.shopify-section'
   }

Step 4: Update cart-notification.js File

1. Find cart-notification.js: Similarly, in the assets directory, locate the cart-notification.js file.
2. Update getSectionsToRender(): Inside cart-notification.js, find the getSectionsToRender() function and add the following code to include the cart total section:

   {
     id: 'cart-total'
   }

Step 5: Place Code in header.liquid

1. Find header.liquid: In the theme editor, navigate to the Sections directory and find the header.liquid file.
2. Paste Before Cart Icon Link: Paste the following code just before the cart icon link in header.liquid:

   <style>
        .total-container {
          display: grid; 
    place-items: center;
        }
       
      </style>
      <div class="total-container" id="cart-total">
        <span class="centered-text">{{ cart.total_price | money }}</span>
      </div>

PASTE THE CODE BELOW THE LINE NOW THIS TEXT USUALLY by line 319

   <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">

Step 6: Save Changes and Test

1. Save Changes: After making the edits, click Save to save the changes to your theme files.
2. Test the Display: Visit your Shopify store and add items to the cart. The total price should now be displayed in the header.

That’s it! You’ve successfully added the cart total to your Shopify header. If you encounter any issues, double-check the code and ensure you’ve followed the steps correctly.