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 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).
Message
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.
Button
- 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.
Product
- 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.
Countdown
- 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
Advanced
Read detailed instructions of each option in this section here.
Related Articles
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 ...Advanced option for a bar
Re-order Elements You can drag and drop blocks to change the position of each element on bar here The element only shows up to re-order if the related content is enabled. Eg. "Show Product" option is enabled then the "Products" block will appear ...How to optimize responsiveness of a Smart Bar
A Smart Bar might not display well on mobile or other small screens because the content is too long. To achieve the best responsiveness, you should create different bars for each device with optimized content. Please watch our tutorial video here to ...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 on your preferred goal. 1. Announcement bar Show messages and call-to-action button to customers. This bar includes ...