How to retain the cart icon color circle while removing unit data?

Store Design

Topic summary

A user wanted to remove the numerical unit count from their cart icon while keeping the black circle indicator that shows items are present in the cart. Their initial CSS code (display: none on .cart-link__count) removed both the number and the circle.

Solution provided:

  • Navigate to: Online Store → Theme → Edit code → Assets → styles.css
  • Replace the existing CSS with:
.cart-link__count {
    display: block;
    color: #000;
}

This approach maintains the circle’s visibility while hiding just the count number. The solution successfully resolved the issue.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hi -

I’d like to remove the unit data from the cart icon in my header UI but retain the black circle that appears to show there is an item in the cart. So far I’ve used the code below but that removes both the black dot and number. Anyone able to help me get the color circle back on?

Website: https://par6golfco.com

Code used:

}
.cart-link__count {
display: none;
}

Thanks!

2

Hello @par6golfco

I would like to give you some recommendations to support you. Glad to support you today.
You can check out my suggestion below to get your concern resolved.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open Assets → styles.css file
  3. Paste the code below to replace the code you used:
.cart-link__count{
    display: block;
    color: #000;
}

I hope you find the answer helpful or if you need further support, do not hesitate to reach out to us.

Best regards,
GemPages Support Team

3

This is perfect. Thanks!

4

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team