How to add a button to your announcement bar

Feb 27

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

With a little bit of code, you can turn a link in your announcement bar in your Squarespace website into a button.

I think it is a great feature for promoting an event or an opt-in, and I even use it right here on InsideTheSquare.co

Before you check out the video and copy+paste this code into your own site, I want to mention that Announcement Bar’s are a premium feature, accessible only for folks who have a business or commerce Squarespace subscription.

→ SUPER IMPORTANT: YOU GOTTA DO THIS PART FIRST!

To turn your announcement bar on, head over to your main menu, and select Marketing from the list. Here you will see Announcement Bar - click on that to head into the announcement bar options to enable it.
Now that it is enabled, check out this tutorial video. Once you have a handle on exactly what to do, the code you need is below, ready for you to copy and paste into your own website!

Here are the custom codes from this tutorial:

Use this code to turn the announcement bar link into a button.
Remember, you can change any numerical value below to fit your site design and be sure to change the hex color code (#FFF below) to match your own brand!

.sqs-announcement-bar-text a {
position: relative;
text-decoration: none!important;
margin: 5px!important;
padding: 4px!important;
border: 1px solid #FFF!important;
font-weight: 600!important;
line-height: 2.5em}

Ready to add that hover effect?

Add the code below, and change the hex color codes in bold below to match your own brand colors!