Hide Nav Bar on Certain Pages Shopify - A complete Guide
How to Hide the Navigation Bar on Specific Shopify Pages
Sometimes, you might want to hide the navigation bar on specific pages of your Shopify store such as the Thank You page, Gift Card page, or a focused landing page to create a clean, distraction-free experience.
In other cases, you may want to display a different header entirely on certain pages to match the purpose or tone of the content. Customizing the navigation like this can help improve user experience and boost conversions.
No third-party apps or complex tools required, I’ll walk you through two easy methods to either hide or change the navigation bar using Shopify’s built-in code editor.
What is the Navigation Bar in Shopify?
Navigation bar is the area in your Shopify store where you can add your Logo, menus, cart, search bar. All these details are included in the header.liquid file of the theme. Nav bar is the navigation area from where user can navigate between different pages using the different links in the form of menus or icons.
Methods to hide Nav bar in Shopify
There are 2 methods to hide the Nav bar in Shopify
- Hide Navbar Using Page Handles
- Hide Navbar Using different Layout in Shopify
Method 1: Hide Navbar Using Page Handles
Page handles are unique for each template like product, collection, cart etc. Base on these handles you can hide the Nav bar from specific pages using Theme code in liquid. Page handles use to taget the specific template to show or hide the Nav bar. Follow these steps to show or hide the navbar on different pages.
Step 1: Navigate to Online store > Themes > Edit code
Step 2: Go to the layout/theme.liquid file.
Step 3: Search for the following options depending on the theme.
- {% section ‘header’ %} or
- {% sections 'header-group' %}
Step 4: Add conditions here based on the page handle. For example if you want it to hide from the product page add this code into your theme.liquid file.
{% unless template.name == 'product' %}
{% sections 'header-group' %}
{% endunless %}
If you want to hide it from the cart page then add this code.
{% unless template.name == 'cart' %}
{% sections 'header-group' %}
{% endunless %}
Step 5: Click Save.
For more on product page customization, read our tutorial on: How To Make Products View Only on Shopify.
Method 2: Hide Navbar Using different Layout in Shopify
In this method you can use separate layout file for certain pages and assign to those pages to hide the Nav bar. You have to create the new layout file for examplpe custom-layout.liquid and make sure to not add the Nav bar releated code in this file. Follow these steps to add a new layout and assign to the different pages where you want to hide the navigation bar.
Step 1: Navigate to Online store > Themes > Edit code
Step 2: Go to the layout and create a new file custom-navbar.liquid file.
Step 3: Copy the code from the theme.liquid file and paste in the new file you created.
Step 4: in the new file remove the code related to navbar. For example, remove this code.
{% sections 'header-group' %}
Step 5: Click Save.
Step 6: Navigate to your desired template for example product template layout/ product.json file
Step 7: Add this line at the top of the file like in the screenshot
"layout": "custom-navbar",
Step 8: Click Save.
For extra inspiration, you can also browse UXCams’s guide to improving user experience.
Conclusion
Hiding the navigation bar on specific Shopify pages is easier than it sounds. Whether you use a quick page handle condition or create a completely separate layout, both methods give you more control over how your store looks on different pages.
If you need expert implementation, our Shopify services can set it up for you seamlessly.
Frequently Asked Questions
Live Chat