Setting Up Different Header Menus for Various Pages and Collections in Shopify Dawn Theme

[Hectorroa]

Follow these steps to configure different header menus (header-mega-menu, header-dropdown-menu, header-drawer) based on different page templates and collections in your Shopify store.

Step 1: Access the Theme Code

1. Go to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Click on Actions > Edit Code to access the theme's code editor.

Step 2: Locate and Open the Required Files

1. In the code editor, use the search bar to find and open the following files:
   • header-drawer.liquid
   • header-dropdown-menu.liquid
   • header-mega-menu.liquid

Step 3: Insert the Code for Multiple Templates

1. In each of the files listed above, locate the beginning of the file.

2. Insert the following code at the top of each file to handle different templates:

   liquid.

3. Replace "collectiontemplate" with the page or collection page assigned name, found on the top of the editor.

4. Replace "handle" on {% assign _new_menu = linklists.handle.links %}

   {% if template.suffix == "collectiontemplate1" or
         template.suffix == "collectiontemplate2" or
         template.suffix == "collectiontemplate3" or
         template.suffix == "collectiontemplate4" or
         template.suffix == "collectiontemplate5" or
         template.suffix == "collectiontemplate6" or
         template.suffix == "collectiontemplate7" %}
   {% assign _new_menu = linklists.handle.links %} 
   {% else %} 
   {% assign _new_menu = section.settings.menu.links %} 
   {% endif %}

Step 4: Replace the Default Menu Loop

1. In each file, locate the loop that iterates over the menu links. It might look something like this:

   liquid

   {%- for link in section.menu.links -%}

2. Replace that line with the following to use the newly assigned _new_menu:

   liquid

   {%- for link in _new_menu -%}

Step 5: Save Your Changes

1. After making the necessary changes in all three files, save your work.
2. Check your storefront to ensure that the menus are displaying correctly based on the different templates you have set up.

Notes:

• For Single Page Menus: If you need to set up a menu for just one specific page, include only that page's template in the if condition.
• For Multiple Menus: If you need different menus for various pages, expand the if-else conditions to include the corresponding templates and menus as required.

This approach allows you to tailor your site's navigation experience based on the content or design of individual pages and collections, enhancing usability and design consistency.

Example:

 

[Hectorroa]

Thank you, but I just posted the solution to the problem. I think I posted on the wrong place :-V

[Hectorroa · Accepted solution]

Follow these steps to configure different header menus (header-mega-menu, header-dropdown-menu, header-drawer) based on different page templates and collections in your Shopify store.

Step 1: Access the Theme Code

1. Go to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Click on Actions > Edit Code to access the theme's code editor.

Step 2: Locate and Open the Required Files

1. In the code editor, use the search bar to find and open the following files:
   • header-drawer.liquid
   • header-dropdown-menu.liquid
   • header-mega-menu.liquid

Step 3: Insert the Code for Multiple Templates

1. In each of the files listed above, locate the beginning of the file.

2. Insert the following code at the top of each file to handle different templates:

   liquid.

3. Replace "collectiontemplate" with the page or collection page assigned name, found on the top of the editor.

4. Replace "handle" on {% assign _new_menu = linklists.handle.links %}

   {% if template.suffix == "collectiontemplate1" or
         template.suffix == "collectiontemplate2" or
         template.suffix == "collectiontemplate3" or
         template.suffix == "collectiontemplate4" or
         template.suffix == "collectiontemplate5" or
         template.suffix == "collectiontemplate6" or
         template.suffix == "collectiontemplate7" %}
   {% assign _new_menu = linklists.handle.links %} 
   {% else %} 
   {% assign _new_menu = section.settings.menu.links %} 
   {% endif %}

Step 4: Replace the Default Menu Loop

1. In each file, locate the loop that iterates over the menu links. It might look something like this:

   liquid

   {%- for link in section.menu.links -%}

2. Replace that line with the following to use the newly assigned _new_menu:

   liquid

   {%- for link in _new_menu -%}

Step 5: Save Your Changes

1. After making the necessary changes in all three files, save your work.
2. Check your storefront to ensure that the menus are displaying correctly based on the different templates you have set up.

Notes:

• For Single Page Menus: If you need to set up a menu for just one specific page, include only that page's template in the if condition.
• For Multiple Menus: If you need different menus for various pages, expand the if-else conditions to include the corresponding templates and menus as required.

This approach allows you to tailor your site's navigation experience based on the content or design of individual pages and collections, enhancing usability and design consistency.

Example: