How to add banner in Magento 2

A Detailed Guideline on How to Add Banner in Magento 2

by Quang Anh Le


Engaging banners on online stores look like colorful disco balls that attract customers’ attention and ultimately boost conversions. If you own a Magento store, creating attractive banners is surely high on the to-do list.

However, mastering how to add banner in Magento 2 could be as challenging as solving a complex coding chaos. Don’t worry! We’ve got your back with a step-by-step guide to add banners to Magento 2 with ease.

So, let’s roll up your sleeves and do the job!

Step-by-step guideline: How to Add Banner in Magento 2

Unfortunately, the default function of Magento 2 doesn’t let you create promo banners. Yet, that doesn’t mean you’re stuck. You can still find out how to add banner in Magento 2 through three following ways:

Add Banner to Magento 2 via CMS Page

You can add banners directly to your Magento CMS pages. But before moving, you need to prepare your well-crafted banner image ready to go.

Step 1: Head to the Admin Panel, click on Content > Elements > Pages, and select the page where you want your banner to show up. You can pick an existing page or create a new one.

How to add banners in Magento 2 via the CMS page

Insert banners to Magento 2 via the CMS page

Step 2: Use the Image Insert tool to insert your banner. Directly paste the HTML code for your banner into the HTML view and press Save. Remember to preview to ensure that the banner is displayed properly.

Enter the HTML code for your bannerEnter the HTML code for your banner and voila!

Seems easy, doesn’t it? However, with this way alone, you won’t have all the control to customize and manage the banner.

No more worry! The two alternative methods below can truly help. They will use CMS blocks, widgets, and specialized extensions for Magento 2 to give you more control over the banner display and offer extra features.

Add Banner in Magento 2 via Blocks and Widgets

Blocks and Widgets are at the heart of Magento’s layout design. Blocks act as mini-pages where you can put content such as text, or images. Widgets, on the other hand, determine the placement of these Blocks on your site.

Adding banners using these two features is an effective way to showcase and manage banners without the need for complex coding.

So how how to add banner in Magento 2 through Blocks and Widgets? To begin, let’s create a CMS block first!
Step 1: Go to Content > Elements > Blocks and click Add New Block.

Add a new block in Magento 2

Add a new block in Magento 2

Step 2: Fill in the necessary information for the new block such as Block Title, and Identifier, and select the Store Views where it should appear.

Add details to the new block in Magento 2 dashboard

Add details to the new block for easy management

Step 3: In the content field, you can add the HTML or any content needed for your banner. Alternatively, you can also use the Image Insert tool to upload your banner.

Upload the image in Magento 2 dashboard

Upload the image for your banner

Step 4: Save the CMS block and move to the next part.

Once the banner is created using the CMS block, proceed with the following steps to display it via a widget:

Step 5: Go to Content > Elements > Widgets and press Add Widget.

Add a new widget in Magento 2

Add a new widget in Magento

Step 6: In the widget configuration settings, select the type of widget to create (e.g., CMS Static Block or CMS Page) and define the Layout Updates to specify where you want the banner to appear on your site.

Add Layout Update

Add Layout Update

Step 7: In the Widgets Options section, choose the CMS block you’ve created above to assign to this widget and configure any additional options if needed.

Select the block you have created for your banner

Select the block you’ve created for your banner

Step 8: Save the widget and voila! The top banner will now be visible on the front of the site.

Add Banner in Magento 2 Using BSS Commerce’s Extensions

Simply adding basic banners through the two methods above can limit their effectiveness in terms of display time, visual appeal, and audience targeting.

Besides the above two ways, why don’t you look for more advanced methods like how to add banner in Magento 2 Home page or set display rules to unlock the full potential of your Magento 2 store and drive conversion? All wrapped up in BSS Commerce’s Extensions.

These extensions will help you kick things up a notch with extra features that are more optimal than using CMS Page or Widgets. With them, users can easily create and display unique banner templates across different parts of the page, boosting sales conversion rates.

Magento 2 Promotion Bar Extension

This extension lets you target promotion banners to specific customer groups, store views, and timeframes, just like CMS Display Rules. But it goes further by helping you design eye-catching banners that match the style of your store.
Here’s way how to add banner in Magento 2 with the Promotion Bar Extension:

Step 1: Navigate to Marketing > BSSCommerce > Promotion Bar > Manage Promotion Bar > Create New Promotion Bar. This will take you to three main sections: General, Display Rule, and Content and Design.

create new promotion bar with BSS Commerce extension

Create new banners with BSS Commerce’s Magento 2 Promotion Bar Extension

Step 2: In the General section, set up Store Views, Dates, and Customer Groups to specify where, when, and for whom the new promotion banner should be displayed.

Complete the general information for your banner

Complete general information for your banner

Step 3: Move to the Display Rule section to configure settings such as positions, exclusion of categories and products, auto close time, and multiple display options for your banner.

Configure display rules on Magento 2 promotion bar extension

Configure display rules on Magento 2 Promotion Bar Extension

Step 4: In the Content and Design section, use the WYSIWYG (What You See Is What You Get) editor to edit the message, background colors, fonts, and other elements to make your banners stand out.

WYSIWYG editor on Magento 2 promotion bar extension

WYSIWYG editor on Magento 2 Promotion Bar Extension

Step 5: Click the Save Promotion Bar button to save all your configurations and you’ve done!

Save the promotion bar

Save the promo bar once you finish the configurations

[Bonus] Magento 2 Product Widget Slider Extension

Instead of just finding ways how to add banner in Magento 2, why not spice basic banners up with product lists?

With the Magento 2 Product Widget Slider Extension, you can effortlessly create specialized product lists for your promotional banners. It will help you add the promo product list to your HTML-, cms-block- or image-based banners.

BSS Commerce's product widget slider extension

Make your banner stand out via Magento 2 Product Widget Slider Extension

Featuring specific products in your banners can highlight promotions, new arrivals, or best-selling items, grabbing customers’ attention and luring them into exploring more.

This way, customers will see all the promoted goodies in one place, increasing the chances they’ll fill up their carts and shop til they drop!

The Benefits of Adding Banner in Magento 2

Alright! You’ve known how to add banner in Magento 2. But how exactly can they help you? Here are some main advantages of adding banners on Magento:

Boosting sales

Banners are a great tool for driving traffic to your website, just like a doorway to attract new customers. A study shows that customers exposed to banner advertising tend to spend more than those who are not.
First of all, they give customers a glance at what you are selling and guide them toward hot items and special offers.
Furthermore, by showing banners to certain customer groups using the mentioned extensions, it becomes easier for customers to find what they want. This increases the click-through rate and turns visits into purchases.

Enhance the visual appeal of your store

Designing an eye-catching banner can spice up your store’s overall appearance.

It can draw people in with its vibrant colors and catchy graphics. Plus, they can also encourage visitors to discover your latest deals or featured products.

With the right mix of visuals and text, you can create an inviting atmosphere that just begs to be explored further.

A banner is an excellent way to make your entire store look more attractive

Maximize customers engagement

Imagine your website as a vibrant playground where customers can’t help but get lost in the excitement.

Interactive or animated banners add that extra thrill, drawing them in with dynamic features like slideshows, carousels, or video content. They motivate customers to take action, raise curiosity, and enhance the shopping experience.

Raising brand awareness

Banners are like your brand’s cheerleaders. They can share your brand stories, show your logo, and keep a consistent message across your store. This helps people recognize your brand more easily and builds trust with customers.

Provide analytical insights

Marketing thrives on measurable outcomes. Many Magento 2 banner extensions offer analytics tools to gauge your effectiveness. You can monitor impressions, clicks, and conversions tied to each banner.

With the data collected, you can assess which banners are working to optimize your strategy and improve performance over time.

Offer affordable marketing solutions

Banners are not only attention-grabbing but also cost-effective, right? According to Statista, banner ads cost less than search or video ads.

And the best part? They’re easy to keep up for any sale season and share on different websites and social media. Therefore, you can save a ton of time or money.


Let’s wrap things up! Mastering how to add banner in Magento 2 will make your online store pop, boost brand recognition, and drive sales. Through CMS pages or cool extensions like BSS Commerce’s Promotion Bar, you can create a hard-to-resist shopping experience like a pro.

However, if you find building or customizing your entire Magento store overwhelming, just reach out to BSS Commerce’s Magento 2 Development Service!

We’re here to transform your store into a stunning and highly effective Magento store that grabs attention and boosts sales growth.

Next Reading Suggestions

© 2019 BSS Commerce owned by THANH CONG INTER ., JSC. All Rights Reserved.
Business registration certificate no. 0106064469 issued by Hanoi Department of Planning and Investment on 19 December 2019.
Legal Representative: Mr. Nguyen Quang Trung.