Shopify themes, liquid, logos, and UX
I'm having trouble figuring out how to add the an item count number to my store's cart icon on Brooklyn theme. Please assist me in solving this problem.
Solved! Go to the solution
This is an accepted solution.
Hello @lovechidozie,
Sorry for the above message I got some trick for this. So others can also take benefits to Add item count on the cart icon in the Brooklyn theme.
Here is the solution. 🙂
please find code Sections/header.liquid
<span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
Replace this new code
<span class="cart-link__bubble{% if cart.item_count > -1 %} cart-link__bubble--visible{% endif %}">{{ cart.item_count }}</span>
add code assets/theme.scss.liquid or timber.scss.liquid bottom of the file
.cart-link__bubble--visible { top: 9px !important; width: 15px !important; height: 15px!important; color: #fff; font-size: 9px; text-align: center; }
I hope this will work for you.
Thanks!
This is an accepted solution.
please change following css class in timber.scss.liquid
.icon-cart:before {content: '\e600';}
add new code in content: 'new code here'
thanks!
Hey @lovechidozie,
By default, the Brooklyn theme doesn't support showing number of items added in the header cart icon.
This needs customization. So please hire a Shopify expert for this.
Thanks!
This is an accepted solution.
Hello @lovechidozie,
Sorry for the above message I got some trick for this. So others can also take benefits to Add item count on the cart icon in the Brooklyn theme.
Here is the solution. 🙂
please find code Sections/header.liquid
<span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
Replace this new code
<span class="cart-link__bubble{% if cart.item_count > -1 %} cart-link__bubble--visible{% endif %}">{{ cart.item_count }}</span>
add code assets/theme.scss.liquid or timber.scss.liquid bottom of the file
.cart-link__bubble--visible { top: 9px !important; width: 15px !important; height: 15px!important; color: #fff; font-size: 9px; text-align: center; }
I hope this will work for you.
Thanks!
This is an accepted solution.
please change following css class in timber.scss.liquid
.icon-cart:before {content: '\e600';}
add new code in content: 'new code here'
thanks!
what code am I putting there? I see where to change it but I don't know where to upload the bag icon image to replace the code.
Amazing, really nice piece. I have a question for you tho. I see that the number does not update when I have multiple variants and I want to add multiple items to the cart while being at the same product page. It will only update when it renders a new page.
Also, I have been looking everywhere for something you might be able to tell me. When I add to the cart using Drawer Cart in Brooklyn, how to disable the drawer preview on every item. I would like to have the experience of adding all my variants, get the count number to be increased on every "Add to Cart" and not to have the drawer pop out every time. I know too much too ask but you might have a quick pointer or snippet 🙂 thanks a lot!
Cart count works perfect but how to change the cart count notification only when something is added to cart because at present in cart count its show 0 if nothing is added. So want to like cart count should only shows if something is added to cart.
You should replace this, from the previous answer
<span class="cart-link__bubble{% if cart.item_count > -1 %} cart-link__bubble--visible{% endif %}">{{ cart.item_count }}</span>
to this
<span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}">{{ cart.item_count }}</span>
In this way you will see the bubble with the items count only if something is in cart.
Hello , it worked perfectly for the desktop view, but it still is the same for mobile view. nothing gets added to cart under mobile view. Please Help
In header.liquid find this code
<div class="site-nav--mobile text-right">
Then below you should find a line starting with
<span class="cart-link__bubble
Replace it with
<span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}">{{ cart.item_count }}</span>
Thank you so much, worked perfectly 🙂
Hey all,
I any ideas on how to get the card item count dynamically updated if a new item is added or removed from the card?
Is there some kind of a hook/event available in Shopify to get a response of a newly added/removed item? Or do I have to listen to every single click on the "add to card" button to get the card count updated?
Best
Patrick
Hi there!
I would love to see the zero, because it makes customers aware of "why they are here on the website anyway." Ghehe 😉
All the help provided here was awesome! I need only a little help... The zero doesnt show up on mobile phones right now. Can anyone provide some help? My website is https://www.bolsas.nl/ and the password is 9112 ... Love to hear from you guys!
Greetz Chris
cart count icon not showing number of items . Is there any way without referesh it shows the number of items in cart count ?
Please help me im new to the development.
Thanks.
Hi, This worked perfectly on a mobile but im not getting the count on a desktop. Please Help.
In the previous page you find the solution for the desktop.
Hi Jeeg
Do i add both sets of coding? one for mobile and one for mobile?
Thanks
sorry to be a pain, this hasnt solved the problem.
I'm finding that i'm getting the counter on mobile but not on a desktop. I still get a bubble and nt a counter number. also the cart doesn't automatically update when i add an item. You have to refresh the page for the counter to update itself. New to all this so apologies in advance. Take alook if possible? https://rawmenswear.co.uk/
Thanks
works for me! thank you 🙂
This worked perfectly for desktop view, but doesn't show number of items in cart in mobile view.
Can you please send the code for mobile view?
Do you know how to make this work for impulse theme?
Hey @dmwwebartisan did you have the solution in order to not refresh page to have the count, in the Prestige theme ? Thanks, very nice content
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024