Change style of item count number beside cart icon to look in bubble for Minimal shopify theme

Highlighted

I am using minimal theme and wanted to show product count inside bubble on cart icon instead side of cart icon.

Tried finding any reference to do same but nothing relative found so this might help you if needed same thing.

Here is what I did 

To change

style 1 cart.jpg

to look like this

style 2 cart.jpg

Add CSS to Assets > theme.scss.liquid file

Desktop

.header-bar__module a.cart-page-link {
visibility: hidden;
position: relative;
left: 40px;
top: 5px;
}

span.cart-count.header-bar__cart-count {
background: #000;
color: #fff;
border-radius: 50%;
padding: 1px 5px;
visibility: visible !important;
position: absolute;
left: -15px;
top: -3px;
font-size: 8px;
}

.cart-page-link span.icon.icon-cart.header-bar__cart-icon {
visibility: visible !important;
}

.header-bar__module {
position: relative;
}

for Mobile

a.cart-page-link.mobile-cart-page-link {
visibility: hidden;
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
position: relative;
}

.mobile-cart-page-link span.cart-count {
visibility: visible;
font-size: 8px;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 5px;
border-radius: 50%;
position: absolute;
right: 0px;
top: -2px;
}

span.cart-count::before {content: '';}

.mobile-cart-page-link .cart-count:after {
content: '' !important;
}.mobile-cart-page-link .cart-count:before {
content: '' !important;
}

Note : Backup is highly recommended before applying any changes.

0 Likes
Highlighted
Shopify Partner
620 100 140

Hello @shubham_j, share the store link so that I am able to provide an exact solution. 

0 Likes
Highlighted

Hello @Wahab_Ahmad 

Its already Worked for me! Thanks

0 Likes