How to remove quantity count from cart icon

Store Design

Topic summary

Goal: hide the cart item count (and optionally the “Cart” text) in the header; secondary requests to keep a dot without numbers, or remove the quantity +/- controls in cart pages.

Implemented solutions (theme-specific):

  • Retina: add CSS to hide count and “Cart” label in styles.scss.liquid:
    • .icon-cart .cart_count { display: none; }
    • .nav a.icon-cart span { display: none; }
  • Debut: hide count in theme.scss.liquid:
    • .site-header__cart-count { display: none; }
    • To hide only the number but keep the colored dot: [data-cart-count] { display: none; }
    • Optional dot sizing/position tweaks were shared for the badge.
  • Dawn: remove quantity column and +/- controls in base.css(.liquid):
    • th.cart-items__heading–wide.small-hide.caption-with-letter-spacing, td.cart-item__quantity { display: none; }

General guidance:

  • For Online Store 2.0 themes, prefer the Theme Editor’s “custom CSS” setting instead of editing CSS files directly (Shopify help link provided).

Outstanding/requests without posted fixes yet:

  • Add a red dot without numbers on cart (specific site).
  • Debut setups lacking styles.scss.liquid (site shared, pending).
  • Make cart quantity non-editable but visible alongside remove icon.
  • Remove cart icon bubble in Refresh; affect checkout page badge; Taste and Ride theme variants.

Status: several CSS-based fixes confirmed by merchants; multiple follow-up requests remain open. Attachments/screenshots were provided to illustrate desired badge appearance.

Summarized with AI on December 23. AI used: gpt-5.
1

I want to remove the count from the cart icon. Also, my cart icon has the picture of the cart and says “Cart” next to the image…I dont know if the word cart is actually part of the image or text thats next to the image…but I’d like to remove the word cart as the icon is self explanatory.

Actually I don’t really want to remove the count but it confuses too many people because they add a item to cart and then page back to go back to the collection and when they do the cart quantity goes back to zero and people think the items keep coming out of the cart. This is certainly a big confusion for many customers, especially since there are now many modern retail websites where the cart does not function that way so people are getting confused. What I would ultimately prefer is that as a shopper pages backwards the cart always shows the correct items and quantity. But I THINK this would require expensive customization that I just cant afford so for now I just want to remove the count.

Oh if it makes a difference my theme is the Retina theme from Out of the Sandbox…but of course if its not broken they just refer you to a developer…but with covid we have nearly lost the store so I need to do this stuff myself and not spend any money.

Any suggestion in how to do this?

screenshot.jpg
screenshot.jpg1874×777 197 KB

2

Hello, @Stephen34

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

1 Like
3

Hello @KetanKumar that would be a huge help…its www.whoopsiedaisyclothing.com

1 Like
4

@Stephen34

Thanks for post.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.scss.liquid->paste below code at the bottom of the file.
.icon-cart .cart_count {
    display: none;
}
.nav a.icon-cart span {
    display: none;
}
1 Like
5

WOW, I really didnt think it would be so easy! I really need to learn how to do that stuff and know what to type. Thats pretty awesome!

THANK YOU!!! I’m trying to get my website cleaned up some and that was a huge help…GREATLY APPRECIATED!

Stephen

6

Hi @Stephen34

I am using the debut theme and i don’t have the file Asset->/styles.scss.liquid

I tried adding your code to the theme.css but it didn’t help.

Any advice?

Thanks!

1 Like
7

@Effyl01

Please share your site URL,
So I will check and provide a solution here.

8

Hey @KetanKumar

I also want to remove the count from my cart icon.

Using Shopify Debut Theme

Website url : tanabanafab.com

Regards

1 Like
9

@Pankaj25

thanks for post

yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-header__cart-count {
    display: none;
}
2 Likes
10

Hello @KetanKumar ,

it works.

But I want to add a black dot on cart icon with no numbers on it. Like a bullet point (But with no count). Everything remains same.

PFA screenshot (Similar to this).

1 Like
11

@Pankaj25

oh sorry for this please add this code also

.site-header__cart-count {
right: 0.6rem;
    top: 1.6rem;
min-width: 0.6em;
    height: 0.6em;
}
12

Hi @KetanKumar !

Hoping you can help me out as well, looking to remove the count but keep the white dot. I tried the first set of code and it removed the dot and the count. when i added the secondary code that you linked but it did not work.

Website: yvrcookie.com

Thanks :slightly_smiling_face:

13

@YVRCookie For debut theme to hide the cart count text while leaving the colored background:

[data-cart-count] {
    display: none;
}
1 Like
14

Amazing it worked great, thank you!

15

Hi, I do not have in styles.scss.liquid my assets. My problem is not to count my cart icon in the header neither in web nor in mobile. How can I fix this? My url is www.ateliereso.com Thanks in advance

@KetanKumar

1 Like
16

@esraizgi

SORRY for that

i have check its work if any issue let me know screenshot

17

Hi

Am brand new to Shopify, so am using Dawn while I find my feet

I would like to remove the item Quantity + / - box from my cart.

Can you advise? - Thanks

1 Like
18

@AbbevilleArt

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

19

https://www.abbevilleart.com

Thanks

20

@AbbevilleArt

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css.liquid->paste below code at the bottom of the file.
th.cart-items__heading--wide.small-hide.caption-with-letter-spacing, td.cart-item__quantity {display: none;}