Impulse theme Add number to cart count icon

Store Design
1

Hi all

im trying to add numbers 1-10 etc to cart count when item added to cart like the pic below

my site is https://luxurymrkt.com

AB6DE248-A37E-4C26-BBC4-E0BA5370CDC0.png
AB6DE248-A37E-4C26-BBC4-E0BA5370CDC0.png1170×2532 210 KB

2

Hi @Miivako

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

Go to Online Store > Themes > Edit Code > theme.liquid. After pasting my code code to before element

Go to Online Store > Themes > Edit Code > theme.css. After pasting my code to the bottom of this file

.cart-link__bubble–visible{

right: -16px !important;

width: 25px !important;

height: 25px !important;

color: white !important;

display: grid !important;

align-items: center !important;

justify-content: center !important;

padding-left: 2px !important !important;

}

.cart-link__bubble–visible:empty{ opacity:0 }

Best Regards;

Pagefly

3

Hi I entered both codes

now bubble isn’t visible and no count

4

Hi @Luxurymrkt ,

Go to Assets > theme.css and paste this at the bottom of the file:

.cart-link__bubble--visible {
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    right: -5px !important;
}

Hope it helps!

5

Shows but then as soon as click back to homepage goes away

A9B245BF-9997-482F-9C50-E008A5E02348.png
A9B245BF-9997-482F-9C50-E008A5E02348.png1170×2532 187 KB

6

you can try add it again

.cart-link__bubble--visible{ right: -16px !important; width: 25px !important; height: 25px !important; color: white !important; display: grid !important; align-items: center !important; justify-content: center !important; padding-left: 2px !important !important; } .cart-link__bubble--visible:empty{ opacity:0 }
7

Hi @Luxurymrkt ,

I don’t understand, it’s showing, what are you looking for?

8

Hi,
I am also trying to display the number of items in the cart icon.
I was able to display it after seeing your answer, but it is not automatically reflected when I increase or decrease the quantity from the cart drawer.
How can this be resolved?

Great success so far!
Great success so far!481×112 1.45 KB

9

Hi, I didn’t get it to work correctly so I disabled it. If you find a solution please post it here I’d love to use it also. Thanks

10

Hi, here are the steps.

In the theme code edit of Impulese, open 《Layout > theme.liquid》, and just before , add
<! – Cart Icon Counts ================================ →

I added the following.
Then, add it to 《assets > theme.css》.

.cart-item-count {
color: #fff;
font-size: 0.5rem;
margin-left: 3px;
vertical-align: top;
line-height: 1.1;
}
.cart-link__bubble–visible{
top: -5px !important;
right: -10px !important;
width: 22px !important;
height: 22px !important;
color: white !important;
display: grid !important;
align-items: center !important;
justify-content: center !important;
padding-left: 2px !important !important;
}
.cart-link__bubble–visible:empty{ opacity:0 }

Then, add it to 《Snippets＞header-icons.liquid》.
Inside

Don’t forget to add

{{ cart.item_count }}

That's how they work.