Still looking for header menu design help

Store Design
, ,

Topic summary

A user seeks help replacing the search and cart icons in their Dawn theme header with text labels (“SEARCH” and “CART”). They want these labels to match the site’s styling: no permanent underline, but underlined on hover. Additionally, they want the cart to display a quantity indicator (x) next to “CART” instead of the default black bubble.

Solution provided:

  • Custom CSS code was shared to replace icons with text labels
  • Code includes hover effects for underlining
  • Cart quantity styling modified to show count with parentheses format: (x)
  • Additional CSS snippet provided to hide the bag icon completely

Outcome:
The issue appears resolved. The user confirmed the solution worked after applying the provided CSS code to their theme’s Custom CSS section (Theme Settings > Custom CSS).

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

How can I change the search and cart icons to the words “SEARCH” and “CART”, without permanent underlining (though underlined when hovered over), to match the rest of my shop’s font and menu style?

Ideally, when a product is added, CART will show (x) next to it instead of the black bubble showing the quantity.

I’m using Dawn theme.

Thank you —

2

Hi @nanahcubotal

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.svg-wrapper::before {
    content: "SEARCH";
}
details-modal.header__search summary.header__icon.header__icon--search span.svg-wrapper > svg {
    display: none !important;
}
a#cart-icon-bubble.header__icon.header__icon--cart {
    text-decoration: unset !important;
    position: relative !important;
}
a#cart-icon-bubble.header__icon.header__icon--cart:hover {
    text-decoration: underline !important;
}
a#cart-icon-bubble.header__icon.header__icon--cart span.svg-wrapper::after {
    content: "CART";
}
details-modal.header__search {
    margin-right: 20px;
}
details-modal.header__search summary.header__icon.header__icon--search {
    text-decoration: unset !important;
}
details-modal.header__search summary.header__icon.header__icon--search:hover {
    text-decoration: underline !important;
}
.cart-count-bubble {
    background: transparent !important;
    top: 30% !important;
    color: black !important;
    right: -20px !important;
    left: unset !important;
    font-size: 14px !important;
}
.cart-count-bubble::before {
    content: "(";
}
.cart-count-bubble::after {
    content: ")";
}

Here is the result: https://prnt.sc/FePviGuYpTK8

I hope this helps

Best,

Daisy

3

yes — however, the bag icon is still there it’s just minuscule lol

4

Hi @nanahcubotal

Could you please share with me the screenshot after adding the code into your store

Best,

Daisy

5

Hi @nanahcubotal

Please add this code more below the code I sent you above

a#cart-icon-bubble.header__icon.header__icon--cart span.svg-wrapper svg {
display: none ;
}

I hope this helps

Best,

Daisy

6

Thanks so much!!!