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

Solved
Highlighted
Excursionist
17 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.

Highlighted
Shopify Partner
3247 714 862

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
3247 714 862

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
Highlighted
Excursionist
17 5 3

Hi @dmwwebartisan,

Worked like a charm. Thanks a bunch!

Highlighted
Excursionist
17 5 3
 
I am trying to change the cart icon for my store on Brooklyn theme. How do I do so?
0 Likes
Highlighted
Shopify Partner
3247 714 862

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
4 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!

0 Likes
Highlighted
Tourist
14 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. 

0 Likes
Highlighted
Tourist
3 0 2

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. 

Highlighted
New Member
2 0 0

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 

0 Likes