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

TheShiz
Excursionist
14 1 4

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

Replies 3 (3)

TheShiz
Excursionist
14 1 4

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

🙂

Alia_Makarem
Shopify Partner
63 0 18

Hello,

I found a solution here for Narrative theme, maybe it can help.

https://community.shopify.com/c/Shopify-Design/NARRATIVE-theme-I-have-removed-the-top-Shopping-Cart-...

 

TheShiz
Excursionist
14 1 4

Hi Alia,

Thank-you for responding to my call for help, I appreciate it!

I have read through the post and I see the "accepted solution" here: https://community.shopify.com/c/Shopify-Design/NARRATIVE-theme-I-have-removed-the-top-Shopping-Cart-...

The OP eventually said "okay i might just keep my cart button but in the meantime can you provide me with code which will remove my button but not shift the positioning of the other elements in the header", to which Eric_K_ posted the solution.

However, (and forgive me for not fully understanding the code in the accepted solution), but I am just a little worried/ mindful that t appears the code that Eric provided does in fact remove the cart icon whilst retaining original position of header elements.

I do not wish to remove my cart icon, i just want it to not be visible until 1 or more items are added to it. And whilst I have succeeded in the latter, I still don't know how to retain the positioning of the other header elements without removing the cart icon all together.

Would you have any other options for me or know how to amend Eric_K_'s suggested code to suit my particular situation?

Thanking-you.