Can icons be replaced with custom text?

Technical Q&A
, , ,

Topic summary

A user wants to replace header icons (search, account, cart) with custom Spanish text on their Shopify theme.

Proposed Solution:
A CSS-based approach was suggested that:

  • Hides the original SVG icons using display: none
  • Adds custom text labels using ::after pseudo-elements with absolute positioning
  • Targets specific header icon classes in the base.css file

Current Issue:
The implementation caused layout problems—all text labels are overlapping and stacking on top of each other instead of appearing in their proper positions.

Status: The discussion remains open with an unresolved positioning/layout bug that needs correction. The CSS positioning values likely need adjustment to properly space the text labels.

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

Hi @RevelationMex You should try the following steps and let me know if it works for you

  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;
}
1 Like