Change icons to text in dawn theme

Change icons to text in dawn theme

SatoriVintage
New Member
13 0 0

I would like to get rid of the typical shopify icons and change them to text saying "search" and "cart (0)" I will show an example below of what I want. I assume it must be done in the code editing but I have no idea where to start, please help!

Current: 

Screenshot 2025-01-15 at 16.55.20.png

 

What I want:

Screenshot 2025-01-15 at 16.55.40.png

Link: https://satorivintage.com/pages/about
Password: aibewn

Replies 4 (4)

DaisyVo
Shopify Partner
3434 393 475

Hi @SatoriVintage 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

details-modal.header__search summary.header__icon.header__icon--search > span::before {
    content: "SEARCH";
}
details-modal.header__search summary.header__icon.header__icon--search span.svg-wrapper > svg {
    width: 0 !important;
}
a#cart-icon-bubble::after {
    content: "CART";
}
a#cart-icon-bubble {
    padding-left: 40px;
}
a#cart-icon-bubble svg.icon {
    width: 0 !important;
}

 

Here is the result: image_480.png

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
SatoriVintage
New Member
13 0 0

Hi, thank you so much! Can you help me to take away the underline under the "search" and "cart" and make the "(0)" amount appear next to the cart of how many products are in?

SatoriVintage
New Member
13 0 0

Right now it looks like this, not great:

Screenshot 2025-01-15 at 23.29.20.png

DaisyVo
Shopify Partner
3434 393 475

Hi @SatoriVintage 

 

Please add this code more

 

.cart-count-bubble {
    top: 33%;
    right: -36px;
    left: unset !important;!I;!;
}

 

image_480.png

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution