Announcement Bar

Author: Charlotte Tran 4578 views

An Announcement Bar is displayed at the top of your Shopify store to highlight important messages, such as special promotions, shipping offers, new product launches, restock updates, or limited-time deals.

With the Announcement Bar extension, you can customize the content, design, countdown timer, and call-to-action to capture visitors’ attention and encourage more purchases.

Let’s add an Announcement Bar to your page and start promoting key offers across your store.

1. How to install the Announcement bar extension?

Step 1: From your EComposer dashboard, select CRO Extensions in the left sidebar.
Step 2: Search for the Announcement bar extension.
Step 3: Click Details to view the extension information, then select Install extension to add it to your store.

Note: After you install and configure the Announcement Bar extension, it will automatically appear on your pages. This extension is available on the EComposer Pro and Premium plans.

2. Config extension settings

To open the extension settings, go to App Dashboard → CRO Extensions → search for Announcement Bar → click Settings.

In the settings popup, you can customize the General, Icon, Style, and Countdown options. After making your changes, click Save to apply them.

2.1. General setting

In the General tab, you can configure the main content and display behavior of the Announcement Bar:

Enable announcement bar: Enable or disable the Announcement Bar on your store.
Enable list of contents: Add and display multiple announcement messages.
Sticky when scroll: Keep the Announcement Bar visible at the top of the page while visitors scroll.
Z-index: Adjust the stacking order of the Announcement Bar. A higher value places it above other page elements, while a lower value may cause it to appear behind them.
Content: Enter and format the message displayed in the Announcement Bar. You can also insert the [countdown] tag where you want the countdown timer to appear.
Icon: Add an icon next to the announcement message.
Min height: Adjust the minimum height of the Announcement Bar.
Enable close button: Allow visitors to close the Announcement Bar.

2.2. Icon setting

In the Icon tab, you can customize the icon displayed in the Announcement Bar:

Icon width: Adjust the size of the icon.
Icon color: Change the icon color to match your store’s design.

Please refer to the video below for detailed instructions on configuring the icon settings.

2.3. Style setting

In the Style tab, you can customize the appearance of the Announcement Bar:

Primary background: Change the background color of the Announcement Bar.
Content color: Adjust the color of the announcement text and link.
Content typography: Customize the font, size, weight, and style of the content.
Link typography: Customize the appearance of the link text.
Alignment: Set the alignment of the announcement content.

2.4. Countdown

Enable this feature to display a countdown timer in the Announcement Bar.

Enable countdown: Turn the countdown timer on or off.
Day / Hour / Minute / Second: Customize the labels displayed for each time unit.
Typography, Color, Style, and Background color: Customize the countdown timer’s appearance.
Hide announcement bar when expired: Automatically hide the Announcement Bar when the countdown ends.

3. Frequently Asked Questions

3.1. Can I display the Announcement Bar on every page?

After you install and configure the Announcement Bar extension, it will automatically appear across all pages of your store, including both EComposer-published pages and pages created with your Shopify theme. You do not need to add it or republish each page.

3.2. Can I add a clickable link to the Announcement Bar?

You can add a link and customize its text in the General settings. When customers click the link, they will be redirected to the assigned destination.