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.

Example:

<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="https://magefan.com/magento2-extensions">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 webpconverted /></picture> 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 block container to position it at the top of the page.

Magento 2 Widget Layout Updates

<afterward, in <strong="">Widget Options choose the CMS block to be displayed with the widget and press the Save and Continue Edit button.</afterward,>

Magento 2 CMS Block Widget Options

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

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

There are plenty of special offers and discounts you can display to your Magento 2 store customers using CMS blocks and pages. Besides, Magento allows you to display them practically in any place on your website. However the important thing is that in order for that block to perform its functions you need to target different groups of customers with different kinds of offers.

Magento 2 CMS Display Rule extension allows you to define what customer group, date, day of the week and even the exact time to display the attractive CMS blocks or pages. The CMS blocks and pages display is also defined by conditions based on product and shopping cart attributes. So, even if you decide to display the CMS block to the general group of customers, from Monday through Friday, from 6 a.m. to 10 p.m. they won't see it if they don't fall into those conditions.

Magento 2 CMS Display Rule module makes your CMS blocks and pages management more productive allowing you to display plenty of CMS blocks and don't worry about enabling and disabling them since the extension does it for you.