How can I replace icons with 'Search', 'Account', 'Cart' text on my website?

Store Design

Topic summary

A user wants to replace icon graphics for Search, Account, and Cart with text labels on their Shopify store.

Proposed Solutions:

  • Add custom CSS to base.css using ::after pseudo-elements with content properties to display text labels
  • Hide the original SVG icons with display: none
  • Position the text absolutely to replace icon placement

Ongoing Issues:

  • When items are added to cart, the number badge display breaks or overlaps with the text
  • The dynamic cart count (e.g., “(1)”) needs to adjust properly when multiple items are present
  • User wants hover underline effects similar to other menu items (shop, contact, about)
  • Converting text to all caps (e.g., ‘CART’ instead of ‘cart’) removes spacing between words

Current Status:
The discussion remains open with unresolved formatting and styling challenges. Multiple users are requesting similar customizations and offering collaboration to implement the changes directly in the theme code.

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

How can I change these icons to say ‘Search’ ‘Account’ ‘Cart’

byanymeans_0-1678420598411.png

https://byanymeans.net.au/

2

@byanymeans

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.header__icon--search::after {
	content: 'Search';
	position: absolute;
	top: 50%;
}

.header__icon--account::after {
	content: 'Account';
	position: absolute;
}

.header__icon--cart::after {
	content: 'cart';
	position: absolute;
}
.header__icon--search span, .header__icon--account svg, .header__icon--cart svg{
  display: none;
}
3

Hello @byanymeans !

Hope you are doing well.

I can help you with changing the icon to text by doing custom changes to your theme. Need to do some CSS changes as well.

Namah_Tech_0-1678427233238.png
Namah_Tech_0-1678427233238.png1339×277 40 KB

Do to changes I needed access to your store. Do let me know your thoughts so that I can send you collaboration request.

Thank you!

4

Hello @byanymeans

You need to change the code to Text in the 3 positions :

For Search: https://prnt.sc/cFXhIJoWtLB5

For Account : Screenshot by Lightshot

For Cart: https://prnt.sc/SOpD4zMHcBZc

I hope the above is useful to you.
Best regards,
GemPages Support Team

5

Hi @infoatcodelab7 ,

Thanks for your reply. All looks good except when something is added to the cart it looks like this.

byanymeans_0-1678601509280.png

Is there a way to change it to just (1) and obviously dynamic so if there is more than 1 item in the cart it adjusts accordingly. Is it possible for these words to have the underline highlight effect when hovered over like the other menu items (shop, contact, about)?

6

Hi @GemPages

Change them to what sorry? The current screenshots are just of my existing code

7

Hi. Yes you can send a request through

8

Hi!

I wanted my cart and search text to be in all caps when I change content: ‘cart’; to content: ‘CART’; it takes away the space between the two. Anyway to fix this?

9

Hi!

If this was to my comment my website is www.tylertabbaa.com

10

when i go to change the font the space between the search and cart go away. Im unsure why

11

Can you help me with this? I’m also having trouble?