Still looking for header menu design help

Store Design
, ,
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!!!