How to replace the cart counter bubble in Dawn theme?

Store Design
,

Topic summary

A user seeks to replace Dawn theme’s default cart counter bubble with a numerical counter displayed in parentheses format, like “(2)”.

Solution provided:

  • Add custom CSS to the base.css file in the Assets folder
  • The code removes the bubble styling and adds parentheses using ::before and ::after pseudo-elements
  • Styling includes: transparent background, black text color, 20px font size, and proper positioning

Follow-up request:
The user asks how to display “(0)” when the cart is empty.

Additional solution:

  • A second CSS snippet targets the empty cart state using .cart-icon-bubble:has(.icon-cart-empty)::after
  • This displays “(0)” with absolute positioning when no items are in the cart

Both solutions require editing the theme’s base.css file through the Shopify admin code editor.

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

Hi all,

Hoping someone can please help me. Im wanting to remove the cart counter bubble and replace it with a cart counter like in this image.

Screen Shot 2023-05-05 at 10.40.47 am.png

store URL: www.tydejewellery.com

1 Like
2

HI @vanessabate You store has password.

3

Hi @vanessabate ,

To change your cart counter to a number with parentheses, please follow the instructions below

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the base.css file
  3. Add the code below at the very end of the file
.header__icon--cart .cart-count-bubble {
    background: transparent;
    height: 100%;
    width: 100%;
    font-size: 20px;
    top: 0;
    color: black;
    margin-left: 0.5rem;
}

.header__icon--cart .cart-count-bubble:before {
    content: "( ";
}

.header__icon--cart .cart-count-bubble:after {
    content: ")";
}
4

thankyou. Is there a way for it to display (0) when the cart is empty?

5

Hi @vanessabate ,

Please add the code below to show (0) on empty cart.

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the base.css file
  3. Add the code below at the very end of the file
a#cart-icon-bubble:has(.icon-cart-empty):after {
    content: "(0)";
    position: absolute;
    left: 40px;
}