Hey all,
I am trying to edit the header icons so that they are text instead of an icon. I have tried several lines of code from the forum but they do not seem to work, can anyone help me out? I would also like to edit the localisation section so that instead of GBP it would say United Kingdom (GBP) and so forth. I have added the current icons and text below as well as the desired outcome. Any help would be greatly appreciated!
You just need to find the right files and spot to remove the icons and text instead.
The file name would pretty much better header.liquid if you are on older themes ike dawn or similar, for others it wouldn’t be too different. On your web page right click on the element to inspect, check the classes and search your file with those classes.
When you find the element comment out or remove the icons and add text instead. Please always take a duplicate of your theme and try code on it.
Best
@sof000 need to edit header file to change icon to text., but be careful with it as it will also have count bubble which can look bad with text. Are you familiar with the coding?
It’s a theme-level change, and the reason forum snippets don’t work is usually because they’re written for a different theme (most answers assume Dawn).
File to edit (Dawn & similar)
snippets/header-icons.liquid
Example: Replace Account Icon with Text
Find this (or similar):
{%- if shop.customer_accounts_enabled -%}
<a href="{{ routes.account_url }}" class="header__icon header__icon--account">
{% render 'icon-account' %}
</a>
{%- endif -%}
Replace with:
{%- if shop.customer_accounts_enabled -%}
<a href="{{ routes.account_url }}" class="header__link">
Account
</a>
{%- endif -%}
Replace Cart Icon with Text
Find:
<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart">
{% render 'icon-cart' %}
</a>
Replace with:
<a href="{{ routes.cart_url }}" class="header__link">
Cart
</a>
Replace Search Icon with Text
Find:
<a href="{{ routes.search_url }}" class="header__icon header__icon--search">
{% render 'icon-search' %}
</a>
Replace with:
<a href="{{ routes.search_url }}" class="header__link">
Search
</a>
Change “GBP” → “United Kingdom (GBP)”
File:
snippets/country-localization.liquid
Find:
{{ localization.country.currency.iso_code }}
or:
{{ localization.country.currency.symbol }}
Replace with:
{{ localization.country.name }} ({{ localization.country.currency.iso_code }})
Example output:
United Kingdom (GBP)
United States (USD)
If inside a dropdown option:
<option value="{{ country.iso_code }}">
{{ country.name }} ({{ country.currency.iso_code }})
</option>
Hey, thanks for the help! I am using HorizonHey, thanks for the help! I am using Horizon. The United Kingdom (GBP) line of code worked but I am unable to find and change the search, account, cart icons 
Not very familiar but I am always willing to try 
Thanks for reaching out with your questions! I understand how customizing header icons and localization can really help personalize your store.
For the header icons, replacing them with text typically involves editing your theme’s code—usually in the header.liquid or similar files. If the code you’ve tried hasn’t worked, I can take a look and provide a tailored solution that fits your theme.
Regarding the localization section, changing the display from GBP to “United Kingdom (GBP)” is definitely doable. It often involves editing language files or theme settings, depending on your setup.
I’d love to help you get these customizations just right. If you’re open, I can guide you step-by-step or even do the edits for you. Just let me know how you’d like to proceed—I’m here to make this easy and stress-free!
Looking forward to connecting and helping you perfect your store.
@sof000 please open your theme.liquid file and check if it has code for header group, it may have separate header file.
This header group code will have code for header icons, from there you can change header icon to text or if you can add me as a collaborator I will check code and let you know exact locations. I will need Collab code and website link to send request
@sof000
Ahh got it Horizon explains everything. You weren’t doing anything wrong; Horizon handles header icons very differently from Dawn, which is why you couldn’t find them.
Where Horizon Header Icons Actually Live
Go to:
sections/header-group.liquid
This is the main controller for:
Replace Icons with Text (Correct Way for Horizon)
Inside header-group.liquid, search for:
render 'icon-search'
render 'icon-account'
render 'icon-cart'
You’ll likely see them inside blocks like this:
{%- when 'search' -%}
{%- when 'account' -%}
{%- when 'cart' -%}
Replace Each Icon Block with Text
Search (Icon → Text)
Before
{%- when 'search' -%}
<a href="{{ routes.search_url }}" class="header__icon">
{% render 'icon-search' %}
</a>
After
{%- when 'search' -%}
<a href="{{ routes.search_url }}" class="header__link">
Search
</a>
Account (Icon → Text)
Before
{%- when 'account' -%}
<a href="{{ routes.account_url }}" class="header__icon">
{% render 'icon-account' %}
</a>
After
{%- when 'account' -%}
<a href="{{ routes.account_url }}" class="header__link">
Account
</a>
Cart (Icon → Text)
Before
{%- when 'cart' -%}
<a href="{{ routes.cart_url }}" class="header__icon">
{% render 'icon-cart' %}
</a>
After
{%- when 'cart' -%}
<a href="{{ routes.cart_url }}" class="header__link">
Cart
</a>
Add Styling (Important for Horizon)
Add this to:
assets/base.css
or
assets/component-header.css
.header__link {
font-weight: 500;
text-decoration: none;
padding: 0 12px;
color: rgb(var(--color-foreground));
}
This keeps spacing aligned with Horizon’s layout.
Hey, so I only have header-group.json and header.liquid - I am struggling to find the icons here unfortunately!
What I can find is the following: