How To Add an Announcement Bar to Squarespace 7.1

Explanation of the Squarespace Announcement Bar.

The Squarespace Announcement Bar is placed at the top of your webpage and is usually colorful. This thin ribbon is a simple way to highlight short text followed by a link. Its main goal is to grab the attention of your website visitors. For example, a sticky bar with an exciting discount or sale information.

The announcement bar acts as prime real estate on your website and should encourage your visitors to act. Due to its prime positioning, chances are high that most users would see it. This tool could be used to convert on sales, disclose discounts or offers that would go unnoticed on the feed, newsletter prompt links, free courses - the ideas are endless.

This is important because this feature is visible on every single page of your site, allowing you to communicate one message at a time. In this update, if you already know the announcement bar and want to avoid seeing it, add it with a simple line of code.

Why Use an Announcement Bar in Squarespace 7.1?

How Announcement Bars Drive More Engagement

An announcement bar is a strategic communication tool that grabs attention without bombarding your visitors with popups. Here's why they're valuable:

• Increase Sellouts: Use a clear call-to-action (CTA) to drive users to your offers/landing page.

• Improve UX: Offer easy access to important updates.

• This can drive event awareness: Use it to promote limited-time events, seasonal sales, etc.

The main advantages of announcement bars

• Expanded Visibility: Show important content at the header of every page

• Marketing Made Easy: Use announcement bars to promote offers or discounts

• Mobile-Friendly: Squarespace makes sure the announcement bar is visually appealing on any device.

Example Use Cases

• Retailer website is advertising a sale sitewide for 20% off.

• Blogging the latest content

• Updated office hours from a service-based business.

Using these attributes, companies can enhance user interaction and generate actionable results.

Setting Up Your Squarespace Announcement Banner

Implementing the promotional banner is a straightforward process, and the good news is that it remains consistent whether you're using Squarespace 7.0 or 7.1

Simply access your site editor and navigate to the following in the sidebar:

• Marketing >

• Announcement Bar >

• Enable Announcement Bar

Clicking Enable on the Announcement Bar will generate a preview of how the full Announcement Bar will appear at the top of your site.

Just type your text in, use whatever formatting and links you want, and hit Save.

Or, if you want the whole bar (not just the text) to be clickable, add the URL to the Clickthrough url field. Since this is a field of type URL, this can include links to specific pages of your site, other sites, or even files to automatically be downloaded. The COG/GEAR Icon opens the Link Operator panel, where you can modify your link and its properties.

Then, once you’ve updated everything, try to Save in the top left.

Design Your Announcement Bar

Customizing your Squarespace site allows for comprehensive brand consistency on every page. However, when it comes to a promotional popup, a slight departure from your standard branding can make your announcement bar more eye-catching. Follow these guidelines to personalize elements such as background color, text color, and font styles.

For Squarespace 7.1:

Changing the Announcement Bar Font

• Navigate to Home Menu > Design > Fonts.

• Under Global Text Styles, click Assign Styles.

• Under Announcement Bar > Text, choose a preset style or customize it to your liking.

• Click Save.

Changing the Announcement Bar Colors

• Go to Design > Colors > Section Themes.

• Identify the theme controlling your page header.

• Click the Pencil Icon to edit.

• Under Announcement Bar > Background, adjust the colors.

• Under Announcement Bar > Text, modify the text colors.

• Click Save.

For Squarespace 7.0

• Go to Home Menu > Design > Site Styles.

• Locate the Announcement Bar by searching or scrolling down.

• Edit the feature you want to change.

• Click Save.

Step-by-Step Guide to Adding an Announcement Bar

Enabling the Built-In Announcement Bar

Squarespace 7.1 makes it simple to add and customize an announcement bar with no coding required. Follow these steps:

1. Log In to Squarespace:
   Access your site via the Squarespace dashboard.

2. Navigate to the Design Section:

   • Go to “Design” > “Announcement Bar” in the menu.

3. Enable the Bar:
   Toggle the "Enable" switch to activate the feature.

4. Customize the Content:

   • Add your message in the text box.

   • Use the formatting tools to adjust fonts, alignment, and style.

5. Choose Visibility Options:

   • Decide where and when the bar appears using the scheduling feature.

6. Preview and Save Changes:

   • Test the bar across desktop and mobile views.

   • Save your changes to make the bar live.

Best Practices for Designing an Announcement Bar

1. Design and Content Tips

Creating an effective announcement bar involves balancing aesthetics and functionality. Follow these tips:

• Keep Messaging Clear: Use concise text (e.g., “Limited-time sale: 30% off all items!”).

• Incorporate Branding: Match the bar's colors and fonts with your website’s theme.

• Add a Strong CTA: Encourage action with buttons like “Shop Now” or “Learn More.”

Example of a Well-Designed Bar

• Message: "🎉 New Year Sale: Save 20%! Ends Jan 31."

• CTA: A button redirecting to the sale page.

• Design: A bold color (e.g., red) that contrasts with the site’s background.

2. Common Mistakes to Avoid

• Overloading Text: Keep the message short and to the point.

• Distracting Colors: Use colors that align with your brand and don’t strain readability.

• Neglecting Mobile Testing: Always check how the bar looks on phones and tablets.

By following these practices, you’ll ensure that your announcement bar enhances user experience without disrupting site navigation.

---

FAQs About Squarespace Announcement Bars

---

1. Can I Schedule an Announcement Bar?

Yes, use the visibility settings to control when the bar is displayed.

2. How Do I Add a Countdown Timer?

Use custom code or a plugin like Elfsight to integrate a timer for limited-time offers.

3. Why Isn’t My Announcement Bar Showing?

Common issues include:

• The bar is disabled in settings.

• The bar’s visibility settings conflict with other elements.

For troubleshooting, refer to the Squarespace Help Center.