Shopify themes, liquid, logos, and UX
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
to look like this
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.
Hello @shubham_j, share the store link so that I am able to provide an exact solution.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024