How to Add an Announcement Bar to Flatsome (7 Steps)

To add an announcement bar to Flatsome, paste the WiserNotify pixel into Header Scripts under Flatsome > Advanced > Global Settings. Then build an Announcement widget in WiserNotify and publish it. Setup takes about ten minutes.

Your theme stays untouched. The bar sits on top of your layout, so there is nothing to rebuild in UX Builder and no theme file to edit.

Below are the seven steps with screenshots, then ideas for what to put in the bar and what to check when it does not show.

Flatsome Top Bar vs a WiserNotify Bar

Flatsome already has a Top Bar in its header. It suits a message that never changes, and a WiserNotify bar suits one that needs a schedule or a target.

Option	Best for	How it works	Schedule and targeting
Flatsome Top Bar	One static message on every page, such as a shipping note	Edit the text yourself in the Header Builder and update it by hand	None built in
WiserNotify bar	Scheduled offers and bars aimed at certain pages or visitors	Build the bar in the WiserNotify dashboard after adding one pixel	Start and expiry dates, page rules, country, UTM, and visitor type

Here is a Flatsome Top Bar on a live store, one static line above the header.

How to Add an Announcement Bar to Flatsome

You will work in two places, the Flatsome options panel and the WiserNotify dashboard. Start the 7-day free trial first, then follow the video or the steps below.

Step 1: Copy Your WiserNotify Pixel

1. Log in to WiserNotify and add your Flatsome store as a website.
2. Open the pixel page.
3. Click Copy code.

Step 2: Paste It in Header Scripts

1. In your WordPress admin, go to Flatsome > Advanced.
2. Open Global Settings.
3. Paste the full pixel, script tags included, into Header Scripts.
4. Save your changes.

Step 3: Verify the Pixel

1. Go back to the WiserNotify pixel page.
2. Click Verify pixel installation.
3. Look for the green line that says the pixel code was detected.

Step 4: Choose an Announcement Widget

1. Open Widgets in the WiserNotify menu.
2. Click the Announcements tab.
3. Pick a template that suits a top bar, such as Announcement – Offer or Announcement – Welcome.
4. Click Add.

Step 5: Name It and Add Your Domain

1. Name the widget, for example “Flatsome announcement bar.”
2. Enter your store’s domain and press Enter.
3. Click Create & customize.

Step 6: Design the Bar

1. In Text editor, write your message, such as “Free shipping this week.”
2. In Click actions, add a button like “Shop now” and set its link.
3. In Position & animation, pick where the bar sits and how it moves in.
4. In Style, copy your Flatsome colors and font.
5. In Timing control, set start and expiry dates for an offer with an end date.
6. Click Next.

Step 7: Pick Pages and Publish

1. Go to the Display tab.
2. Leave All pages on, or choose Pages when url condition matches to target certain pages.
3. Add country, UTM, new or returning visitor, or referrer rules under Advanced targeting options if you need them.
4. Click Save, then Publish.
5. Open your store in a private window to see the bar.

Header Scripts vs a UX Builder Element

Many Flatsome owners paste scripts into a UX Builder HTML element first, since that is where they build pages. That loads the pixel only on the page that holds the element.

• Header Scripts covers every page: product, shop, cart, and blog pages all load the pixel.
• You manage it in one place: edit the pixel once in Global Settings instead of searching through pages.

Announcement Bar Ideas for Flatsome Stores

Pick one job for the bar. These are the messages that work well on a Flatsome store.

• Promotion: “Save 20% on all items. Use code SAVE20.” Pair it with an offer on your Flatsome store.
• Urgency: “Our flash sale ends tonight at midnight.” Add a countdown timer if the sale has a hard end.
• Shipping: “Free shipping on orders over $50.”
• Event: “Join our live webinar this Friday at 6 PM. Register now.”
• Policy update: “Our refund policy has changed. Learn more.”

Where to Show the Bar on Flatsome

On a phone the bar shrinks to one centered line, so keep the message short.

• Homepage: best for sitewide promotions, since ad traffic often lands here.
• Product pages: use the bar for a discount tied to that product or category.
• Cart page: remind shoppers of a free shipping threshold.
• Landing pages: keep the message to one campaign.
• Mobile: check that the bar does not cover the menu or a sticky Add to cart bar.

Announcement Bar Not Showing on Flatsome?

When the bar does not appear, the cause is usually a cache, a blocked script, or a pixel that loads on one page only.

• Cache not cleared: purge your caching plugin after you save Header Scripts.
• Security plugin blocking the script: allow WiserNotify in Wordfence or a similar tool, then clear the cache again.
• Script tags missing: paste the pixel exactly as you copied it, with the full script tags.
• Pixel in a UX Builder element: move it to Header Scripts so every page loads it.
• Widget not published: check that the toggle in your widget list is on.
• Old view in your browser: open the page in a private window.

Still stuck? Message the team through the live chat in your WiserNotify dashboard.

Common Mistakes to Avoid

• Long messages: keep the bar to one short line and one button.
• Off-brand design: match your Flatsome colors and font so the bar looks native.
• No test on phones: check the bar on a real device before you publish.
• Expired offers: set an expiry date so an old sale does not stay up.
• No clear next step: add a button that goes straight to the offer.

How to Measure the Results

• See views and clicks for each bar under Performance in WiserNotify.
• Compare your conversion rate for a few weeks before and after the bar goes live, and change one thing at a time.
• Test two messages against each other with A/B variants, and let each run for a few weeks.

Wrap Up

Flatsome’s Top Bar covers a message that never changes. A WiserNotify bar covers the rest, like a sale with an end date or a message for one set of visitors. Add the pixel once and build the bar.

Start with one clear offer on your homepage, then add page rules as you learn what works.

Related Post

• Add Announcement Bar to HTML.
• Add Announcement Bar to Leadpages.
• Add Announcement Bar to Unbounce.
• Add Announcement Bar to BigCommerce.
• Add Announcement Bar to Yola.