How to change the Cart icon to display item count in Dawn theme?

Store Design
, , ,

Topic summary

A user wants to modify the Dawn theme’s cart icon to display as text (e.g., “Cart (0)” or “Cart (1)”) instead of the default icon, with the item count shown in parentheses.

Solution Provided:

  • Modify header.liquid file by replacing specific code to render both the cart icon and item count
  • Add CSS to base.css to style the cart count bubble (removing default positioning, making background transparent)
  • The provided code displays the cart icon with count in parentheses

Outstanding Issue:
The original poster clarified they want the actual word “Cart” as text instead of keeping the icon, which wasn’t fully addressed in the solution.

Status:
Two other users have expressed interest in similar customizations. One user reported the provided code didn’t work for their store, suggesting the solution may need adjustments for different implementations. The discussion remains open with the text-instead-of-icon request unresolved.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi all

I am currently looking to make the Cart icon in Dawn theme into text matching my header with () after it.

So i would for example be “Cart (0)”, when it’s a empty cart and “Cart(1)” when 1 item is added ect.

Let me know if you need my store url or anything else.

Thanks in advance.

2

Hey @Runion Please share your site URL.

3

https://www.runionclub.com/
Password: ee33ktfoere

4

@Runion It says password is wrong!

5

So sorry! Missed a “e”.

ee33ktfoeree

6

Hey @Runion Please make changes to the below files.

Search for header.liquid file. open the file and replace https://prnt.sc/7qjqTrKtUWq9 code with the below code.


        {%- liquid
          if cart == empty
            render 'icon-cart'
          else
            render 'icon-cart'
          endif
        -%}
        {{ 'templates.cart.cart' | t }}
     
          

            {%- if cart.item_count < 100 -%}
              ( {{ cart.item_count }} )
            {%- endif -%}
            {{ 'sections.header.cart_count' | t: count: cart.item_count }}

Now add css to the base.css file.

.cart-count-bubble {
    position: static;
    height: auto;
    width: auto;
    color: #000;
    background: transparent;
    font-size: inherit;
    text-decoration: none;
    text-underline-offset: 0px;
}
.header__icon.header__icon--cart{
  text-decoration: none;
}
.header__icon--cart .icon {
    height: 4.4rem;
    width: 4.8rem;
    padding-top: 3px !important;
    padding: 0;
}

It will look like this.

Zeelprajapatii_0-1708063934855.png
Zeelprajapatii_0-1708063934855.png1904×772 304 KB

Thanks

7

Sorry for not being clear.

I also wanted the actual word “Cart” instead of the icon. Can you help with that as well?

TIA!

8

Hey did you get help with? I want to have bag (1) or bag (2)

9

How would i do this with my store? i have shopify dawn theme I tried the code above it didn’t work for me. Store is www.takeoverapparel.com and password is takeover