How to remove Top bar from specific pages or collection?
https://www.tridentproducts.co.uk/collections/deal-town-collection
Topic summary
A user seeks to remove the top announcement bar from specific pages, specifically a collection page on their Shopify store.
Solutions Provided:
Two approaches were offered:
-
CSS Method: Add custom CSS targeting the announcement bar section (
#shopify-section-sections--19028005421322__announcement-bar .announcement-bar { display: none; }). This hides the bar globally for that specific section ID. -
Liquid Template Method: Use conditional logic in the theme code to hide the announcement bar only for a specific collection by checking the collection ID (
{% if collection.id == 534802006282 %}). This provides more granular control.
Outcome:
The original poster thanked the contributors, suggesting one of the solutions was helpful. The discussion appears resolved with working code snippets provided.
1 Like
Hi @fawadzia
let try to add this Custom CSS:
#shopify-section-sections--19028005421322__announcement-bar .announcement-bar {
display: none;
}
You can add this code to remove that announcement bar from that collection.
{% if collection.id == 534802006282 %}
{% endif %}
Thank You