Announcement Bar

Author: Charlotte Tran 4287 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 published pages. This extension is available on the EComposer Pro and Premium plans. Upgrade your plan to unlock it.

2. How to set the Announcement bar extension?

After installing the extension, you can open and configure it directly in the EComposer editor:

Step 1: Open your page in the EComposer editor.

Step 2: Click the + icon (Add elements to your pages) in the left sidebar to open the elements panel.

Step 3: Click Extensions, then search for Announcement Bar under the installed extensions.

Step 4: Click Announcement Bar to open the extension settings popup.

From the popup, select Settings to customize the General, Icon, Style, and Countdown options. Once finished, click Save to apply your changes.

Note: You can either hit the Save & Publish button to watch the Announcement bar setting update from the live site or Clear the cache in the editor to view directly in the there.

2.1. General setting

In the General section, 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.
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 section, 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 section, 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 on your published pages. You do not need to 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.