I have metafields associated with customers. I made a page called “dashboard” where customers can view what’s in those metafields about themselves. I also have a link (called “dashboard") to this page in my Main Menu.
I would like to make the “dashboard” link in the Main Menu only be visible if the user is logged in to the website.
I am not using any apps.
In liquid, the logic I need is essentally…
{% if customer %}
Display the link in the menu
{% else %}
Do not display link in menu
{% endif %}
But I can’t find where this logic should go in the code. Can anyone help me with this?
I recommend add dashboard button separately and not as a part of main menu as man menu is always visible. If you add button separate then you can use same logic as above and show it to logged in users only
Hi @BFree42 ,
You’re on the right track - the {% if customer %} condition is exactly what you need.
The only challenge is that Shopify’s navigation menus are rendered dynamically, so you can’t directly wrap Liquid logic around individual links inside the Online Store > Navigation settings.
However, you can handle it easily in your theme code depending on where your menu is output.
Edit the Header or Navigation Snippet
Go to Online Store → Themes → … → Edit code
Open the file that outputs your main menu. This is usually:
sections/header.liquid, or
snippets/navigation.liquid, or similar (varies by theme).
Find where your main menu is rendered - something like:
{% for link in linklists.main-menu.links %}
<li>
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
Add a condition around your Dashboard link:
{% for link in linklists.main-menu.links %}
{% if link.title == 'Dashboard' %}
{% if customer %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endif %}
{% else %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endif %}
{% endfor %}
Update: Thank you, all! I’m halfway to what I want.
I’m using Dawn theme. I found 2 files in Snippets which seem to match what you guys are saying. They are:
header-dropdown-menu.liquid
header-mega-menu.liquid
Each one of these files goes something like this…
<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
<li>
Lots and lots of code here!
</li>
{%- endfor -%}
</ul>
</nav>
In each file, I inserted the following code below the for loop and above the tag:
‘Member Dashboard’ is part of the main menu through the Shopify Admin. This code checks to see if the next link it’s going to make has that title. If it does, and the user is not logged in, then the {% continue %} command will jump to the next iteration of the for loop and skip rendering the ‘Member Dashboard’ menu item.
I inserted this code into both the header-dropdown-menu.liquid and header-mega-menu.liquid files. The result:
When the website is displayed wide enough that all the menu items render at the top, then ‘Member Dashboard’ is gone! Success!!!
This forum won’t let me upload 2 screen grabs so imagine that when the window is wide enough to display all the main menu items (and I’m not logged in), that ‘Member Dashboard’ is not there. Just like I want!
But if I resize the window narrower so the menu items appear when I click the icon…
For anyone else looking to do this, here’s what I did. It worked for the Dawn theme.
First, I used the Shopify Admin to add my item to the menu normally by going Content > Menus > Add Menu item. (The link I added was called Member Dashboard.)
Then I modified the code in the following 3 files:
header-mega-menu.liquid
header-dropdown-menu.liquid
header-drawer.liquid
In each file, find the line where it says
{%- for link in section.settings.menu.links -%}
Indented underneath that you should find the html link
tag.
Between the for link, and the html link tag, insert the following code:
{% if link.title == 'Name of Your Menu Item Here' %}
{% unless customer %}
{% continue %}
{% endunless %}
{% endif %}
Be sure to replace ‘Name of Your Menu Item Here’ with the actual name of the menu item that you want hidden if the user is not logged in. (In my case it was ‘Member Dashboard’). Once you’ve saved that, the menu item should no longer appear if the user is not logged in.
For example, here are the first 18 lines of my header-mega-menu.liquid file with the code inserted:
{% comment %}
Renders a megamenu for the header.
Usage:
{% render 'header-mega-menu' %}
{% endcomment %}
<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
{% if link.title == 'Member Dashboard' %}
{% unless customer %}
{% continue %}
{% endunless %}
{% endif %}
<li>
{%- if link.links != blank -%}
<header-menu>
...
