Hiding the cart icon in header until item/s are added

TheShiz
Excursionist
13 1 3

Hi All,

I found an earlier Shopify discussion thread (sorry I've lost it now) the other day about how to hide the "Cart icon" in the header until one or more items are added to it.

I copied the code that was provided and added it to my page in the header.liquid code:

{% unless cart.item_count == 0 %}
        <div class="site-header__section site-header__section--button">
        <a href="{{ routes.cart_url }}" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
        {%- assign icon = 'icon-header-' | append: section.settings.icon %}
   		{% include icon %}   
   		<span class="icon__fallback-text">{{ 'general.header.view_cart' | t }}</span>
   		<span class="site-header__cart-bubble{% if cart.item_count > 0 %} site-header__cart-bubble--visible{% endif %}"></span>
   		</a></div>
{% endunless %}	

Whilst the example is great, my issue is that WHEN the cart icon is visible, the three icons (hamburger menu, my logo, cart icon) are all centered nicely in the header, however before an item is in the cart (with the cart being NOT visible), my logo is now off-centre as it has shifted to the right hand side by the amount of pixels that the cart icon was taking up.

Is there a way to stop the other elements in the header from shifting when the cart icon isnt visible? Or alternatively, can the code, rather than removing the cart icon, can it be just that the icon is the same colour as the header background, and then change to its proper/ default colour once the item/s are added? That way the cart can still exist, but users can't see it.

If anyone has a suggestion please let me know what the code should be and where to put it, i appreciate any assistance!

Storehttps://the-shiz-list.myshopify.com/
Pword: 4shizzle

0 Likes
TheShiz
Excursionist
13 1 3

Hi, is there anyone out there who may be able to assist with this?

0 Likes