How to create a custom header menu in Shopify

To create a custom navigation menu in Shopify, add Liquid and schema code to a new section file. This allows you to create a dynamic navigation menu that is easily customizable within the Shopify admin. Follow these steps to design your own navigation menu.

Step 1: Create a New Section File

In your Shopify admin, go to Online Store > Themes.
Click on Actions next to your current theme and select Edit code.
Under the Sections folder, click Add a new section and name it custom-navigation.

Step 2: Add Liquid Code

In the custom-navigation.liquid file, add the following Liquid code to create the structure of your navigation menu:

<ul>

{% for link in section.settings.links %}

<li>

<a href="{{ link.url }}"> {{ link.label }} </a>

</li>

{% endfor %}

</ul>

</div>

Step 3: Add Schema Code

At the bottom of the same file, add the schema code to allow customization of the navigation links in the Shopify admin:

{% schema %}

{

"name": "Custom Navigation",

"settings": [

{

"type": "link_list",

"id": "links",

"label": "Navigation Links"

}

"presets": [

{

"name": "Custom Navigation"

}

]

}

{% endschema %}

Step 4: Add the Section to a Template File

To display the custom navigation menu on your storefront, you need to add the section to a template file. For example, to add it to your homepage, open index.liquid (found under the Templates folder) and add the following code where you want the navigation to appear:

{% section 'custom-navigation' %}

Step 5: Customize the Navigation Menu

Go to Online Store > Themes > Customize.
In the theme customizer, you should now see an option to add the "Custom Navigation" section.
Add it to your desired location and configure the navigation links as needed.

Conclusion

By following these steps, you’ll have a fully customizable navigation menu that you can manage through the Shopify admin. This gives you flexibility and control over your store’s navigation:

Create the custom-navigation.liquid section with the provided Liquid and schema code.
Insert the section into a template file where you want the navigation to appear.
Customize the navigation links through the Shopify theme customizer.

By implementing these steps, you can enhance your store's navigation, making it more user-friendly and tailored to your specific needs.

Back to blog