The most informative guide to manage banners in Magento and Magento 2. Find out what you can.

The most informative guide to manage banners in Magento and Magento 2. Find out what you can.

For implementing practical knowledge of Magento issues we post new tutorials and technical articles from time to time at our blog. We advise you to read them because they help in understanding important things while managing your website.  

Today you will find the step-by-step tutorial about managing banners. It will help you to understand how to implement banner functionality following best practices provided by the Magento. You will learn how to edit banners in Magento, add banner in homepage, show the banner in CMS content, etc.

We'll list all steps for different Magento versions such as Magento Commerce, Magento Open Source, Magento 2 Commerce, Magento 2 Open Source. Well, shall we?

Adding banners in Magento

Adding banners in Magento is not an easy process. Nevertheless, it depends on what Magento edition you're using for your website. As you probably know, the Banner itself is that advanced Magento Commerce functionality which is not offered in free Open Source platform. The same can be said of Magento 2 Commerce and Magento 2 Open Source editions. But you are still able to add banners in 2 ways:

  • by creating static blocks
  • by using custom Magento or Magento 2 banner extensions.

Well, let's start with an easy one. To create banner in Magento EE and Magento 2 Commerce editions, please follow the next steps.

Steps for Magento Commerce

Go Admin-CMS-Banners and click on Add Banner.

 

We start with Banner Properties fieldset. Please do as follows:

  • Specify the banner name
  • Set Active to Yes
  • Choose the appropriate value in Applies to list field. It refers to the place in store you're going to use a banner in.

Now open the Content fieldset. Do as follows:

  • In the Default Content field enter HTML code you need for your banner. ¬†
  • Click the Insert Image button to insert an image. You can select the image for your banner here.
  • In order to show unique banner content for a specific store, you have to clear the Use Default checkbox first. Then you may enter the custom content for each store view.
  • Press the Save Banner button.

Steps for Magento 2 Commerce

Go Admin - Content - Elements - Banners and click on Add Banner.

In the Banner Properties fieldset do as follows:

  • Specify a Banner Name for internal reference.
  • Set Status to ‚ÄúActive.‚ÄĚ
  • Select the value in the Applies To list. The value refers to the location on the page where the banner is placed. ¬†
  • Set Customer Segments to ‚ÄúSpecified‚ÄĚ in case you want this banner to be used for a specific customer segment.

In the Content fieldset, you can clear the No Default Content checkbox if you're going to use the same banner's content for each store view. Then you can enter the HTML code.

To continue formatting the banner follow our recommendations:

  • To insert a widget, please open Insert Widget. Now you may choose the Widget Type, complete the Widget Options and click on Insert Widget.¬†¬†¬†¬†¬†¬†¬†¬†
  • To insert an image, please open Insert Image. Now you may position a cursor where you want the image tag to be inserted. With a Browse function, you can find the image on your own computer. Then you will locate the image in the media folders on the left. Click on Insert File.
  • To create a banner content for a specific store view, clear the Use Default checkbox in the Store View Specific Content box first. Then simply repeat all the instructions of the previous step to enter the banner content.

Finally, you can place the banner.

Now we'll take these steps for Magento 2 Open Source editions. There is no built-in banner functionality here, but we can use static blocks instead.

Steps for Magento Open Source

  • Go Admin CMS - Static Blocks and click on Add New Block
  • Open General Information fieldset and fill in the fields.
  • Select Enabled in Status field.
  • Add the HTML in the Content field.
  • Use Insert Image button to add the banner image.
  • Click on Save Block button.

Steps for Magento 2 Open Source

  • Go Admin Content - Blocks and click on Add New Block
  • Specify Banner in the Block Title field
  • Specify Banner in the Identifier field
  • Fill the banner content.
  • Press Save.

Adding banner to homepage

How to add banner in Magento home page? And whether to use it. We say Yes. Because the homepage banner is an easy way to show several messages to visitors at the same place without forwarding users to another page. The homepage banner is a nice solution to show the hottest and trending products at prices your customers will love. Depending on the banner's location on the main page it is also that above the fold part that is visible without having to scroll. The appealing CTA elements on that part is an effective way to help customers make actions and stay longer on your website.

Steps for Magento Commerce

To display a banner on the homepage you have to use a banner rotator widget. It will help you to place a single banner or multiple ones anywhere in your Magento store.

Steps for Magento 2 Commerce

In order to add banner to the homepage or any other CMS page of your Magento 2 store, you have to use a Widget tool to create a Banner Rotator that places the banner at a specific location.

Steps for Magento Open Source

First you need to create a static block as described above. Then go Admin - CMS - Pages and choose Home Page from the grid.

To add a newly created block to the homepage, please select Insert Widget at Content tab. Then do as follows:

  • Choose CMS static block as Widget type
  • In Widget options you have to select CMS Static Block Default Template value from the Template drop-down. And select Banner as a Block.
  • Press Insert Widget.

At the end press Save Page.

Steps for Magento 2 Open Source

After you created new block as described above, you could add it to the homepage.

Please go to Admin - Content - Elements - Pages and select the Homepage. In Content tab select Insert Widget. Then do as follows:

  • Choose CMS static block as Widget type
  • In Widget options you have to select CMS Static Block Default Template value from the Template drop-down. And select Banner as a Block.
  • Press Insert Widget.

Adding banners to different CMS pages

Placing a banner on CMS pages will help your visitors look deeper into your website offerings. To make the banner visible on any other CMS page, you have to follow the same steps as when adding a banner to the homepage. But of course, it would be another CMS page of your website.

To insert a banner slider into CMS page please create the static block by using recommendations above. So, you've got a created block with required HTML content. Now you can insert it to any CMS page using CMS Static Block widget.

Using banners with promotions (price rules)

What if you want to display a banner for a customer who has a shopping cart total weight over 200$. This is a good idea to draw his attention to some other promotions in your store. So, you have to associate a banner with a shopping cart price rule.

First, create a banner in Magento using the mentioned above guide steps, and of course, create the price rule. Then do as follows.

Steps for Magento Commerce

  • Go Admin menu Promotions > Catalog Price Rules - Shopping Cart Price Rules
  • Open the rule from the list where you want to add the banner.
  • Select Related Banners fieldset in the Price Rule tab.
  • Check a checkbox of every banner that you want to associate with the price rule.
  • Press Save Rule button.

Steps for Magento 2 Commerce

Magento 2 Commerce allows using banners in price rules. To associate banners to promotions, follow the user guide.

Steps for Magento and Magento 2 Open Source

The fact is the default Magento allows associating banners to promotions only within Magento Commerce version functionality. If you want to display banners based on a variety of different rules at Open Source editions, you have to use the custom Magento and Magento 2 banner extensions. You may find the best one of those at the end of the article.

Adding banner to custom phtml

In case you want to display banners in theme PHTML file you have to create a static block with banner first. Then you could add your new block to the template by inserting the code. Let’s see:

Steps for Magento Open Source


<?php
    echo $this->getLayout()
        ->createBlock('cms/block')
        ->setBlockId('my_block_id')
        ->toHtml();
>

Steps for Magento 2 Open Source


<?php
    echo $block->getLayout()
        ->createBlock('Magento\Cms\Block\Block')
        ->setBlockId('banner')
        ->toHtml();
> 

How to add banner in Magento fast?

Why did we add this item to the guide? Because we see the Magento editions do not provide an absolutely easy way to display and edit the banners.

That is why there are quick and simple banner solutions on the market. They work well when you are tired of going through numerous steps for every action that you want to do.

Magento banner modules improve the default functionality with advanced features. We mean you do want to:

  • limit the banner visibility linked to user activity or user browsing time
  • add a graphical banner to the website
  • set the banner display on the specified day of week or month, and on a specified date/time condition
  • monitor the banner display and clicks count via statistics tab
  • create a popup with newsletter form via Lightbox banner option
  • display multiple banners or content blocks at the same placeholders
  • display your payments, security icons, information about scheduled events and holidays related content

It does sound good, right? See what banner module would help you to get such advanced features:

Both modules also provide an easy adding a standard banner to any theme container via standard Widgets and through placeholders.  

Summary

You can also review some more useful articles that will help you to experiment with Magento functionality:

Waiting for your comments. Stay tuned.

Leave a Reply