How can I make the 'Add to Cart' button refresh the cart counter?

Store Design

Topic summary

Main issue: The product page’s “Add to Cart” button didn’t visibly update the cart counter/icon unless the page was refreshed; clicking twice triggered the refresh. The cart icon had been hidden when empty, causing the counter not to appear immediately after adding an item.

Diagnostics: After removing custom code that hid the cart in header.liquid (conditional using cart.item_count > 0), the counter refreshed correctly. The goal remained to hide the cart when empty without breaking the refresh.

Key detail: The cart was hidden via Liquid (Shopify’s templating language) in header.liquid, which removed the icon from the page when empty. This interfered with immediate visual updates.

Resolution: Instead of conditionally removing the icon, the empty cart SVG icon (icon-cart-empty.liquid) was kept in the DOM but made invisible by adding opacity=“0” to the SVG path. This preserves the element for updates, keeps the icon hidden when empty, and allows it to appear immediately after adding to cart.

Outcome: Issue resolved. A request was made to mark the solution. Discussion concluded without further open questions.

Summarized with AI on February 11. AI used: gpt-5.
1

Hello! I am trying to make my “Add to Cart” button on the product page refresh the cart counter. The reason for this is that I have made the cart hidden until there is something in it, but when “Add to Cart” is clicked, the cart cannot be found until the page is refreshed. I tried to add an onclick reload, but for some reason it does nothing until I click the button a second time. So, it seems to be doing something, just not quite what I’m looking for. Below is the button code in main-product.liquid, and here is a link to my site:

https://mqosyvav5f5dlfb1-59244052537.shopifypreview.com


                 
                  
             
                    {%- if block.settings.show_dynamic_checkout -%}
                      {{ form | payment_button }}
                    {%- endif -%}
2

Hi @talula ,

Can you re-enable the cart icon? I will help you check it

1 Like
3

To be entirely honest, I don’t remember where I pasted the code to hide the cart when empty. The cart icon is not completely disabled though, it shows up when the page is refreshed, I just need to be able to refresh the page automatically when someone clicks “add to cart”. If you click “add to cart” twice, the page refreshes, I just want it to refresh on the first click.

4

Hi @talula ,

Can you resend me the preview link? I will check it for you

5

Thank you! The site has been published now, so you can see it at https://talulamerriwether.com/

6

Hi @talula ,

Can you remove this code? then I will keep checking it for you

Screenshot.png
Screenshot.png900×698 41.4 KB

1 Like
7

Okay, I’ve taken that part out.

Also, this is where I had the cart hidden when empty, in my header.liquid. You asked me to change it back before, so I have taken out that first “if” and brought back the cart for now.

{% if cart.item_count > 0 %}
      
        {%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}
        {{ 'templates.cart.cart' | t }}
        {%- if cart != empty -%}
          

            {%- if cart.item_count < 100 -%}
              {{ cart.item_count }}
            {%- endif -%}
            {{ 'sections.header.cart_count' | t: count: cart.item_count }}
          

        {%- endif -%}
      
  {% endif %}
8

Hi @talula ,

No, I tried to test and now it works fine, can you check it again?

9

Yes, when I remove the code that hides the cart when empty, it works as it should. I’m just looking for a way to hide the cart when empty in a way that does not prevent the page refresh from happening as it should. That way the cart is hidden, but still shows up as soon as “add to cart” is clicked. Is there a different place I need to put this piece of code?

{% if cart.item_count > 0 %}
10

@LitCommerce

I actually figured out a solution – I removed my initial changes to the code and just went into icon-cart-empty.liquid and added opacity=“0” after “path”. The cart button is still there but it is invisible until an item is added to the cart, and the product page refreshes as it should now. Thanks for your help,!

1 Like
11

Hi @talula ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like