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

Runion
Shopify Partner
6 0 0

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.

Replies 6 (6)

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @Runion Please share your site URL.

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Runion
Shopify Partner
6 0 0

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

Zeel-prajapatii
Shopify Partner
138 32 27

@Runion It says password is wrong!

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Runion
Shopify Partner
6 0 0

So sorry! Missed a "e".

ee33ktfoeree

Zeel-prajapatii
Shopify Partner
138 32 27

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. 

 

Zeelprajapatii_0-1708063934855.png

 

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Runion
Shopify Partner
6 0 0

Sorry for not being clear.

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

TIA!