There are situations when you want to add a promo block to the top of the page, for example, free shipping offer, discount for Black Friday or other holidays, and you need to display it on the page quickly. 

This is easy to do with Magento 2 admin panel. First of all, we'd like to mention that adding and configuring HTML Block doesn't require any programming skills. Check out this short video in order to see how it actually works or follow the step-by-step instructions below.

 In order to add HTML block at the top of the page please go to Admin Panel > Content > Blocks and press the Add New Block button.

Magento 2 CMS Block Menu

Then  Enable the block, set its Title and unique Identifier. Choose what Store View will your block be enabled on.

Magento 2 Create New CMS Block

Afterward,  in WYSIWYG editor create a code you want to be inserted at the top of the page of your website and press the Save Block button.


<div style="padding: 14px; text-align: center; background: #d7244e; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Valentine's Day Sale. Get 15% OFF for <a style="color: #fff; text-decoration: underline;" href="">ALL Magento 2 extensions</a>. Use coupon code <span style="text-decoration: underline;">VALENTINE2019</span></div>

Magento 2 WYSIWYG editor

After that go to Admin Panel > Content > Widgets and press the Add New Widget button.

Magento 2 Content /> Widget Menu

Begin the configurations of the widget by setting its Type and Design Theme. Press the Continue button to move further.

Magento 2 CMS Block Widget

Next set the Title of the widget. It could be the same as the name of the block you've created. Choose the Storefront the widget will be displayed on. Enter the Sort Order.

Magento 2 Widget Configuration

In the Layout Updates section, you have to choose the exact place you want your block to be displayed on. Select All Pages to display it on all pages and choose Page Top as the blog container to position it on the top of the page.

Magento 2 Widget Layout Updates

Afterward, in Widget Options choose the CMS block widget will be displayed and press the Save and Continue Edit button.

Magento 2 CMS Block Widget Options

Once you've done this you have to clean the Magento 2 cache and check yours storefront.

Adding HTML Block At Magento 2 Page Top, HTML Blocks, Storefront