How to optimize responsiveness of a Smart Bar

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 know how:



For example: You have a bar with Message + Button + 6 Product images, configure it to show on desktop only.
Duplicate this bar and edit the duplicated bar to only have Message + 4 Product images (customize the size of each if necessary) and configure it to show on mobile only.


Message + Button + 6 Product images on Desktop only


Message (with smaller font size) + 4 Product images on Mobile only

    • Related Articles

    • 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 ...

    • 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 ...

    • Frequently Asked Questions for Smart Bar

      Is the Free plan really free? Yes, it is 100% free and forever free to use. We won't even ask for a credit card. By default, when you install Smart Bar, you will be in Free plan. You only get charged once you upgrade to Premium plan. What is the ...

    • 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 ...

    • How to Install Smart Bar to your Store

      Smart Bar can be easily installed via Shopify App Market Go to our app’s link: https://apps.shopify.com/smart-bar Click “Add app” button (you might be asked to login if you have not logged in to your Shopify account yet) You’ll be directed to your ...