Disable Announcement Bar On Single Page

I'd like to be able to disable the announcement bar on a single page. Is it possible? I'm guessing that it might be possible via code in the "Page Header Code Injection". However, I have no clue what that code would be. Do you know how?

Can you share link to your site?

You can do this with CSS, Target Page ID and add to Home > Design > Custom CSS (Personal Plan) or Page Header (Business Plan or higher)

Hi @BOwens,

As @tuanphan mentioned the code is specific to each template family. If you happen to be on a Brine family template, you can add this code in that particular page's Page Settings > Advanced > Page Header Code Injection to remove the announcement bar. If you are on a different template, please post a link to your site so someone can help you out. 

<style> 
 /* remove announcement bar */ 
 .sqs-announcement-bar-custom-location {
 display: none !important;
 }
 </style>

Hello @christyprice @tuanphan

I would like to know if it is possible to keep the announcement bar only on the shop tab of my website? 

Have a beautiful day!

@iJizzy1 are you using Squarespace 7.1? Try adding this to Custom CSS:

body:not(.collection-type-products) .sqs-announcement-bar-dropzone {
  display:none;
} 

It's working, thank you very much ! 🙂

Hi @christyprice,

I am trying to do the same thing as @iJizzy1, which is only have the announcement bar visible in the shop portion of my website.

However, I am using Version 7.0 and the Wells family (Wells template).

Is there a Custom CSS code available for this situation too?

On 11/14/2021 at 9:53 AM, lauraplad said:

Hi @christyprice,

I am trying to do the same thing as @iJizzy1, which is only have the announcement bar visible in the shop portion of my website.

However, I am using Version 7.0 and the Wells family (Wells template).

Is there a Custom CSS code available for this situation too?

Can you share link to shop page on your site? We can help easier

On 11/15/2021 at 3:15 AM, tuanphan said:

Can you share link to shop page on your site? We can help easier

Yes, here's my shop page: https://www.lauraplad.com/personal-shop

I'd like to have an announcement banner on the top saying that I offer free US shipping. My website doubles as my portfolio, so I'd like this banner to only be visible on my shop page(s).

On 11/18/2021 at 7:22 AM, lauraplad said:

Yes, here's my shop page: https://www.lauraplad.com/personal-shop

I'd like to have an announcement banner on the top saying that I offer free US shipping. My website doubles as my portfolio, so I'd like this banner to only be visible on my shop page(s).

Add to Design > Custom CSS

body.collection-type-products:before {
    content: "Free US order shipping";
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    font-size: 30px;
}

14 hours ago, tuanphan said:

Add to Design > Custom CSS

body.collection-type-products:before {
    content: "Free US order shipping";
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    font-size: 30px;
}

Awesome, thank you so much! 😃