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 here.
Action after user click to Call To Action button
- None: the bar will continue to show up for repeated visitors
- Do not show the bar again: the bar will never show up again after users close or click "Call to action button" (not work if selecting "Make entire bar clickable").
Position of bar
- Top of the page pushes down the rest of page
- Top of the page pushes down the rest of page (always visible while scroll): same as above, but sticky bar is enabled
NOTE: If the bar still covers a part of your store, please contact us for help. - Top of the page covers part of the page
- Top of the page covers part of the page (always visible while scroll): same as above, but sticky bar is enabled
Warning: If your theme has a sticky header, it might conflict with sticky bar. In case Smart Bar breaks your sticky header, use the option without (always visible while scroll).
- Bottom of the page covers part of the page (always visible while scroll)
- Place smartbar shortcode to your theme: if you want to put smart bar on anywhere else, you can copy the shortcode <div id="qikify-smartbar"> and paste it in your theme's code (usually in Online store / Themes / Actions / Edit code / theme.liquid). Note: You should have some coding experience to do this.
Note: If you have placed a smartbar shortcode into your theme, then you change back to a default position (say, Top of the page pushes down the rest of page), you should remove the shortcode you pasted into your theme.
Display on page
Select pages to show the bar:
- All pages: show bar on all pages
- Homepage only: show bar on homepage only
- Only page with URL: only show bar on some specific pages (you can add multiple pages, separate with comma "," and don't forget the protocol "http://", "https://")
- Any page except the following pages: exclude bar on some specific page (you can add multiple pages, separate with comma "," 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/
The 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 products have the same part in url (eg. /product-A and /product-ABC), please remember to have a slash (/) in the end of your product link (eg. should paste url as myshopify.com/product-A/ to identify).
Visibility
Select devices to show the bar:
- Desktop: only show bar to visitors seeing your store on desktop
- Mobile: only show bar to visitors seeing your store on mobile
- Desktop and mobile: show bar on both desktop and mobile
To optimize responsiveness, you should create different bars for each device. For example: bar A (with message + 6 product images) shows on desktop only, while bar B (with message + 1 product image) shows on mobile only.
Country filter
You can use this option to show different bars for visitors coming from different countries, best use when you want to show multilingual messages for different customers.
*This feature is available for Premium user only.
- Show on all countries: by default, the bar will show to visitors from all countries
- Only show on following: select countries you want to show the bar to, can choose multiple countries
- Show on all countries except following: select countries you don't want to show the bar to, can choose multiple countries
Source filter
Use this option to show different bars for visitors coming from different sources such as your Facebook, Twitter, UTM campaign...
*This feature is available for Premium user only.
Please insert ref or UTM code only, not the entire link and not include question mark ("?"). You can add multiple source, separted by comma (",").
For example: insert "ref=facebook" to only show bar to visitors coming from the link https://yourstore.myshopify.com/?ref=facebook. Or insert "utm_campaign=newsletter" to only show bar to visitors coming from the link https://yourstore.com/?utm_campaign=newsletter.
Schedule display
Schedule your bar to always display or only display within the given period of time.
*This feature is available for Premium user only.
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.
Multiple Bars Switching
Set duration time and priority order to auto switch from a bar to another bar.
*This feature is available for Premium user only.
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 time, same devices, same countries...).
Note: Only bars with the matching configuration (visibility, display pages, country filter, source filter) can switch to each other.
Some example for matching configuration:
- 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.
- Bar A only shows on desktop, bar B only shows on mobile → these two bars cannot switch.
- Bar A shows on all countries, bar B only shows on US, bar C shows on all countries except US → visitors from US will see bar A switches to bar B, while visitors from other countries will see bar A switches to bar C.
For users in Free plan, if there are 2 (or more) bars with the same configuration, only the first created bar will show up (multiple bars switching is not available in Free plan).
Then, set duration time and priority order of each bar.
- Time display: 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: time display = 10 (s), priority order = 2Bar B: time display = 5 (s), priority order = 1Result: 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.
Related Articles
Style & Advanced settings
1. Style Step 2: Add & Design > Style All settings in this section apply globally to all menu items. Animation *Available in Premium plan only. There are 4 animations to appear submenu: fade in, shift up, flip in, zoom in. Note: select "none" if ...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 ...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 ...Reward Bar
Reward Bar is a feature in Extra Widget that would help merchants boost sales by encouraging customers to add more items to get a discount. But before create this Reward Bar, you will need to create a discount. Please click on this guideline to learn ...