SmartBar - Promote Products and Sales. Increase Social Following. Communicate Important Messages

We’re very excited for the release of SmartBar. SmartBar is an extension that lets you create and add a banner at the top and/or bottom of your website.

First Impressions

The first things you notice with the SmartBar is its simplicity and seamless integration into the website. The power of the module comes from the fact that you can position in in the above the header content which is the first thing that a customer sees when they land on your site.

You can show it on every page of your website, and fit it in the top (above the header) or bottom  (above the footer) of the page. Let’s see an example to explore how SmartBar works.

SmartBar is flexible enough to be integrated into any design and 99% of OpenCart themes. It’s tuned to work perfectly on both desktop and mobile devices.

Less Aggressive than Popups

A tool like that is perfect for notifying visitors about important notifications, updates, discounts, promotions, etc. This means it’s a good alternative for store owners who prefer a less interruptive method than popups (not that we’re bashing popups, they actually work really well).

Let’s get into the features.

Unlimited Bars, Any Page

SmartBar allows you to create an infinite number of bars (they will appear as separate modules). Once you create a new module and assign it to the layout you want, it will appear under the SmartBar in the Modules List inside your admin panel.

Using the layouts in Design > Layouts, you can assign SmartBar to appear in any of the pages in your website. This means you can create an individual module that will be relevant to the different pages in your store. You will learn more about that in the examples we will show you later in the post.

Top and Bottom of the Page

You can assign SmartBar to go to the top of your page or to the bottom. This way, you can give users different types of information at the top and bottom of your website.

Another thing you can do is to assign the same module to the top and bottom to the page. This way, you will follow up with the same information to make sure that visitors don’t miss it.

Show Effect

Choose how to introduce SmartBar to your store visitors. You can set two introductory animations - slide down or fade in. This way, SmartBar draws more attention to the message you want to show.

If you prefer not to add any effects, just leave this setting at Appear.

Default Content Width for Desktop

This option works on desktop only.

Most websites today utilize less than the full width of the browser and the content is centered, with some extra width remaining on the sides. This option allows you to configure the width of the content in the SmartBar so it doesn’t spill out of the website borders into the unused width.

Change Text and Background Color

You can choose the colors of both the text and background of the module with two separate color pickers. They allow you complete color freedom. You can use the real color name or enter the color RGBA and hex.

Here is how to get the HEX or RGBA color value: http://www.color-hex.com

Rich Text Editor

This is where the important stuff happens. Use the rich text editor to configure your message and style it with the formatting options. You can improve the effect of SmartBar by using images, icons or creating a button. Visuals are always easier to comprehend and will aid you in conveying the message you want to more viewers, faster.

CSS Customization

If you have some CSS knowledge, you can add your custom code to modify SmartBar and turn it into anything you want.

Start and End Dates

Want to add a little sense of urgency for your customers and bump up the sales? You can do that by setting the exact date for SmartBar to appear and disappear from your website.

Putting SmartBar to the Test

Explaining how the module works is one thing. We want to show you what it does.

We have prepared five examples of different promotional and informational messages that appear on the most relevant pages. You will see both their desktop and mobile versions.

Example #1 - Set a Promotion

Set a discount at a certain page and give the discount code for customers to use.

Example #2 - Improve Customer Support

If customers are viewing your About page, they want to learn something. Use SmartBar to give them your contact details in a more visible way.

Example #3 - Increase Social Media Following

Why not get social with SmartBar? Let your customers know where to find you on social media.

Example #4 - Specific Product Promo with a Buy Now Button

Customers that are looking for a specific brand are more likely to purchase a product if you give them a better offer than your competitors.

Example #5 - Offer Free Shipping

It’s awesome to find out that you can get free shipping when you want to sign up in an online store.

Summary

So, what do you think of the SmartBar? Do you think it can help you with turning your traffic into customers? Do you think it can improve the user experience in your store by sharing valuable information? Let us know in the comments below. Every comment is answered by our team. Have fun with SmartBar!