How to Add Custom Notice to the Top of Page in Magento 2

Online store owners implement various tactics to grab visitors attention to offers, new launches, discounts etc. to increase sales.

However, this shouldn’t be at the cost of onsite user experience where popups hinder the display of products or annoy the user while browsing the store.

The alternate way is to display a notification bar at the top of the page.

A custom notice to the top of page in Magento 2 can be used in place of popup or sending Emails that may end up in spam!

The default Magento 2 allows the merchants to add a custom notice bar to the top of the page.

Notice on the top of the page helps for promoting new offers, new products, changes in service, anniversary deals and so on.

Also, it does not affect the user experience adversely and at the same time help with increasing the sales in Magento 2 store.

Steps to Add Custom Notice to the Top of Page in Magento 2

1. Login to Magento 2 admin panel.
2. Navigate to Content > Block
3. Click on Add New Block
   1. Enter the Block Title
   2. Enter Identifier
   3. Select the Store View based on your business requirement
   4. Copy the below code to display a custom notice. Feel free to edit the code based on your requirement.
      
      <div class="main"> <div class="customnotice" style="text-align: center; background: pink; padding: 10px;">Add Items to your cart to activate your special offer of Pink friday Sale!!! <a class="discount" style="border: 1px solid black; cursor: pointer; background: aqua; padding: 8px; font-weight: bold;" href="#">Sale</a></div> </div>

      1 2 3 4 5 6

      <div class="main">     <div class="customnotice" style="text-align: center; background: pink; padding: 10px;">Add Items to your cart to         activate your special offer of Pink friday Sale!!! <a class="discount"                                                               style="border: 1px solid black; cursor: pointer; background: aqua; padding: 8px; font-weight: bold;"                                                               href="#">Sale</a></div> </div>

   5. Click Save
4. Now, navigate to Content > Widgets 
5. Click Add Widgets
   1. Select CMS Static Block in Type
   2. Select Design Theme based on your business requirement
   3. Click Continue
6. Set Storefront Properties
   1. Enter Widget Title 
   2. Select in which stores you want to display this widget in Assign to Store Views
   3. Set Sort Order
   4. In the Layout Updates, select All Pages
   5. Select Page Top in Container dropdown option
   6. Click Save
7. Now, set Widget Options
   1. Select the Block which you created
   2. Click Save
8. That’s it.

 

The custom notice to the top of the page is now displayed as shown below:

If you do not wish to write code in CMS static block, you can simply call phtml file in CMS static block in Magento 2.

Also, if you want to implement the similar solution for Magento 1, Meetanshi offers Magento Notification Bar extension that enables custom notification bar to notify visitors about your new releases, offers, messages, news etc. in the most effective way.

If you need more help regarding this post, feel free to ask in the Comments section below.

I would be happy to solve your queries. Also, read this tutorial on how to set page title in Magento 2 using controller and XML.

Do share this post with Magento Community via social media.

Thank you.