Different Custom Header Menus for Different Pages in Shopify

Different Custom Header Menus for Different Pages in Shopify

As a web developer working with Shopify, you might encounter scenarios where you need to implement different header menus for various pages of an online store. This customization can enhance user experience and improve navigation tailored to specific sections of your Shopify store. In this blog post, we will explore how to achieve this by leveraging Shopify's flexibility and customization options.

Step1: Create a Template for collection page

Step2: Find header-drawer.liquid on your Theme code editor 

Step3: Copy the code at the top of the file header-drawer.liquid 

{% if template.suffix == "diff-menu" %}
{% assign _new_menu = linklists.new-menu.links %}  
  {% else %}
{% assign _new_menu = section.settings.menu.links %}  
{% endif %}

Make sure to replace the template name and your menu handle

Step4: Replace Loop Itration Object With _new_menu  

{%- for link in section._new_menu -%}

step5:- Follow Same Step For header-dropdown-menu.liquid and header-mega-menu.liquid 

 


 

Related article :

Change header logo for specific in Collection and Product | Shopify

Change header logo for specific in Collection and Product | Shopify
Rs. 1,400.00
Back to blog
null