How to Add a Notification Bar to Your Showit Site: A Complete Step-by-Step Guide

Imagine your website visitors arriving and instantly seeing a simple, elegant message about your latest promotion or an important update. Adding a notification bar to your Showit website is a fantastic way to make key announcements that immediately capture attention without disrupting the browsing experience. It’s a versatile tool that’s both functional and beautiful, giving your site a little extra boost in keeping visitors informed and engaged.

In this step-by-step guide, we’ll walk you through the full process to set up a custom notification bar on your Showit site. This guide covers everything, from planning your message to customizing the style, and includes options for making your bar sticky (or fixed) at the top of the screen as users scroll.

Watch the Tutorial: How to Add a Notification Bar to Your Showit Website

For those who love visual learning, check out our YouTube Video below. This video provides a full step-by-step guide on creating a notification bar in Showit, so you can watch, follow along, and see exactly how to make this feature pop on your site.

Now, let’s jump into the written steps for adding your own notification bar.

Step 1: Plan Your Notification Bar Message

Before creating your notification bar, take a moment to plan your message. A few key tips:

• Be concise: Your message should be clear and to the point.
• Use a call to action (CTA): Phrases like “Learn More,” “Shop Now,” or “Subscribe Today” gently guide visitors toward action.
• Create urgency if needed: If your message relates to a time-sensitive offer, a little urgency (like “Ends Soon!”) can drive more engagement.

Whether it’s promoting a sale, announcing a new product, or sharing important news, having a solid plan for your message helps keep your notification bar effective and engaging.

Step 2: Create a New Canvas in Showit

1. Log in to Showit: Open your Showit account and go to the website you want to edit.
2. Select the Pages Tab: Navigate to the Pages tab, and choose the page where you want the notification bar to appear (the Home page is a popular choice).
3. Add a New Canvas: Click the + icon next to “Canvases” to create a new canvas dedicated to the notification bar.
4. Name the Canvas: For easy reference, name this new canvas something like “Notification Bar.”

This canvas will serve as the dedicated space for your notification bar content.

Step 3: Customize the Notification Bar Canvas

Now it’s time to bring your notification bar to life by adjusting its style and content:

1. Resize the Canvas: Select the canvas, and on the right-hand side of the screen, adjust the height under the canvas settings. A height of around 50px typically works well for a notification bar, but feel free to adjust this to suit your message.
2. Choose a Background Color: On the right-hand side of the screen, locate the Fill settings and choose a background colour that contrasts nicely with the rest of your site to make the notification bar stand out.
3. Add Your Message: Use the Text Tool to type in your announcement. Make sure the font size is readable, and the text color contrasts with the background for maximum legibility.

Step 4: Add a Call-to-Action Button (Optional)

If your notification bar includes a call to action, adding a button is a great way to make the CTA stand out and encourage clicks:

1. Add a Button: From the Elements menu, drag a Button onto the canvas.
2. Style the Button: Customize the button’s colour, font, and size to match the look of your notification bar. A small, clear button with text like “Shop Now” or “Learn More” often works best.
3. Link the Button: On the right-hand side of the screen, under the button settings, add the URL you’d like the button to direct users to, such as a product page or a special offer.

Step 5: Make the Notification Bar Sticky (Optional)

If you’d like your notification bar to stay visible at the top of the page as visitors scroll, follow these steps to make it “sticky.” This option works well for certain types of announcements, like ongoing promotions or essential updates. However, if you prefer a more subtle approach, feel free to skip this step.

1. Set Sticky Canvas: On the right-hand side of the screen, find the Canvas Settings and check the box labelled “Sticky.”
2. Position the Canvas at the Top: Select Top as the sticky position to ensure it stays at the top as users scroll.

Setting the notification bar as sticky keeps it fixed at the top, ensuring your message remains visible no matter where visitors are on the page.

Step 6: Preview and Publish Your Notification Bar

Once everything is set, preview your notification bar to make sure it’s just right:

1. Preview Your Changes: Click Preview to see how the notification bar appears on both desktop and mobile. If needed, adjust the elements for a polished look on mobile by resizing or repositioning elements.
2. Publish Your Notification Bar: When you’re satisfied with the look and functionality, click Publish to make your notification bar live on your site.

Tips for an Effective Notification Bar

To maximize the impact of your notification bar, keep these tips in mind:

• Limit Distractions: A clean, minimal bar is easier to read and more effective.
• Use High-Contrast Colors: Ensure the bar stands out visually but still complements your site’s style.
• Refresh Regularly: Keep your message relevant by updating it with new announcements or seasonal offers.

Conclusion

Adding a notification bar to your Showit site is a simple yet powerful way to share key messages with your visitors. With this step-by-step guide, you can design a notification bar that’s both functional and elegant, guiding visitors to promotions, news, or other important content without disrupting their browsing experience. Try it out and see how a custom notification bar can enhance your site’s engagement and bring your message to the forefront.

Ready to take action? Get started by adding your notification bar today, and enjoy the benefits of keeping your visitors informed and engaged from the moment they arrive. If you’re looking to update your website or branding, you can reach out right here.