Use 2 different menus on 2 different pages

Technical Q&A
1

Hello,

I have a problem with my menus, i have created two different menus lets call them women and kids. When i assign the menu kids to the kids page, the menu changes on all other pages like womens page. I want to use specific menu for each page. I have tried to look into the coding part but i cant find where i need to change the coding, closest i got to was it displayed both menus at the same time.

{% if customer.tags contains “wholesale” %} {% assign menu = ‘wholesale-menu’ %} {% else %} {% assign menu = ‘normal-menu’ %} {% endif %} {% for link in linklists[menu].links %} //code to output your menu items. {% endfor %}

maybe this code will work if i insert it into nav.liquid or header, but i need to change {% if customer.tags contains “wholesale” %} to something specific for the page

2

Hello

You can use

{% if page.handle contains “kids” %}

Kids menu

{% elsif page.handle contains “womens” %}

Womens menu

{% else %}

common menu

{% endif %}

Use your page handles, you can find it in your URL: myshopify.com/pages/page-handle

1 Like
3

Thanks, which liquid file do i put this code into?

1 Like
4

@love666

You can check where your menu code has been added. Maybe header.liquid or any nav.liquid file.

1 Like
5

alright thanks, the womens page doesnt have handle since its the first page (home page) what do i write instead?

6

@love666

Use below code

{% if page.handle contains “kids” %}

Kids menu

{% else %}

common menu for all other pages

{% endif %}

7

I tried your code but then on my website i can only see the text kids menu on top not showing the actual menu. I tried this, i think you missed a part of code where it says assign, but this didnt have any effect on the site

{% if page.handle contains “kids” %}

{% assign menu = ‘kids-menu’ %}

{% else %}

{% assign menu = ‘main-menu’ %}

{% endif %}

8

No i haven’t missed any code. You have to access your menu in between the conditions like below.

{% if page.handle contains “kids” %}

{% assign menu = ‘kids-menu’ %}

    {% for link in linklists[menu].links %}

  • <a href={{ link.url }}>{{ link.title }}

    • {% endfor %}

{% else %}

{% assign menu = ‘main-menu’ %}

    {% for link in linklists[menu].links %}

  • <a href={{ link.url }}>{{ link.title }}

    • {% endfor %}

{% endif %}

9

Thank you, I have been looking for this for ages, and looks like no one else knows how this should be done. Can I ask, If my “Pages” that need different menu are actually Categories and also Product - pages, instead of page.handle should I write category.handle and product.handle?

10

Hello,

This code is perfect, but where should it be placed once I add it to the code, it shows double menus, the original one in place and this code to the upper left vertically

ElieMrad_0-1701094735026.png
ElieMrad_0-1701094735026.png1354×435 21.6 KB

11

Did you find a solution to this? It’s showing double menus for me also.

12

Hey @love666 ,

I know i’m bit late into it but please refer to the below video to implement the same.