Adjusting the Free Shipping Header Banner

Store Design
, , ,

Topic summary

A user wants to display the free shipping header banner only on product collection and individual product pages, rather than site-wide.

Solution provided:

  • Add CSS code to the end of the theme.css file
  • The code hides the announcement bar by default, then displays it specifically on product and collection template pages

CSS snippet:

.announcement-bar {display: none;}
.template-collection .announcement-bar {display: block;}
.template-product .announcement-bar {display: block;}

Status: Resolved - the original poster confirmed the solution worked.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hi there! In working with the Shopify system, one thing that I have been unable to identify is how to adjust the header. More specifically, I would like to have the Free Shipping Banner only pop-up on our product collections page and individual product listing pages rather than through the entire site. If anyone has any recommendations or suggestions they would be greatly appreciated. Thank you for your time.

Our Site: www.cocoandcobakery.com

Theme: New

2

@RLopez - add this css to the very end of your theme.css file and check

.announcement-bar {display: none;}
.template-collection .announcement-bar {display: block;}
.template-product .announcement-bar {display: block;}
3

Thank you so much!!