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

[Runion]

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.

[Zeel-prajapatii]

Hey @Runion Please share your site URL.

[Runion]

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

[Zeel-prajapatii]

@Runion It says password is wrong!

[Runion]

So sorry! Missed a "e".

ee33ktfoeree

[Zeel-prajapatii]

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. 

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
        {%- liquid
          if cart == empty
            render 'icon-cart'
          else
            render 'icon-cart'
          endif
        -%}
        <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
     
          <div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">( {{ cart.item_count }} )</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
          </div>
      </a>

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. 

Thanks

[Runion]

Sorry for not being clear.

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

TIA! 

[clara19]

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

[takeoverapparel]

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