How to Create a Notification Bar in Showit: A Friendly Step-by-Step Guide from a Showit Pro

Whether you’re launching a limited-time offer, promoting a lead magnet, or just want to share important news, adding a notification bar to your Showit website can make a huge difference. In this guide, I’m going to walk you through how to create a notification bar in Showit the way I do it for my own clients no fluff, just real, practical advice.

If you’ve ever asked yourself, “Can I add a notification bar in Showit like I can in other website builders?” the answer is YES. And honestly, once you know the trick, it’s super easy.

Let’s dive into it!

Why Add a Notification Bar to Your Showit Website?

A notification bar, also known as a banner bar or announcement bar, is a sleek horizontal strip usually placed at the top (or sometimes bottom) of your website. Here’s what makes it powerful:

• Draws attention to time-sensitive content (sales, discounts, booking deadlines)
  
• Improves conversion by guiding users toward your goal
  
• Keeps mobile visitors in the loop without needing popups
  
• Doesn’t interrupt UX it’s subtle but effective
  

I’ve personally used notification bars to boost email signups by 30% and double the clicks on promotional offers.

Step-by-Step: How to Create a Notification Bar in Showit

Here’s exactly how to create a notification bar in Showit using its built-in design tools no code or third-party plugins needed.

Step 1: Decide Where You Want It

First, decide whether you want the bar on:

• All pages (site canvas)
  
• Just the homepage
  
• A specific sales or launch page
  

Pro Tip: If you want the same bar to show across multiple pages, it’s best to use a Site Canvas.

Step 2: Create the Notification Bar Canvas

1. Open your Showit dashboard
   
2. On the left panel, click “Site Canvases” > “+ Add New Canvas”
   
3. Name it something like: Notification Bar – Promo
   

Customize the Canvas

• Height: Set to around 60-80px (adjust based on content)
  
• Background Color: Use a high-contrast color so it stands out (e.g., #FFD700 for a yellow alert-style or black for sleek promos)
  

You May Like: Showit Popup Box – No Code Tutorial

Step 3: Add Text + Call to Action Button

• Drag a text box into the canvas
  
• Write your message: “Get 20% off all wedding packages until Friday!”
  
• Add a button next to the text and link it to your booking page or lead magnet
  

Use bold for urgency like: “Limited Time Offer”

Styling Tips:

• Use uppercase for key phrases
  
• Keep font small but readable (14–16px)
  
• Maintain plenty of padding
  

Learn More: Flashing Callout Words Effect in Showit

Step 4: Make It Mobile Responsive

This part is often overlooked but super important.

Switch to the mobile view in Showit and:

• Reduce text size if it breaks lines
  
• Stack text and button vertically if needed
  
• Ensure tap targets are large enough (44px height is a good rule)
  

Learn More: Rotating Image or Icon in Showit

Step 5: Set the Canvas to ‘Always on Top’

To make the notification bar always visible at the top:

1. Click the canvas settings
   
2. Toggle “Sticky: Top” ON
   
3. Set z-index to something high like 1000
   

This ensures your notification bar stays above everything else, even when users scroll.

Step 6: Add to Page(s) or Set as Global Site Canvas

If you want it across all pages:

1. Right-click the canvas > “Convert to Site Canvas”
   
2. Then drag this into every page layout (or base template) that you want it shown on
   

Alternatively: Set it in your base layout once and it’ll apply globally.

How to Style Your Showit Notification Bar to Match Your Brand

Don’t let your bar look like an afterthought. Here’s how I make mine on-brand:

Fonts & Colors

• Use your primary brand color or complementary shade
  
• Keep fonts consistent with rest of site
  

Add Icons for Visual Interest

• Use small SVG or emoji
  
• Helps break up text and adds emotion
  

Animation for Attention (Optional)

• You can add scrolling or pulsing effects with embedded CSS or gifs
  

Real-World Examples: When to Use a Notification Bar

1. Limited-Time Offers

“20% off all prints until Sunday!” link to shop page

2. Event Countdown

“Only 3 days left to book your elopement session for March!”

3. New Freebie or Lead Magnet

“Grab my free posing guide for couples” link to download page

4. Site Maintenance or Outage Alert

“We’re making improvements some pages may be offline this weekend”

5. Shipping or Booking Delays

“Please allow extra delivery time due to holiday season”

Alternatives to a Native Notification Bar in Showit

While Showit doesn’t have a pre-made ‘notification bar’ widget, there are a few other ways to achieve the same result:

Use a Popup from ConvertKit or Flodesk

• Ideal for email list building
  
• More visual customization, but not persistent like a bar
  

Embed a Custom Code Snippet

• Add HTML/CSS bar via Showit’s embed box
  
• More advanced, but allows countdown timers, animations, dismiss buttons
  

Use Third-Party Tools Like HelloBar or Sumo

• Integrate via code
  
• Track clicks and performance with analytics
  

Common Questions About Showit Notification Bars

Will it slow down my site?

Nope! Because it’s a native canvas, there’s zero extra load time. Just keep image and font sizes optimized.

Can I hide the bar after a few seconds?

Not natively in Showit. You’d need code or an embedded widget with that option.

How do I track clicks?

If you’re using a Showit button, set a unique URL with UTM tracking, or monitor in Google Analytics.

Can I A/B test different bars?

Not directly in Showit, but you can duplicate canvases and rotate them in/out over time.

Final Tips from a Showit Pro

I’ve used notification bars on everything from personal portfolio sites to big launch pages, and here’s what I’ve learned:

• Keep it short and actionable: One sentence max
  
• Make it mobile-friendly first: Over half your visitors are on phones
  
• Use FOMO tactics: Words like “Limited,” “Now,” “Ends soon” really drive urgency
  
• Switch it out regularly: Fresh messages = more clicks
  

Summary: Create a Notification Bar in Showit to Boost Conversions

If you’ve been wondering how to create a notification bar in Showit, now you know it’s easy, effective, and adds tons of value to your site without hurting the design. It takes under 10 minutes to set up, and when styled well, it can skyrocket clicks, sales, and engagement.

So go ahead and add that bar!

Don’t forget to use the screenshots from [6:14] and [7:45] of the YouTube video linked above for visuals your readers will appreciate seeing what it actually looks like in the Showit builder.

Ready to uplevel your Showit site?

Check out more design tips, templates, and conversion tricks at getperfectwebsite.com where we make Showit shine.