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

Solved
lovechidozie
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.

Accepted Solutions (2)

Accepted Solutions
dmwwebartisan
Shopify Partner
9824 2236 3076

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

dmwwebartisan
Shopify Partner
9824 2236 3076

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 20 (20)
dmwwebartisan
Shopify Partner
9824 2236 3076

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 | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
9824 2236 3076

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

lovechidozie
Excursionist
17 5 3

Hi @dmwwebartisan,

Worked like a charm. Thanks a bunch!

lovechidozie
Excursionist
17 5 3
 
I am trying to change the cart icon for my store on Brooklyn theme. How do I do so?
dmwwebartisan
Shopify Partner
9824 2236 3076

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

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
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. 

Jeeg
Tourist
8 1 4

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. 

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