How to Create Easy Notification Bars for Your Shopify/WooCommerce Website

Do you have a WooCommerce site? Then you must aware of the Notification bar. It’s helpful to attract your visitor to your woo-commerce site.

If you have no idea about the Notification bar / Announcement bar let see what is it.

What is the Notification / Announcement Bar:

The notification bar or announcement bar attracts your eCommerce site visitor to see whats offer is going on now on your website. One of the easiest ways to attract your visitor’s attention.

You can place the Notification / Announcement bar at the top or bottom of your site. And it’s not about only deals announcements and offers, you can set the Special promotions offers, Product launches, New products on your site, etc.

You can create via codes or there will be lots of plugins to do that. In this tutorial, I’ll recommend the OptinMonster plugin it’s easy to create notification/announcement bars and more. You can set up easily and timing saving compares than any other WordPress plugin.

In this tutorial ill show how to create easy notification bars for Your Shopify/WooCommerce website.

How to Create Easy Notification Bars for Your Shopify/WooCommerce Website

To create an easy Notification bar for your woo-commerce and Shopify site you need an OptinMonster account.

Then let’s integrate OptinMonster into your WordPress site, later we will see that.

Now let’s see about create a Notification bar in OptinMonster.

First, need to create your OptinMonster account then login.

After that create a campaign for your WooCommerce/Shopify announcement notification bar. Then click the “Floating Bar”.

Now you can see the lots of templates to create a notification bar for your campaign. Don’t worry about the templates sizes it already optimized for desktop, tablets, and mobile devices.

Then select the “Alert” templates it will use for many other cases.

After that, you have to name for your campaign and connect with your WooCommerce/Shopify, and click the “Start Building” button.

All set to customize your campaign.

Customize your notification bar, just click your campaign which one you want to edit. It will pop the editing tool. And you can change your text in the notification bar.

We can choose the background color based on your product or brand.

And you can set custom URL in the announcement button action.

If need to change another you can change whatever you want in your campaign. By default, your notification bar will be placed on the bottom of your website. We can place the top based on our interests.

For that, Go to the Home menu and click “Floating Settings”.

Then activate the load floating bar at top of the page.

Enable Option Buttons

After complete the steps now you can make an announcement. For that don’t need an email field for that. We can change into the Yes/No button.

Click the toggle to enable Yes/No button it will show the two buttons on your announcement.

Once you created the Yes/No button, Now scroll down to the No button and disable it. If you remove the No button it will take your visitor on your targeted page.

Then rename the Yes button text in the “Shop Now” button.

Once you set the “Shop Now” button on your announcement select the yes action. Change the Redirect URL which one you want to show your sale products.

And you can also change the font color and button colors of the “Shop Now” button in the Yes button section.

After the complete above the steps. Now go to Display rules by default the “After “X” second” display rule is enabled. Ensure that your announcement will show after some time while your visitor surfs your site.

Or else we can set your Notification/Announcement bar permanent for you don’t miss any visitor see your announcement set the seconds in to “0”. Now your all visitors can see your Announcements.

Want to make your announcement to the specific pages? Just follow the steps. We can choose your WooCommerce/Shopify announcement bar on which page you want on your site.

Now change the second condition of your display rules in the default settings. Don’t need to change the current URL path, in the next field dropdown will show select the “Exactly matches”.

If you are adding into the WooCommerece/Shopify store its looks like this one. We have to add using the WooCommerce store. The same step in the Shopify store also.

Now add the custom URL which one wants your WooCommerce announcement bar to appear.

We can add more page, just click the “+And” button to create a new rule.

Once you finished the above the steps just save and publish. That’s all you created your Notification bar for WooCommerce/Shopify website.

Now let’s see how to connect it to your WooCommerce or Shopify website.

Adding your Announcement/Notification bar to your WooCommerce Store

WooCommerce is a popular WordPress eCommerce plugin that can easily sync with OptinMonster. In your WordPress dashboard, go to the OptinMonster plugin on the left side menu.

Go to the OptinMonster dashboard and click on the WooCommerce tab.

Now you can see the two types of key Consumer Key and Consumer Secret key. You can get this manually form your WooCommerce account and click the Auto Generate keys.

Autogenerate keys will automatically be filled. Now you’re connected with your WooCommerce store. Once it’s done you’ll get the confirmation.

Now you can manage your campaigns from your WordPress dashboard through the OptinMonster plugin.

Adding your Announcement/Notification bar to your Shopify Store

Now let’s see about Adding your Announcement/Notification bar to your Shopify Store. First, you need to log in your Shopify account.

And also login OptinMonster account simultaneously. Visit the OptinMonster app in the Shopify store find and click “add app”.

Now you’re redirected to another page and click the install app button.

Once you completed this process, your Shopify store will automatically connect with OptinMonster. And you have integrated your Shopify account with OptinMonster.

Now you can create the campaigns and publish your Notification/Announcement bar on your eCommerce site.

That all now you know how to create easy notification bars for your WooCommerce/Shopify website with OptinMonster.

Get Started With OptinMonster

You could see the plans and pricing of OptinMonster from below!

Get Started With OptinMonster.

We hope you found this post helpful and enjoyed the read. If you did, please consider sharing this post with your friends and fellow bloggers.