Solved

How to add item count number to cart icon in Brooklyn theme

lovechidozie
Excursionist
18 5 3

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.

Accepted Solutions (2)

dmwwebartisan
Shopify Partner
12280 2546 3693

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

HI @lovechidozie 

please change following css class in timber.scss.liquid

.icon-cart:before {content: '\e600';}

add new code in content: 'new code here'

thanks!

 
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 24 (24)

dmwwebartisan
Shopify Partner
12280 2546 3693

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

dmwwebartisan
Shopify Partner
12280 2546 3693

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
lovechidozie
Excursionist
18 5 3

Hi @dmwwebartisan,

Worked like a charm. Thanks a bunch!

lovechidozie
Excursionist
18 5 3
 
I am trying to change the cart icon for my store on Brooklyn theme. How do I do so?
dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

HI @lovechidozie 

please change following css class in timber.scss.liquid

.icon-cart:before {content: '\e600';}

add new code in content: 'new code here'

thanks!

 
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ebskin
Tourist
10 0 1

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.

JaimeRosales
Tourist
6 0 0

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!

Rehan_Ans
Tourist
16 0 0

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. 

Jeeg
Shopify Partner
8 1 6

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. 

Pawan2794
Tourist
9 0 1

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

Jeeg
Shopify Partner
8 1 6

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>

 

Pawan2794
Tourist
9 0 1

Thank you so much, worked perfectly 🙂

Patte
Visitor
1 0 1

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 

BolsasBags
Tourist
7 0 1

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 

Florency
Shopify Partner
25 0 3

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.

RawMenswear
Visitor
3 0 0

Hi, This worked perfectly on a mobile but im not getting the count on a desktop. Please Help.

Jeeg
Shopify Partner
8 1 6

In the previous page you find the solution for the desktop.

RawMenswear
Visitor
3 0 0

Hi Jeeg

Do i add both sets of coding? one for mobile and one for mobile? 

Thanks 

Jeeg
Shopify Partner
8 1 6
Yes, both of them will make the trick.
RawMenswear
Visitor
3 0 0

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

jennifervdz
Shopify Partner
19 0 7

works for me! thank you 🙂

A1234
Excursionist
36 0 7

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?

 

@dmwwebartisan 

Luxurymrkt
Navigator
576 2 96

Do you know how to make this work for impulse theme?

Thank You | mike

Zoubidou75
Excursionist
48 0 4

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