Remove the cart logo and leave only the circle with the number of items inside

[martujv]

Hello!

I want to remove the "cart" icon and leave only the circle with the number of items inside the cart.

My theme is Stiletto and my store is www.winnerofficial.com

I attach reference images:

How it is now:

How I want it to be:

[Hardik29418 · Accepted solution]

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
[data-js-cart-icon=bag] [data-js-cart-count] {
left: 8px;
    bottom: 9px;
}
.icon-button-header-shopping-bag .icon-button__icon .icon-header-shopping-bag {
display: none !important;
}

@media only screen and (max-width: 479px) {
[data-js-cart-icon=bag] [data-js-cart-count] {
    left: 9px;
    bottom: 12px;
}
 }
</style>

[Hardik29418 · Accepted solution]

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
[data-js-cart-icon=bag] [data-js-cart-count] {
left: 8px;
    bottom: 9px;
}
.icon-button-header-shopping-bag .icon-button__icon .icon-header-shopping-bag {
display: none !important;
}

@media only screen and (max-width: 479px) {
[data-js-cart-icon=bag] [data-js-cart-count] {
    left: 9px;
    bottom: 12px;
}
 }
</style>

[martujv]

It worked! But how could I make it a little bit bigger?

[Hardik29418]

@martujv  PLease place the above code so  that I can provide you the solution according to the best design

[PageFly-Henry · Accepted solution]

Hi @martujv 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

span.icon.icon-new.icon-header-shopping-bag {

    display: none !important;

}

[data-js-cart-count] {position: inherit !important;left: -40px !important;}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[martujv]

It worked! But can I make it a little bit bigger?

[PageFly-Henry]

You can try with this code to make it bigger.

[data-js-cart-count] {min-width: 20px !important;height: 20px !important;}