Turn Header Icons Into Text Stiletto Theme

Store Design
, , , , ,
1

Basically I want the “cart” icon to say “CART” instead of being an icon, and same with the menu, I want it to say “MENU” instead of showing a shopping bag.

My theme is Stiletto and my web is www.winnerofficial.com

I have been trying a lot of codes but nothing works!

1 Like
2

Hi @martujv

I check your store, mostly there is a word on the icons they just hides it. Ive done it before but in your store can’t find it have only svg icons. You need a developer to changes this icons to words. Thanks!

1 Like
3

Hi @martujv

You just need to change svg icon to text, the important thing is to find where the icon is

(Open dev tool by entering F12 , Ctrl+Shift+C ( select and move your mouse into the icon to find its HTML tag)

As I see in dev tool, the cart icon is inside section

image.png
image.png1919×991 541 KB

  1. Go to Online store → Themes → Edit code and find file name header.liquid

  2. Find in header.liquid: “icon-header-shopping-bag” (cause it is the class name of cart icon)

image.png
image.png984×638 218 KB

image.png
image.png1403×657 103 KB

  1. Then replace this with “CART”

NOTE: there are 2 cart icons, one for desktop view and another for mobile view, you need to change both

The code change

<a class="header__icon-touch no-transition" href="/cart" aria-label="Open cart modal" data-js-cart-icon="bag">
    CART
    <span data-js-cart-count="">0</span>
  </a>

The result will be like:

image.png
image.png662×620 23.5 KB

  • If you want to delete the number of product icon in the img below, find “data-js-cart-count” and delete that line

image.png
image.png762×585 44.6 KB

Do the same with the menu icon

  1. find “icon-button-header-menu” in file header.liquid

image.png
image.png1307×558 59.3 KB

  1. change the code to
<button class="header__menu-icon header__icon-touch header__icon-menu" aria-label="Open menu modal" aria-expanded="false" data-aria-label-closed="Open menu modal" data-aria-label-opened="Close menu modal" data-js-menu-button="">
    <span class="icon-button icon-button-header-menu  ">
  MENU
  </span>
</span>

    <span class="icon-button icon-button-header-menu-close  ">
  <span class="icon-button__icon">
    <span class="icon icon-new icon-header-menu-close ">
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.462 6.479 5.538 19.402M5.538 6.479l12.924 12.923" stroke="currentColor" stroke-width="1.2" stroke-miterlimit="6.667" stroke-linejoin="round"></path></svg>
</span>

  </span>
</span>

  </button>

The result will be like:

image.png
image.png707×461 17.5 KB

Hope this can help you.

Kind regards

1 Like
4

Such a complete solution! I’m not really into coding but you made it so easy, it worked, thank you! The only thing is that the “CART” word is a little bit more up than the “MENU” word and it’s a little bit off, at least on mobile, is there any way to fix that?