Change the Cart icon and bubble to text.

[humbledryer]

I’d like to remove the cart icon and replace it with something that looks like this.

I am using dawn theme.

Thank you

[goldi07]

Hello @humbledryer

You can modify the Dawn theme’s cart icon and bubble by updating the header.liquid file. Here’s how to replace the cart icon with a simple text-based “CART (X)” format:

Steps:
1.Go to Shopify Admin → Online Store → Themes.

2.Click “…” on your Dawn theme and choose Edit Code.

3.Open header.liquid.

.Find the section that contains:

5.Replace it with this code:

```markup

    CART ({{ cart.item_count }})

Optional CSS for Styling:
If you want the text to resemble your provided image, add this to your base.css file:

.cart-text {
    background-color: #f5f1e8; /* Light background */
    padding: 8px 16px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    color: black;
    border-radius: 4px;
}

This will remove the cart icon and display just the text “CART (0)” dynamically updating based on the number of items.

Thank you

[humbledryer]

Thanks Goldi07. I only see this section but I’m not sure what to replace

[humbledryer]

Thanks, I replaced that code and added code to the bottom of base.css.

How do I remove the underline and make it on one line only?

It looks like this now:

[goldi07]

Okay, I see what you’re saying! Let’s fix this properly.

Issue: The cart text is breaking into two lines and has an underline.
Fix: Ensure everything stays on one line and remove the underline.

1. Update Your CSS
   Go to base.css and replace your .cart-text styles with this:

.cart-text {
    text-decoration: none !important; /* Remove underline */
    display: inline-flex; /* Keep text and number in one line */
    align-items: center; /* Align items properly */
    white-space: nowrap; /* Prevent line breaks */
    font-size: 18px;
    font-weight: bold;
    background-color: #f5f1e8;
    padding: 8px 16px;
    border-radius: 4px;
    color: black;
}
.cart-text span {
    margin-left: 4px; /* Add space between 'CART' and (X) */
}

2. Verify Your header.liquid Code
   Make sure your code in header.liquid looks exactly like this:

    CART ({{ cart.item_count }})

No extra
tags
No extra

or

elements

3. Save & Refresh
   Save changes in base.css and header.liquid.

Go to your store and hard refresh (Ctrl + Shift + R or Cmd + Shift + R on Mac).

Thank you

[namphan]

Hi @humbledryer ,

Please go to Actions > Edit code. Please follow these steps:

• Step 1: Go to sections > header.liquid file, find ‘header__icon–cart’ and change code here:

• Step 2: You do the same for sections > cart-icon-bubble.liquid file.

I hope it helps!

[humbledryer]

It worked!! Thank you!!

For some reason the Cart number doesn’t automatically update when I add something to it. I have to click to a different page for it update.

[goldi07]

thanks if its worked then mark it as accepted solution and wait i will try fix your problem

thank you

[humbledryer]

Thanks, the cart count doesn’t automatically update. I have to navigate to a different page for it to update