In this post will cover how to add a top banner in your Magento website only with backend configuration (no code needed).
For accomplish this task we will use the feature Widgets.
As first step we’ll create a cms block that will be in charge of having the desire content we want to show on the top banner:
Step 1: Go to Content -> Elements -> Blocks
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_1-1024x975.png)
Step 2: Click on “Add New Block”
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_2-1024x361.png)
Step 3: Fill out the next fields
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_3-1024x444.png)
In this case we are using the text “Rapicart Top Banner” with red background color. Click on “Save” button in order to save changes.
Step 4: Now Go to Content -> Elements -> Widgets
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_4-1024x941.png)
Step 5: Click on “Add Widget”
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_5-1024x353.png)
Step 6: Fill out the next fields
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_6-1024x365.png)
Type needs to be “CMS Static Block” and you need to select your current theme on the “Design Theme”. Click on “Continue”.
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_7-1024x537.png)
Then click on “Add Layout Update” button and select “Display on All Pages” and “Container Page Top“.
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_10-1024x607.png)
After filling out the fields go to “Widget Options” and click on “Select Block…”:
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_8-1024x340.png)
Step 7: Select the Cms Block you created on step 3
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_9-1024x226.png)
Click on “Save” and that’s it. Clear cache and now you will see the top banner on the frontend site.
![](https://www.rapicart.com/wp-content/uploads/2020/12/magento_top_banner_11-1024x321.png)
For any questions about how to setup your Magento site or for customisations, feel free to contact us and we’ll be happy to assist you.