How To Put Customer Name On Header When Logged In on dawn theme ?

[itshimanshu97]

Hi guys! Is there an option or maybe some code you could help me with that could help me display customer name as "hi, customer name" when logged in rather than displaying "account" 

[Dan-From-Ryviu · Accepted solution]

Go to your online store > Themes > Edit code > open header.liquid file find this code 

{% render 'icon-account' %} 

Below this line of code

{%- if shop.customer_accounts_enabled -%}

And then replace code above by this code 

          {% if customer %}
            Hi, {{ customer.first_name }}!
          {% else %}}
            {% render 'icon-account' %}
          {% endif %}

Code will look like this 

[zaczee]

Hi @itshimanshu97 ,

Can you share your store url

[itshimanshu97]

Hi zaczee, 

my store url is www.theelemstore.com

[Dan-From-Ryviu · Accepted solution]

Go to your online store > Themes > Edit code > open header.liquid file find this code 

{% render 'icon-account' %} 

Below this line of code

{%- if shop.customer_accounts_enabled -%}

And then replace code above by this code 

          {% if customer %}
            Hi, {{ customer.first_name }}!
          {% else %}}
            {% render 'icon-account' %}
          {% endif %}

Code will look like this 

[itshimanshu97]

hi dan, 

thanks for the response but it didnt work!

I am attaching the screenshot of the code that i replaced according to your instructions but it still doesn't displays customer name

My store url is www.theelemstore.com

With best Regards

Himanshu

[Dan-From-Ryviu]

Did create account and login?--
Regards,

Dan

[itshimanshu97]

yes i did

[Dan-From-Ryviu]

Hi @itshimanshu97,

It's working as you can see in this image 

Also it has an mistake in the code, please remove one bracket at the en of this line of code 

[itshimanshu97]

Hi dan,

Thankyou very much for helping out and yes the code is working! But not on mobile devices... can you help me with this so that It works on mobile devices as well?

Best regards

himanshu

[Dan-From-Ryviu · Accepted solution]

Hi, it has 2 lines of this code in header.liquid 

{% render 'icon-account' %} 

Replace above code for both of them to apply code for mobile devices also

[itshimanshu97]

Thanks Dan!

I replaced the other code and it worked fine on mobile but i also had to add one more line of code to the code that you shared and i would like to mention it for others that might be looking for the same solution...

The other line of code should be replaced by code below for it to work perfectly fine on mobile devices as you might see "account" written next to your name if you dont add <span class = "visually hidden"> next to the code provided by dan

so the code would be:

{% if customer %}
Hi, {{ customer.first_name }}!
{% else %}
{% render 'icon-account' %}
{% endif %}
<span class="visually-hidden">

Best Regards

Himanshu

[TaraWilken]

Thanks Himanshu and Dan. This solution did work.  Here are a couple of my comments to get it to work correctly.  The code that you can copy from for the solution is what has the extra "}" 

Remove that to start. 

This screen shot is the top part of the solution code.

I'm using the Dawn theme and don't have other customizations in this part of the code. So for me the mobile code that needs to be update was around line 233.  

The desktop code was around line 709. 

Dan and Himanshu are correct, you need to update both spots to get it to work correctly on desktop and mobile. Add the extra line of code that Himanshu added to remove the word "account" on the mobile version. 

[BD-E]

Hi,

could you let me know what was the code on mobile that you edited on dawn theme?

i was  able to get it working on desktop, but mobile does not have the same coding to update so i tried to improvise where the mobile code was to edit myself, but not getting it to work properly. 

thanks

[TaraWilken]

I updated this several months ago, maybe the code you are looking for has dropped down a few more lines than what I mentioned.  I don't recall it being different code than what was mentioned in the main solution. 

[Hamamao]

Hi Dan

Is this just for Shopify+ or also for the normal shopify?

Because I don't see the Edit code under Thems.

Regards,

Oren

[Dan-From-Ryviu]

You can see edit code in Sale channels > Online store > Themes > click three dots button > Edit code

[MSNTAJ53]

Hi Mr. Dan, 

I applied the code and it works, but my problem is now the position of the text, how do I change that ?

Have attached a screenshot for reference

[Preet46]

After paste Code Name is showing Like this ,,  the theme is  Enterprise .