Changing header icons into Text

Store Design
, , ,

Topic summary

A user requested help converting header icons (search, account, cart) to text labels in the Dawn theme, while maintaining proper spacing. They also wanted the cart item count to appear on the right side.

Solution Provided:

  • Custom CSS code was shared to hide the SVG icons and replace them with text labels (“Search”, “Login”, “Cart”)
  • The code uses ::after pseudo-elements to add text content
  • Implementation involves adding the CSS to the assets/base.css file

Additional Request:
The user asked if icons could revert back to their original form on mobile view, but this question remained unanswered.

Status: The main issue was resolved successfully with the provided CSS solution, though the mobile-specific behavior was not addressed.

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

How do I change the header icons into text and have a reasonable gap between them once its changed? (Dawn theme)

Basically from this

LDLC_Shop_0-1738456928951.png
LDLC_Shop_0-1738456928951.png362Ă—130 1.8 KB

To this:

LDLC_Shop_1-1738456967777.png

Also it would be nice that the the amount of items that are in the bag, appears on the right side.

I already tried many scripts on different forums and none of them worked properly.

1 Like
2

Hello there @LDLC_Shop You should try the codes shared in this previous community thread where the poster had the exact same issue as this and in the same theme https://community.shopify.com/topic/2872416

3

Hello @LDLC_Shop

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

4

Hello Devcoders,
Thank you for reaching out!
The website: https://longdistanceloveclub.com/
The password: edimar123

I would add additionally that if it changes to Mobile View (Only the search and Cart, as the account disappears), it would switch back to normal icons. I’m not sure if its too much to ask for, but I’m still at the very beginning of coding.

1 Like
5

Hello @LDLC_Shop

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    text-decoration: none;
}
.header__icon .svg-wrapper {
    display: none !important;
}
.header__icon--cart::after {
    content: "Cart";
    font-size: 14px;
    color: #000;
}
.header__icon--account::after {
    content: "Login";
    font-size: 14px;
    color: #000;
}
.header__icon--search::after {
    content: "Search";
    font-size: 14px;
    color: #000;
}

devcoders_0-1738499551569.png
devcoders_0-1738499551569.png1343Ă—184 14.2 KB

6

It works perfectly, thank you so much!

One more thing, is there a possibility to make it in such way, when you go to mobile UI, it changes back to icons?

1 Like
7

Hello @LDLC_Shop

You’re very welcome! I’m thrilled to hear that you’re pleased with the outcome. Don’t hesitate to reach out if you need further assistance.

like and accepting the All solution. Thank you!

1 Like