Shopify themes, liquid, logos, and UX
Hello!
We are using the Dawn theme for our website, and can't figure out how to remove the header from just 1 page. Plus, when we do remove the header it leaves a big blank space at the top across the entire website. I've tried several different code options and none work. Would appreciate any help
Thank you,
Monique
Hi @MoniqueA7 ,
May I know from which page would you like to remove header? So I can guide you accurately
About the concern you can exclude header from specific page by following below steps:
1) Move a head to Edit code and open theme.liquid file from layout
2) find the line {% sections 'header-group' %}
3) wrap it into the condition like below
{% unless template == ‘PAGE_TEMPLATE_NAME’ %}
{% sections 'header-group' %}
{% endunless %}
Note: Replace “PAGE_TEMPLATE_NAME” with your page template name that you wish to exclude header from.
Let me know if you have any further question or need more guidance.
Hi! I must have messed something up. When I added that code it created two headers on every page. The name of the page is '9 Pines Landing Page'. Attached are screenshots of where/how I added the code and what happened to the website
Thank you!
I cant replicate the 2header in your publish theme.
It’s showing twice because you put the code directly and not replaced with the line that already exists. First find the line {% section ‘header-group’ %}
then replace below code
{% unless page.title == ‘9 Pines Landing Page’ %}
{% section ‘header-group’ %}
{% endunless %}
Hi @MoniqueA7
Just like to clarify, which page 1 you mean to? It is the homepage?
No, its to a page that is linked in our foot navigation. It's title '9 Pines Landing Page'. To make it, I went to 'Online Store' > 'Pages' > 'Add Page'
Hi @MoniqueA7
You can add this code in your theme.liquid. See image for placement
{% if page.title == "9 Pines Landing Page" %}
<style>
.shopify-section.shopify-section-group-header-group.section-header {
display: none;
}
</style>
{% endif %}
Placement:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hello @MoniqueA7
Go to online store ---------> themes --------------> actions ------> edit code------->base.css ----> line number 2328
search this code
.header-wrapper {
display: flex;
position: relative;
background-color: rgb(var(--color-background));
}
and replace with this code
.header-wrapper {
display: none;
}
and the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024