{"id":1445,"date":"2020-12-09T10:03:55","date_gmt":"2020-12-09T10:03:55","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-custom-notice-to-top-of-page-in-magento-2\/"},"modified":"2025-07-24T15:34:42","modified_gmt":"2025-07-24T10:04:42","slug":"add-custom-notice-to-top-of-page-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-notice-to-top-of-page-in-magento-2\/","title":{"rendered":"How to Add Custom Notice to the Top of Page in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Online store owners implement various tactics to grab visitors attention to offers, new launches, discounts etc. to increase sales.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, this shouldn\u2019t be at the cost of onsite user experience where popups hinder the display of products or annoy the user while browsing the store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The alternate way is to display a notification bar at the top of the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A&nbsp;<em><strong>custom notice to the top of page in Magento 2<\/strong><\/em>&nbsp;can be used in place of popup or sending Emails that may end up in spam!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The default&nbsp;Magento 2&nbsp;allows the merchants to add a custom notice bar to the top of the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Notice on the top of the page helps for promoting new offers, new products, changes in service, anniversary deals and so on.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, it does not affect the user experience adversely and at the same time help with increasing the sales in Magento 2 store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Add Custom Notice to the Top of Page in Magento 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Login<\/strong>&nbsp;to Magento 2 admin panel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Navigate to&nbsp;<strong>Content &gt; Block<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Click on&nbsp;<strong>Add New Block<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot-at-November-23rd-2020-10.58.31-am-1024x425.png\" alt=\"Add Custom Notice to Top of the Page in Magento 2\" class=\"wp-image-11794\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Enter the&nbsp;<strong>Block Title<\/strong><\/li>\n\n\n\n<li>Enter<strong>&nbsp;Identifier<\/strong><\/li>\n\n\n\n<li>Select the&nbsp;<strong>Store View&nbsp;<\/strong>based on your business requirement<\/li>\n\n\n\n<li>Copy the below code to display a custom notice. Feel free to edit the code based on your requirement.<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"main\">\n    &lt;div class=\"customnotice\" style=\"text-align: center; background: pink; padding: 10px;\">Add Items to your cart to\n        activate your special offer of Pink friday Sale!!! &lt;a class=\"discount\"\n                                                              style=\"border: 1px solid black; cursor: pointer; background: aqua; padding: 8px; font-weight: bold;\"\n                                                              href=\"#\">Sale&lt;\/a>&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click&nbsp;<strong>Save<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">4. Now, navigate to&nbsp;<strong>Content &gt; Widgets&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Click&nbsp;<strong>Add Widgets<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot-at-November-23rd-2020-1.44.29-pm-1024x390.png\" alt=\"Add Custom Notice to Top of the Page in Magento 2\" class=\"wp-image-11797\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select&nbsp;<strong>CMS Static Block<\/strong>&nbsp;in&nbsp;<strong>Type<\/strong><\/li>\n\n\n\n<li>Select&nbsp;<strong>Design Theme<\/strong>&nbsp;based on your business requirement<\/li>\n\n\n\n<li>Click&nbsp;<strong>Continue<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">6. Set&nbsp;<strong>Storefront Properties<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot-at-November-23rd-2020-10.58.20-am-1024x538.png\" alt=\"Add Custom Notice to Top of the Page in Magento 2\" class=\"wp-image-11798\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enter&nbsp;<strong>Widget Title&nbsp;<\/strong><\/li>\n\n\n\n<li>Select in which stores you want to display this widget in<strong>&nbsp;Assign to Store Views<\/strong><\/li>\n\n\n\n<li>Set&nbsp;<strong>Sort Order<\/strong><\/li>\n\n\n\n<li>In the<strong>&nbsp;Layout Updates<\/strong>, select&nbsp;<strong>All Pages<\/strong><\/li>\n\n\n\n<li>Select&nbsp;<strong>Page Top<\/strong>&nbsp;in&nbsp;<strong>Container<\/strong>&nbsp;dropdown option<\/li>\n\n\n\n<li>Click&nbsp;<strong>Save<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">7. <strong>Now, set&nbsp;<strong>Widget Options<\/strong><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/11\/Screenshot-at-November-23rd-2020-12.43.16-pm-1-1024x415.png\" alt=\"Add Custom Notice to Top of the Page in Magento 2\" class=\"wp-image-11799\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the&nbsp;<strong>Block<\/strong>&nbsp;which you created<\/li>\n\n\n\n<li>Click&nbsp;<strong>Save<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">8. That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The custom notice to the top of the page is now displayed as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/12\/Custom-Notice-at-the-top-of-the-page-in-Magento-2-1024x347.png\" alt=\"Custom Notice at the top of the page in Magento 2\" class=\"wp-image-11873\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you do not wish to write code in CMS static block, you can simply&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/call-phtml-file-in-cms-static-block-in-magento-2\/\">call phtml file in CMS static block in Magento 2<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, if you want to implement the similar solution for Magento 1, Meetanshi offers&nbsp;<a href=\"https:\/\/meetanshi.com\/magento-notification-bar.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento Notification Bar<\/a>&nbsp;extension that enables custom notification bar to notify visitors about your new releases, offers, messages, news etc. in the most effective way.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, read this tutorial on how to&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/set-page-title-in-magento-2-using-controller-xml\/\" target=\"_blank\" rel=\"noreferrer noopener\">set page title in Magento 2 using controller and XML<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do share this post with Magento Community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Online store owners implement various tactics to grab visitors attention to offers, new launches, discounts etc. to increase sales. However, this shouldn\u2019t be at the&#8230;<\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1445","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1445"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1445\/revisions"}],"predecessor-version":[{"id":14584,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1445\/revisions\/14584"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}