How to change Header icons to display text

Store Design
, ,

Topic summary

A user seeks to replace header icons with text labels in their Shopify store.

Initial Solution:

  • CSS code provided to hide icon elements and display text for Account, Search, and Cart sections
  • Code targets .header__icon--account, .header__icon--search, and .header__icon--cart classes
  • Instructions given to add CSS to base.css file via Shopify Admin

Refinements:

  • Issue identified: “Login” text disappears when logged out
  • Additional CSS adjustments made to fix spacing between Login and Cart text
  • Final solution includes width and height properties (6.4rem) for proper alignment

Resolution:
The issue was successfully resolved with the adjusted CSS code, achieving proper text display and spacing in the header.

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

Hello everyone,

So I’m trying to change my header icons to show text instead of icons.

Can anyone help me figure it out?

Thanks

cy.png
cy.png1920×847 42.7 KB

www.studioblank.store

2

@StudioBlank - please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.header__icon--account span{position: relative !important; overflow: visible;}
.header__icon--account account-icon{display: none;}

.header__icon--cart .svg-wrapper{display: none;}
.header__icon--cart span.visually-hidden{position: relative !important; overflow: visible;}

.header__icon--search{content: "search";}
.header__icon--search span{display: none;}
.header__icon--search{display: flex; align-items: center;}
1 Like
3

How do I prevent this from happening when I log out? I want it to be in one line.

srg.PNG
srg.PNG1920×926 58.6 KB

4

@StudioBlank can you please add the given code? so it appears like that and I can check

5

Okay done.

6

@StudioBlank – for search , add this line and check

.header__icon--search:after{content: "search";}
7

This code doesn’t work but I don’t need it anymore. I just want to fix the Login text and have some space between Login and Cart, like a margin of 1rem

8

@StudioBlank add this and check

.header__icon--account{height: 6.4rem !important; width: 6.4rem !important;}
.header__icon--account span{width: 100%;}
1 Like
9

Yessir now it works. Thanks

1 Like