How To Add Custom Notice To Page Top In Magento 2

Preferential campaigns, advertisements and notices of the shop owners are regularly applied. Maybe one of them is not known. This can be overcome with the post How To Add Custom Notice To Page Top In Magento 2.

Having a notice at the top of the page won’t be offensive to your customers and it stands out. You can customize it according to the theme of the campaign you run. This is one of the best ways to let customers know about your campaign.

Notice on the top helps to advertise new products, offers discounts, shipping deals, etc. This Notice is both friendly and the best way for you to implement effective campaigns to increase sales for your store.

Steps To Add Custom Notice To Page Top In Magento 2

Step 1: Login to Admin Panel.

Step 2: Choose CONTENT -> Elements -> Blocks.

Step 3: Click Add New Block button.

Step 4: Fill in information to add new block.

• Enter the Block Title.

• Enter Identifier.

• Select the Store View where you want it to be displayed.

• Click Show / Hide Editor button and copy the below code to it. You can also customize your own notice.

<div class="main">
	<div class="hpny_notice" style="text-align: center; background: #fc5b8d; padding: 10px;">
		<a style="color: white;">Happy New Year! Sale off 20% all our products with discount code: HPNY21</a>
	</div>
</div>

Step 5: Click Save button.

Step 6: To add a block to page top, first, choose CONTENT -> Elements -> Widgets on the left menu.

Step 7: Click Add Widget button.

Step 8: Set Widget Settings.

• Set CMS Static Block for Type.

• Select Design Theme which store you are using.

• Click Continue button.

Step 9: Set Storefront Properties.

• Enter Widget Title.

• Select stores which you want to display this widget in Assign to Store Views.

• Enter Sort Order.

• In the Layout Updates, click Add Layout Update button.

• Set Display on All Pages.

• Set Page Top in dropdown of Container.

Step 10: Set Widget Options.

• Click Select Block… button.

• Select Block which you created.

Step 11: When complete, click Save button.

Let’s see the result:

You can read more useful articles like How To Configure Quote Lifetime In Magento 2.

Follow us for the more helpful posts!

We hope this is a useful post for you.

Thank you for reading!