How can I properly hide the cart icon when it's empty?

Solved

How can I properly hide the cart icon when it's empty?

MSMC
Visitor
2 0 0

I'm trying to hide the cart icon when the cart is empty, but have it show when there are items in the cart. I've added this to theme.liquid at the end before </body>:

 

 

<style>
#cart-icon-bubble{
  {%- if cart.item_count != 0 -%}
    display: none !important;
  {%- endif -%}
}
</style>

 

 

 

It hides the cart button, but stays hidden and doesn't show when there are items in the cart. What am I missing here? 

Accepted Solution (1)

CodingSolution
Trailblazer
176 12 10

This is an accepted solution.

Use this code

<style>
#cart-icon-bubble {
  {% if cart.item_count == 0 %}
    display: none !important;
  {% endif %}
}
</style>
banned

View solution in original post

Replies 2 (2)

CodingSolution
Trailblazer
176 12 10

This is an accepted solution.

Use this code

<style>
#cart-icon-bubble {
  {% if cart.item_count == 0 %}
    display: none !important;
  {% endif %}
}
</style>
banned
MSMC
Visitor
2 0 0

Thanks a lot! This code worked perfectly.