Promotion Bar

Promotion Bar

A. Goals 

We offer 3 types of promotion bar tailored specially for your goals.
You can customize each type of promotion bar by clicking in your preferred goal.

1. Announcement

Show messages and call-to-action button to customers. This bar includes a short text and call-to-action button.

  1. Message: Customize bar's content
  2. Bar clickable/action
    1. Make entire bar clickable 
    2. Add button to bar 
    3. No clickable

2. Countdown

Create urgency to customers with a countdown timer. This bar includes a short text, call-to-action button and countdown timer.

  1. Message: Customize bar's content
  2. Bar clickable/action
    1. Make entire bar clickable 
    2. Add button to bar 
    3. No clickable
  1. Countdown to: Pick ending time for countdown timer (in your local time)


3. Collect emails

Collect email address and grow subscribers list. This bar includes a short text and an email input field.

  1. Message: Customize the bar's content
  2. Field label: Change placeholder of input field

  1. Message after submit successfully: show up on bar after customer subscribed successfully (cannot preview in app)

Choosing a goal will apply its default message, so your message will be overwritten if you switch goal.




B. Style


Template

We have 14 templates for various usage and themes.



Styling 

If you prefer manual styling, you can easily customize your bar in this section 
  1. Background color 
  2. Message color
  3. Bar height (in pixel) 
  4. Font family
  5. Font variant 
  6. Font size 

Button 

Pick a color for a call to action button 
  1. Background color 
  2. Label color (for Collect emails bar only)

Countdown

This section is only for Countdown bar. 

  1. Background color 
  2. Number color 


C. Advanced Settings 


Display on page

Select pages to show your bar
  1. All papes: show bar on every page 
  2. Homepage only: show bar on homepage only 
  3. Exactly URL: paste the full and exact page URLs where to display your bar
  4. Only pages with URL: only show bar on some specific pages (you can add multiple pages, separate with "enter" and don't forget the protocol "http://", "https://")
  5. Any pages except the following: exclude bar on some specific page (you can add multiple pages, separate with "enter" and don't forget the protocol "http://", "https://")
Note:
For the "Only page with URL" and "Any page except the following pages" option, they will recognize any URL containing the link you add.
For example: in the "Only page with URL" field, you paste a product's link: myshopify.com/product-A/ 
Promotion bar will show on all links starting with myshopify.com/product-A/, eg. /product-A/?ref=..., /product-A/utm=...

To avoid the case that some pages have the same part in URL (eg. /product-A and /product-ABC), you can resort to Exactly URL.


Schedule display

Schedule your bar to always display or only display within the following period of time.



 
The date and time you choose is based on your local time.

Note: The ending date cannot set before the beginning date; vice versa, the beginning date cannot set after the ending date.

For example: if your ending date is April 4th, you cannot select April 5th as the beginning date.

In this case, you need to pick the ending date as April 6th to be able to pick the beginning on April 5th.


Switching between bars

Set duration time and priority order to auto-switch from a bar to another bar.

To make 2 (or more) bars auto switch to each other, first you need to create 2 (or more) bars with matching configuration (showing in same pages, at the same schedule, same devices).

Note: Only bars with the matching configuration can switch to each other.

Some example for matching configuration:
  1. Bar A shows on all pages, bar B shows on homepage only → when on Homepage, 2 bars will switch to each other; but on other pages, only bar A shows up.
  2. Bar A only shows on desktop, bar B only shows on mobile → these two bars cannot switch
Then, set duration time and priority order of each bar.

  • Display duration: define how long the bar displays

  • Priority order: define in which order this bar displays (1 is the highest priority = show first, 2 = show second,...)


Example:
Bar A: display duration= 10 (s), priority order = 2
Bar B: display duration = 5 (s), priority order = 1
Result: Bar B shows up first (priority = 1), after 5 seconds, bar B will disappear and switch to bar A (priority = 2). After 10 seconds, bar A will disappear and switch to bar B; continuously switching like that.

Position of bar

  • Top of the page, pushes down page


  • Top of page, covers part of page



  • Bottom of the page


Enable sticky function 

Help promotion bar visible while scroll

Show close button 

If a promotion bar is closed, it won't appear in an hour. 





    • Related Articles

    • How to uninstall Smart Bar completely

      When installing, Smart Bar adds a script directly to your published theme to make it load faster. When uninstalling on the Apps page, that script still remains in your theme. Follow these steps to uninstall Smart Bar completely: Step 1. Uninstall in ...
    • Create/Edit a bar

      Templates There are 10 available templates to choose for your bar. Templates having a star () are available in Premium plan only. A template includes: background image, color, font, size of message, button, countdown. You can change any setting of a ...
    • Why is my bar not showing up?

      There are various reasons why the bar is not showing up on a store.  Please read these cases and check the following solutions. The bar is not activated By default, when you successfully create a bar, it is deactivated. (only the first created bar is ...
    • What's in Dashboard of Smart Bar

      This is the first page you see whenever you access to Smart Bar, so you can consider it as a homepage of this app. Here you can: Create a new bar See the overview tracking of total views and clicks on all bars See the list of all created bars Below ...
    • Sticky Bar

      Enable on desktop: allow your sticky bar to appear on desktop version  Enable on mobile: allow your sticky bar to appear on mobile version  "Enable on mobile"  works on screen width that is below 992 pixels SETTINGS Position on desktop/mobile  Set ...