How do I Change Account Menu Icon to Text? (Taste Theme)

Store Design
, , , , ,
1

Hi, I have asked this question once before but am still yet to find an answer.

I am wondering how I change the account / login menu icon from that icon to text. In specific being “Account” as the text link.

I would appreciate anyone who could help me out with this. Thank you,

Tyler

1 Like
2

Duplicate, an answer was given

https://community.shopify.com/c/shopify-design/how-to-change-the-account-icon-to-text-taste-theme/td-p/2053981

Try putting it into a custom css setting

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

3

The answer that was given does not work, a message pops up in Custom Css saying:

“site-header__account” does not appear to be used in this section. Try a different selector.

4

Hello @Tylerverdee ,

You can try to follow these steps:

Go to Online Stores → Themes → Actions → Edit code

Go to Sections folder → Header.liquid file → Find the following line of code

{% if customer %}
  
    {{ 'customer_account.svg' | icon_svg }}
    {{ 'layout.navigation.account' | t }}
  
{% else %}
  
    {{ 'customer.svg' | icon_svg }}
    {{ 'layout.navigation.account' | t }}
  
{% endif %}

Replace the first line with the following code to remove the icon and display the text “Account” instead:

{% if customer %}
  
    {{ 'layout.navigation.account' | t }}
  
{% else %}
  
    {{ 'layout.navigation.account' | t }}
  
{% endif %}

Save and preview

Hope this can help. Let us know if you need anything else.

Ali Reviews team.

5

Hi @Tylerverdee ,

You can use the following code to change the Account icon to text “Account”

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the base.css file
  3. Add the code below at the very end of the file
a.header__icon.header__icon--account.link.focus-inset.small-hide:after {
    content: "Account";
}

See result here:

made4Uo_0-1683522877427.png
made4Uo_0-1683522877427.png1359×640 106 KB

1 Like
6

Thank you this was very helpful for this issue but now the cart header link and account link have overlapped: https://muddytrenchwear.com/?_ab=0&_fd=0&_sc=1

7

Hi @Tylerverdee

Sorry. It requires an password to see your website

8

My bad the password is MTT2023

9

Hi @Tylerverdee

Here you go

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the base.css file
  3. Add the code below at the very end of the file
.header__icons a.header__icon {
    width: 7rem;
}
1 Like
10

Thank you for all of your help, I appreciate that.

1 Like
11

https://community.shopify.com/c/shopify-design/anstatt-accountsymbol-ein-login-text/td-p/2144692