An Announcement Bar is a full-width banner that appears at the top or bottom of the visitor's browser window as the site loads. The bar includes a notification message, promotional or store update, or a button with a call to action. When your customers click on the button, it redirects them to the page you want to promote.


Example of an Announcement Bar:


On this page


Creating an Announcement Bar


You can easily add an Announcement Bar to your Shopify store. To create a bar, follow these steps:

  1. From your Shopify admin, go to the BolideAI admin.
  2. Open the Announcement Bar app.
  3. Click Create Bar.

A new bar is added to the top of the bar list.


Note: By default, the status of a new bar is set as hidden. You can activate its display by clicking on the status name, which switches its value to active. A dialog box will ask you to confirm the action.



You can also clone an existing bar by clicking on the duplicate icon in the Actions column of the bar list. The bar you cloned is added to the list and contains the same title as the original bar plus the clone mark.



To find an existing bar, enter its title in the Search and Filter box provided at the top of the bar list:



Configuring a bar


When you've created a bar, you can configure it from the Edit Bar page. You can access this page by clicking on the pencil icon in the Actions column of the bar list.



Here, you can configure the bar display, including its design, content, display rules, and targeting settings:

  • General: Configure the display content of your announcement
  • Design: Change the design template to fit the style of your store
  • Display Rules: Set up the display rules of your announcement
  • Targeting: Restrict the bar display based on different locations


Tip: After you’ve made changes to the settings, a pop-up notification will appear at the top of the page reminding you to save them: “Unsaved changes in Announcement Bar”. You can then Save or Discard them.


After you've finished editing the bar and saved your changes, you can return to the bar list by following the Back to Bar List link at the upper right.



Bar content


From the General tab, you can configure your announcement content and a call to action button to be displayed on the bar:

  1. Set the Bar status to manage its visibility in your Shopify store.
  2. Specify the Bar title, which is only visible to you for your guidance. The Bar title is hidden from your store visitors. By default, the bar you create has an auto-generated title consisting of a set of letters and numbers.
  3. Edit the message text, which will appear on the announcement banner of your Shopify store. By default, the message contains placeholder values.
  4. To fit your Shopify store brand, set up the Font family and Font size of the message text and button text.
  5. Configure interactive button content, design, and display rules:
    • Bar clickable: The button can be added to or removed from the banner
    • Button text
    • Button URL: The page link that will open when hitting the button. You can enable the option to open the link in a new tab.
    • Button animation: Dynamic display of the button: on or off
    • Animation type: Motion pattern of the animated button
    • Close button: You can add a close button to the banner by selecting the on option
    • Closing period: Time period after closing the bar before displaying it for the second time



Design template


From the Design tab, you can select one of the ready-made design templates for the banner background image, set your own color of the default bar, and pick its background and text colors to match your store’s brand.

Moreover, you can adjust the height of the bar if you want to make it larger.

You can customize the colors of the following bar elements:

  • Background and text colors of the bar
  • Button background and text colors

For a more attractive look, you can also select the bar display position on your Shopify store page from the following options:

  • Top relative: The bar sits at the top of your site and fades into and out of view as the site page scrolls
  • Top fixed position: The bar is always displayed at the top of your site
  • Bottom relative: The bar sits at the bottom of your site and fades into and out of view as the site page scrolls
  • Bottom fixed position: The bar is always displayed at the bottom of your site


Tip: You can preview the Announcement Bar design template to see how it appears to your customers. Click Preview at the upper right.



Bar display


From the Display Rules settings tab, you can control the bar visibility based on a custom condition. Here, you can decide how and when to display the announcement notification in your Shopify store:

  • Select the visitor target device to display bar on: mobile and/or desktop
  • Restrict availability of your special shipping offer for some Shopify store pages
Display the bar onDo NOT display the bar on
All pages
Home page
Product page
Search results page
Cart page
Collections
Custom link (add any page link of your store)
Keywords (add any keyword from the store page URL)
Off
Home page
Product page
Search results page
Cart page
Collections
Custom link (add any page link of your store)
Keywords (add any keyword from the store page URL)
  • Select the display time option: permanent or custom


If you want to show the banner according to a particular schedule, follow these steps:

  1. Select the custom value in the Display time selector.
  2. Set up your schedule using the Start and end display time options for banner display.
  3. Optional: apply User timezone detection by user IP address or select a time zone for a specific plan from the drop-down list.



Targeting filters


If you want to restrict the display of the bar to your visitors in different countries, you can add locations where the banner can be displayed or exclude them based on the IP address of the visitor:

  • Location where the Announcement Bar is displayed
    1. Click Add new Location.
    2. Start entering a location and then select one of the options suggested.
  • Location where the Announcement Bar is not displayed
    1. Click Add new Location.
    2. Start entering a location and then select one of the options suggested.

If you want to remove the location, hit the delete icon. A dialog box will ask you to confirm the deletion.



Deleting a bar


If you want to delete a bar, click on the delete icon in the Actions column of the bar list. A dialog box will ask you to confirm the action by clicking Delete.



Managing bar visibility


You can enable the Announcement Bar by clicking the button at the upper right. The app will display a bar in your Online Store if it has an active status.