Get free delivery on orders over $100

Announcement Bar

This is a global component, usually attactched to the header of theme.liquid to form the notification bar at the very top of the store. This may be configured to have multiple messages, have countdown timers, or animate to move horizontally

Installation

To install to your own store, get the files from the repository. Install the dependencies moment and moment-timezone and take the files moment.min.js and
moment-timezone-with-data.min.js respectively.
Copy the contents of the files inside the folder src/announcement-bar which should contain the following:
 
📦src
 ┣ 📂announcement-bar
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📜announcement-bar-countdown.js
 ┃ ┣ 📂sections
 ┃ ┃ ┣ 📜announcement-bar-john.liquid
 ┃ ┃ ┣ 📜announcement-bar-wmr.liquid
 ┃ ┃ ┗ 📜announcement-bar.liquid
 ┃ ┗ 📂snippets
 ┃ ┃ ┗ 📜countdown.liquid

Configuration

 

Announcements

It will make a new section called "Announcement Bar" that can be added into the theme. Ideally you should include this on the header section group. If your store is based on Dawn theme, then it should automatically be applied

Users may add mutiple announcement bars that for now will stack on top of each other. Ideally we can switch between these messages in the future.

Countdown

Announcements may be made to countdown to a date and time specified in this configuration.

To make the countdown timer appear, simply add [countdown] to where you want it to appear in the message

Others

Users may configure text alignment or it's color scheme based on the color schemes set on the theme. The user may also override or complement these two settings by adding in his own custom CSS.

Animation speed tells us how long it will take for the message to travel from right to lef, defaults to 20s.

Lastly, the link to where the announcement bar may go to when clicked can also be set.

Back to blog