{"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 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 [&hellip;]<\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1445","post","type-post","status-publish","format-standard","hentry","category-magento"],"_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}]}}