How can I modify the cart count bubble size and font?

Store Design
, ,

Topic summary

Goal: Reduce the cart count bubble (black circle) size and increase the number’s font size in the header.

What was done:

  • Advised to edit the theme CSS via Online Store > Themes > Actions > Edit code, then open the main CSS file (base.css/style.css/theme.css) and add rules.
  • To enlarge the number: .cart-count-bubble { font-size: 12px; }
  • To shrink the bubble so it doesn’t cover the cart icon: .cart-count-bubble { height: 1.5rem; width: 1.5rem; } (sizes can be adjusted as needed).

Outcome:

  • Font size change worked, and resizing the bubble resolved the coverage issue.
  • Thread concluded with thanks; no remaining questions.
Summarized with AI on January 21. AI used: gpt-5.
6

Try this one.

You can adjust the size if its not enought.

Same Instruction.

.cart-count-bubble {
    height: 1.5rem;
    width: 1.5rem;
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like