Hi all,
Does one know how to delete the header and the bar only on my landing page?
My URL is https://hobot-japan.com/pages/hobot-2s
Thank you in advance!
Topic summary
A user seeks to remove the header and announcement bar exclusively from their landing page (hobot-2s) on their Shopify store.
Solutions Provided:
Option 1 - Conditional Logic in theme.liquid:
- Navigate to: Online Store > Themes > Actions > Edit code > Layout > theme.liquid
- Add conditional statement to exclude announcement bar from non-index pages
- Insert code before the announcement bar section
Option 2 - CSS-Based Approach (Accepted Solution):
- Add custom CSS code targeting the specific page handle
- Insert before
</head>tag in theme.liquid:
{% if page.handle == 'hobot-2s' %}
[CSS to hide header/bar]
{% endif %}
Follow-up:
User successfully implemented the solution but encountered issues applying it to multiple pages using OR logic. The correct syntax for multiple pages was clarified:
{% if page.handle == 'hobot-2s' or page.handle == 'hobot388' %}
Status: Resolved - User confirmed the solution worked after syntax correction.
Hi @harukajmickey ,
To remove announcement bar from landing page use below conditional statement in theme.liquid
To get the theme.liquid follow below steps
- From Shopify dashboard, go to Online store > Themes > Edit code
- In the search box, search for the file named theme.liquid
{%- if request.page_type != 'index' -%}
{% section 'announcement-bar' %}
{%- endif -%}
Thank you Hari1_prasad! Where exactly do I need to put these codes?
You can simply add css code to hide them.
1: Online store > themes > Actions > Edit code > Layout > theme.liquid
2: paste code before ‘’
{% if page.handle == 'hobot-2s' %}
{% endif %}
Hi Kani!
Thank you. It worked!
1 Like
Hi Kani,
If I add the codes like this to apply to other pages, it didn’t work. Do you know the way?
{% if page.handle == ‘hobot-2s’ or ‘hobot388’ %}
Thank you in advance.
Thank you @Kani !!