Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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.
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;
}
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?
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.
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.
@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
@gacontre yes, you can use this code to hide from product pages:
.template-product #shopify-section-header {
display: none;
}
If you want to remove from collection pages:
.template-collection #shopify-section-header {
display: none;
}
If you want to remove from both:
.template-collection #shopify-section-header,
.template-product #shopify-section-header {
display: none;
}
This is great! What if you only want to hide the header and footer from a specific Collection (not ALL collections)?
@SmithandVena in that case, you will need to edit your theme.liquid file and add this code to the body tag:
<body class="template-{{ request.page_type | handle }} {% if collection %}collection-{{ collection.title | handle }}{% endif %}">
and then in your CSS file (replace [title] with the title of your own collection:
.template-collection.collection-[title] #shopify-section-header {
display: none;
}
Hi,
Not particularly related to this thread but is there a way to remove the header section (well I have done this) but improtantly keep the navigation bar showing?
I have removed the header section (display: none) but it removes the nav bar as well and my logo.
Ideally I want my logo within the nav bar and showing at top of page.
I am using the venture theme.
Any help would be appreciated.
Cool
Hello,
Your solution worked really well.
Is there a way to remove the "Quick links", "Search" and "Newsletter" option from the footer?
@Newbie6, to remove the footer, amend the previous code:
#shopify-section-header, .product-form__cart-submit, .site-footer {
display: none;
}
Thanks again.
Is there anyway to keep the "Powered by Shopify" and Payment type accepted in the footer visible?
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;
}
Thank you very much for all your help
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024