Solved

How Can I Change Shop, Account & Search Icons To Text?

worshipped
Tourist
7 1 2

Looking to change these icons to text but I'm not sure how to!

 

Screenshot 2023-01-09 080055.png

 

 

 

Going for a more luxury and sleek design and I'm using the theme Dawn but I've customized a lot of it but this is the only thing I'm struggling at figuring out.

 

The website is https://saintvivianne.com
and the password is: muffau

 

Also, ignore the password screen! It's a theme transfer from my other store & I haven't changed it yet!

Accepted Solution (1)

brandography
Shopify Partner
117 25 21

This is an accepted solution.

Hi @worshipped 

 

You'll need to find the code for each icon in the header.liquid file and replace them with your text. Here's a code example for the cart to get you started:

 

Find and replace this code:

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
        {%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}
        <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
        {%- if cart != empty -%}
          <div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">{{ cart.item_count }}</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
          </div>
        {%- endif -%}
      </a>

 

With this code:

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
        Cart (<span aria-hidden="true">{{ cart.item_count }}</span>
      </a>

 

I'd also suggest making a copy of your theme first before you make any code changes, as well as just commenting out code versus deleting things all together 😉 

Find a Powerful eCommerce Marketing Partner


Let Brandography help you spread the word about your products through cutting-edge eCommerce web design, strategic sales channels, and expert digital marketing tactics.
Check out our website

View solution in original post

Replies 5 (5)

brandography
Shopify Partner
117 25 21

This is an accepted solution.

Hi @worshipped 

 

You'll need to find the code for each icon in the header.liquid file and replace them with your text. Here's a code example for the cart to get you started:

 

Find and replace this code:

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
        {%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}
        <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
        {%- if cart != empty -%}
          <div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">{{ cart.item_count }}</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
          </div>
        {%- endif -%}
      </a>

 

With this code:

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
        Cart (<span aria-hidden="true">{{ cart.item_count }}</span>
      </a>

 

I'd also suggest making a copy of your theme first before you make any code changes, as well as just commenting out code versus deleting things all together 😉 

Find a Powerful eCommerce Marketing Partner


Let Brandography help you spread the word about your products through cutting-edge eCommerce web design, strategic sales channels, and expert digital marketing tactics.
Check out our website
worshipped
Tourist
7 1 2

I'm now facing this issue. When I added a product in my cart, it looks like this now.

 

Screenshot 2023-01-09 103548.png

RobArt98
Pathfinder
96 3 14

Same issue or problem here. Can someone assist? 

Would like to have a solution like this.

Desktop version: Login, Search, Cart without Icon , even when putting some article into cart - still "CART" displayed

Mobile version: Keeping icons for Login, Search and Cart 

worshipped
Tourist
7 1 2

Do you think you could help me figure out the search button as well?
I'd like to remove the icon but the code is extremely lengthy and I have zero clear what to change to make it just say "SEARCH" instead of the icon.

BlankStudio
Excursionist
32 0 9

Add this below code before </body> in "theme.liquid"

 

 

<style>
.header__icons a#cart-icon-bubble {
    position: relative;
}
.header__icons a#cart-icon-bubble svg {
    opacity: 0;
    width: 60px !important;
}
.header__icons a#cart-icon-bubble:before {
    position: relative;
    content: 'CART';
}
.header__icons a#cart-icon-bubble .cart-count-bubble {
    left: auto;
    right: 0px;
}
</style>

 

 

May i ask you how did you change the Account icon to text?
Thanks.