All Collections
Advanced Site Customization
Make a Menu Item Private (Hidden)
Make a Menu Item Private (Hidden)
Hide a menu item in the navigation based on sign in or subscription status
Adrian avatar
Written by Adrian
Updated over a week ago

You can hide a menu item on your navigation so that only your logged-in users or, only your subscribers, have access to it, by using Code Editor.

This is an advanced tutorial for users who are familiar with the programming languages at least at a basic level. We provide this for educational purposes. If you aren't proficient in this area, please do not try this and hire a Web Developer for Advance Custom Changes instead.

We do not guarantee that preferential customizations will continue to work in the future as new updates or versions of the platform are released, so we advise you to check your custom changes from time to time.

Before you make any changes to the code, always make a backup of your site.

The first step would be to choose the Navigation Link you wish to Hide from non-logged-in users. In this example we will take the one below:

You will first want to make sure that in Navigation the link is set up as a Custom Link.

To do that you will need to take the URL for that page.

  1. Open the page

  2. Copy the link after the page name

  3. Paste it to "Custom Link" in Navigation for that item

Once this is completed we need to add the logic in Code Editor so the item is visible only to logged-in users.

  1. Go to Website-> Click on the 3 dots-> Edit Code

  2. Click on _top_menu.liquid

3. Use the bellow logic and add it to the liquid template as shown below:

{% when '/sample_page' %}
{% unless user.guest %}
<a href="{{ link.url | link }}" class="top_menu--link py-2 d-none d-md-inline-block">{{ link.title }}</a>
{% endunless %}

4. Edit the {% when '/sample_page' %} with your page details. In this case, it would be: {% when '/pages/great-images-from-around-the-globe' %}

5. Click On Save Changes

If you want to hide the menu item on the mobile versions as well you will have to add the same lines of code but this time in the _mobile_top_menu.liquid.

It is possible to hide a menu item for subscribers too. For example, you can allow people to create an account without a subscription (via a Freebie bundle), but if you want to show the option to subscribe, the following code would work for this:

{% when '/join' %}
{% unless user.subscriber? %}
<a href="{{ link.url | link }}" class="top_menu--link py-2 d-md-flex d-none btn btn--primary btn--small">{{ link.title }}</a>
{% endunless %}
Did this answer your question?