How to Hide Header Navigation Menu On Product Page

Solved
Newbie6
New Member
5 0 0

Hello Everyone,

I am using the Debut theme to sell a single product.  On the product page I want to hide the header navigation links to "home", "catalog" and the search icon.

None of the coding solutions I have come across on here have worked so far.

 

 

 

0 Likes
g33kgirl
Shopify Partner
321 95 113

You only want to remove the main navigation and search but want to keep the logo and cart icon in their current position, is that correct?

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
0 Likes
Newbie6
New Member
5 0 0

Hello g33kgirl,

If possible, I would like to remove the logo and the cart icon too.

And for the page itself, there is a "Add to Cart" and "Buy It Now" button.  I would like to remove the "Add to Cart" button... if possible.

0 Likes
g33kgirl
Shopify Partner
321 95 113

This is an accepted solution.

You can add this at the end of your CSS file (Themes -> Edit code -> Assets -> theme.css) :

#shopify-section-header, .product-form__cart-submit {
   display: none;
}

 

Although, imo the best thing to do here would be to create an alternate product template and assign your products that template.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
0 Likes
Newbie6
New Member
5 0 0

Hello,

Your solution worked really well. 

Is there a way to remove the "Quick links", "Search" and "Newsletter" option from the footer?

0 Likes
g33kgirl
Shopify Partner
321 95 113

@Newbie6,  to remove the footer, amend the previous code:

#shopify-section-header, .product-form__cart-submit, .site-footer {
   display: none;
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
0 Likes
Newbie6
New Member
5 0 0

Thanks again.


Is there anyway to keep the "Powered by Shopify" and Payment type accepted in the footer visible?

0 Likes
g33kgirl
Shopify Partner
321 95 113

This is an accepted solution.

@Newbie6 if you want to keep payment icons and Shopify logo, you can revert back to code posted initially.

There are 2 ways to remove the links from footer. The easiest way would be to remove from the Customize panel (recommended): Navigate to Themes -> Customize -> Footer and remove these sections. Choose white background colour or whatever the background colour of your website is and your footer will blend in. 

The second way is to add this code to your CSS file:

.site-footer {
    padding: 0;
}

.site-footer .page-width:first-child {
  display:none;
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
0 Likes
Newbie6
New Member
5 0 0

Thank you very much for all your help

0 Likes
gacontre
Tourist
5 0 3

@g33kgirl This solution works great but removes the header from the entire site. Is there a way to specify to hide Only on Product pages? Thanks in Advance

0 Likes