how to change the Cart/Login/Search Icon to text?

Highlighted
New Member
2 0 0

Hi can you help me find a code to input so that i can change my icons from the usual debut icons to text and icons.

0 Likes
Highlighted
Shopify Expert
74 4 10

Heres the code that you'll want to change: 

      <div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
        <div class="site-header__icons-wrapper">
          <div class="site-header__search site-header__icon">
            {% include 'search-form' %}
          </div>

          <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
          </button>

          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
              </a>
            {% else %}
              <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
              </a>
            {% endif %}
          {% endif %}

          <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span> <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble> <span data-cart-count>{{ cart.item_count }}</span> <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span> </div> </a>

It depends what you want to change these too before I can suggest what code to change these too...

On The Road Shopify Agency
Helping Shopify stores to become greater with purpose behind design.
info@ontheroaduk.co.uk
http://ontheroaduk.co.uk/
0 Likes
Highlighted
New Member
2 0 0

thank you were do i put it?

0 Likes
Highlighted
Tourist
7 0 0
Would like to change the “account” icon on header (currently shows as a person) to instead say “login”. Any suggestions please?
0 Likes
Highlighted
Shopify Expert
74 4 10
Well you would need to know about basic code but you’d just replace the {% include search

And then replace that with a link/text code
On The Road Shopify Agency
Helping Shopify stores to become greater with purpose behind design.
info@ontheroaduk.co.uk
http://ontheroaduk.co.uk/
0 Likes
Highlighted
Shopify Expert
74 4 10
Find the account icon strip of code, and just delete that or hide it with code and the replace it with basic html code for text that is a link to the account login page
On The Road Shopify Agency
Helping Shopify stores to become greater with purpose behind design.
info@ontheroaduk.co.uk
http://ontheroaduk.co.uk/
0 Likes