Create an announcement bar on online store

In this article:

Introduction
Installation of Announcement Bar
FAQ that you should know

1. Introduction

Now you can stick an important message on top of your store with a button. Easily setting, fully customization. Sometime customer might not alert with your promotion, or any notifications. Stick it on top with a full-screen banner (the colour suggest to be big different from your background colour). A button makes the information delivery work completely.

2. Installation of Announcement Bar

Step 1 : EasyStore Admin > Apps > More Apps > Search Announcement Bar > Install this app 



Step 2 : Write in your message for the banner here



Step 3 : You can tick on the Enable button box to insert your own Button text and Button Link

📌 Note : When the customers click on 'Button text', the 'Button link' will redirect them to the link inserted.



Step 4 : You can also tick on the Enable Countdown box for your announcement bar as choose your preferred style too.



Step 5 : You can preview the outcome at the right side

💡 Tips : The recommended total limit amount of Announcement Bars would be 5 .



Step 6 : Save changes and you're all done! 😍

Extra GIF image reference :

3. FAQ that you should know

Q1 : What to do if my Announcement Bar is blocking my website top bar?

You may follow the steps below if the announcement bar is blocking your website top bar.

Click into Channels > Online Store > Edit Source > assets > theme.js and add this code at the bottom of the file > Save

if($('#announcement-bar-top').length){ $('.header-bar.sticky-topbar').css('top',$('#announcement-bar-top').height() +'px'); }

Q2 : Can I create multiple Announcement Bars ? [NEW Enhancement]

Yes you can 😊👌


If there are more than 1 Announcement Bars created, it will look like this on your website :



Here is a quick tutorial of how you can create more than 1 Announcement Bar.

Updated on: 18/06/2024