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 template if you want to customize it.
Note: In case you customize some options of a template (eg. upload a different background image) and now you want to come back to the original one, please click on another template and then click back to the template you like. All settings of the bar will be changed to the previous template (all customization will not be kept).
Type the message you want to deliver, you can use HTML in this field, but some tags are not supported (eg. <a>).
To quickly create a bar, you can use our message templates for suggestion.
To change font and color of text, please scroll down to Style & Color section.
You can choose to add link to a call-to-action button or make the entire bar clickable.
Recommend to enable the "Add X button to close the bar". After closing, the bar will not show up until users reload the current page or go to another page having the same bar. Click on close will be tracked and counted as "Close" metrics in Analytics.
To change font, style and color of button, please scroll down to Style & Color section.
If you want to add product images to the bar, enable "Show Product" button.
Then an option will show up to find and add products.
Recommend to turn on the "Enable link to each product". If enabled, when users click on a product image, it will direct to the related product page. If disabled, nothing happens when clicking on product images.
To change the size of product image, please scroll down to the Style & Color section and find the "Content height" option.
If you want to add countdown timer to the bar, enable "Show countdown" button.
Select the date you want to countdown to, then the timer will auto show how many days left from the current time to the selected date. Eg. If it set countdown to Jan 5th, then when visitors come to your store on Jan 1st, they will see there will be 4 days left.
Enable auto reset countdown:
If enabled, when the timer is out of time (reach 0:00:00:00), it will repeatedly reset to the "Repeated number of days" you set. Eg. First when you pick a date to countdown, there're 4 days left. If you set the "Repeated number of days" as "2", then after 4 days, the time will show 2 days left and repeated whenever it's out of time.
If disabled, when the timer is out of time, it stays 0:00:00:00 until you set it up again.
To change color and size of countdown timer, please scroll down to Style & Color section.
Style & Color
You can change the appearance of each content on bar here.
Background color: you can change the background color of any template
Button option (this option only appears if selecting "Add button to bar"): customize text color and background color
Background mode: choose the display mode of background image
Fit screen - cover: Image will cover 100% area of the bar and the rest portion will not be displayed. (Will cover the width & height – both; of the row. This means – some portion of the image can go off)
Original - contain: 100% Images will always be on the bar, doesn’t matter what’s the width of your screen / which device you are on. (The preference is to show 100% image – the remaining area of the bar may have white space)
Background repeat: in case the background image does not cover 100% area of the bar
Repeat: the image will be repeated horizontally and vertically (best for pattern background)
No repeat: the image will not be repeated, but aligned middle and will leave empty space in the rest portion
Height: choose the suitable height of the bar
Content height: adjust the height of product block and countdown block
Font family (apply for all text on message, button and countdown): we use Google Fonts library with 800+ Fonts. Find your best font on https://fonts.google.com/ and type the font name to find and select.
Countdown option (this option only appears if enabled "Show countdown"): customize countdown font size (font is based on Font family), background color and text color
Read detailed instructions of each option in this section here.