Set Up an Announcement Bar on Your Site

Apply a banner sitewide, on product pages, collections, or specific pages

Updated over a week ago

Announcement bars serve as a useful method for sharing store-related information without relying on a countdown timer. Additionally, you can leverage the email capture feature to encourage customers to subscribe to your mailing list.

Announcement Bar Setup

To create the Announcement Bar, first select Create Widget:

Select Announcement Bar and click on Next:

Insert a name for this announcement bar:

And proceed to schedule when you want the Announcement bar to display on your store by configuring the Start and End :

If the announcement bar does not have an end date, please tick on Remain active indefinitely checkbox.

Next, select the Announcement bar position. You can place it either at the top or bottom of the selected page.

Select Display as Sticky Banner if you want the banner to remain of the position regardless of scroll position:

Proceed to select the pages that you wish to display announcement bar:

If you want to display the announcement bar to visitors from specific countries, please configure this setting at the Only show in specific countries setting.

Banner Preview Tab

When turned on, your announcement bar will be minimized into a tab when customers turn off the tab.

To turn on this feature, navigate to Banner Preview Tab and select Turn On:

Proceed to customize the Preview Tab's design settings by configuring the Tab Design section.


Customize the Design of Your Announcement Bar

To design your banner/widget, go to the Design tab.

Next, proceed to customize the elements you wish to display on your banner.

  • Title - You can choose if you want to display the main title of the pop-up modal. You can edit the contents and the format at the Title setup.


  • Link - When you enable this option, a clickable link will appear, which can be customized in the Link settings:


  • Email capture - Enabling this element will display an email capturing textbox. All emails captured will be automatically synchronized to your Customer page in the Shopify admin panel. If you had integrate Urgency+ with Mailchimp or Klaviyo it will automatically synchronize to the mailing lists as well.

  • Copy Discount Code - By enabling this option, a discount code will be display at the pop-up modal:


    If you want the Discount Code to be shown, at the pop-up modal without any email signups, locate Discount Code (Before Sign Up) and select Change:



    Alternatively, if you want the Discount Code to show after an email signup is made, locate Discount Code (Sign Up Success) and select Change.


    Link the Discount Code set that you wish to display.



    You can then proceed configure the design on the discount code display here:

  • Subheading - By enabling this option, a message will appear below the countdown timer. For further customization—such as adjusting font type, size, and color—navigate to the Subheading settings.


  • Primary Button - When activated, customers can click this button to navigate to any page or site configured in the Primary Button Setup.


    You can also customize the color and format of the button there.

  • Close Button - Enabling this will include a close button onto the announcement bar. This will give customers an option to close the announcement bar anytime they wish.

  • Remind button - If you want your customers to signup for an event stated in your announcement bar, you can activate the Remind button. Once activated, you are required to setup the pop-up widget where you can setup the schedule of the reminder email and its contents at the Remind Me Widget tab:

    and the email template of the Remind email at the Remind Me Email tab:



Displaying Multiple Announcements at Once

There are times where you might run multiple campaigns at once and you might want to inform the customers regarding all these campaigns at once.

Firstly, at the Settings tab:

Setup the Carousel settings such as the arrow color, the transition speed and the transition style:

Next, after setting up the banner design as well as the design, select the + New Banner button:

An additional tab will then appear and you can proceed to setup the behavior and the design of the timer:

Once you had finish setting up the timers, complete the setup by setting up the transition style and transition speed (time interval between each timers). If you want customers to have the option of manually scrolling through the timers, you can enable Add previous/next arrows.


Example Announcement Bars

Did this answer your question?