If you want to hide the header menu on Shopify product pages, you’re making a smart move to boost conversions. A clutter-free product page keeps visitors focused on your product details and encourages them to make a purchase without clicking away.
When you hide the header menu on Shopify product pages, you eliminate distractions like navigation links that may lead customers to other sections of your store. This is especially helpful for stores with a single product focus or for high-ticket items where you want shoppers to stay engaged until checkout.
Here’s how you can do it step by step:
- Open your Shopify admin and go to the
index.liquid
file in your theme editor. - Search for this line of code:
{{ 'base.css' | asset_url | stylesheet_tag }}
- Paste the following code directly below that line:
{% if template == 'product' %} {% style %} #shopify-section-header,#shopify-section-footer { display:none; } {% endstyle %} {% endif %}
This code hides both the header and footer only on product pages, so your homepage and collection pages will still display normally.
Once you save the changes, preview your store to confirm the layout looks clean and professional. You can even A/B test this change to see if your conversion rate improves. If you ever decide to show the header menu again, simply remove or comment out the code.
By learning how to hide the header menu on Shopify product pages, you create a focused, distraction-free shopping experience. This small tweak can reduce bounce rates, keep customers engaged with your product, and ultimately increase your sales.on purchasing. This small but powerful tweak can make a big difference in your store’s overall conversion rate.r should try.