Magento Tutorials

Learn Magento with us

How to create new banner in Magento

 
  1. From Magento Admin panel to CMS→Static Blocks
  2. On top right click "Add New Block"
  3. Fill in General Information
  4. Click "Save Block" button
  5. From Magento Admin panel to CMS→Banner→Manage Banners
  6. Click "Add New Banner" button
  7. Fill in banner information and upload banner image
  8. Click "Save Block" button
  9. Navigate to CMS→Pages
  10. Choose Page you wish to add banner to
  11. Choose Content from left hand side menu
  12. Add your banner code. Repeat if you are adding multiple banners
  13. Click "Save Page" orange button to save your changes

We will begin this tutorial on our store’s front end, in order to show you the big picture.

What we have on our page at the moment, is slideshow, simple menu and our store’s products.

What we want to do, is to add one banner below our slideshow, and show you how it’s done at the same time, so make sure you stay tuned and log in to your store’s Admin Panel.

Navigate to CMS, and click on Static Blocks. (see the screenshot below)

Please note that CMS menu item will be visible in your main menu only when you download Magento Simple menu module.

Adding new static block in Magento
The essence of this process is to create static block first, and then assign it to the page where we want to present it.

Locate Add New Block orange button and start creating your new block!

Blocks are modular units of content and can be placed anywhere on the page.

You can use them to display static information that can be textual, dynamic, images or videos.

As we mentioned, they can be addition to any page or even group of pages, and can be very useful for your store.

Here is how it looks to create one. (click on the screenshot below for a better overview):

Adding new static block in Magento
Enter the name of your block – Block Title, and then enter the code.

Make sure that you separate it with dashes and choose store view.

We marked that our block will be visible in all of the store views.

Always make sure that you click on the Status tab and mark enabled from the dropdown menu, otherwise your block will not be visible.

Then, you have to enter the content of your tab, so go ahead and fill out this obligatory field.

Note that you can click on Show/Hide Editor or you can just simply use WYSIWYG editor (What You See Is What You Get editor).

Once you’re done with creation of your block, go ahead and locate Save Block orange button in the upper right part of the screen.

Once you are done with the first part of the process, go ahead and navigate to CMS, hover over Banner and click on Manage Banners menu item.

magento-menu-manage-banners

Locate orange Add New Banner button and start creating it by entering the code, assigning banner to the banner group and entering text.

Note that if you decide to enter text in the Text field, it will be visible on your banner, no matter for what kind of banner you opted for.

Click on the screenshot below for a better preview.

How to add banner in Magento
Browse for the image from your computer an choose file.

If you are adding multiple images and you will have multiple banners, make sure you sort order them by filling out Sort order tab.

When you are done and satisfied with how everything looks, locate Save Block orange button in the upper right part of the screen and save your changes.

Next part of the process that will result with our banners being visible in our front end, is navigating to CMS and choosing Pages menu item.

Page menu item in Magento
We do that so we could choose where will our banner be visible.

We chose Home page by clicking on it.

Once we clicked we were able to edit our home page.

Here is a visual for better understanding:

Manage pages in Magento

What you should do is go straight to Content menu item that is located on your left hand side menu.

We chose to show the Editor, by clicking on the orange button Show/Hide Editor.

Here is how it looks:

Editing home page in Magento

From here, when you make sure that everything is properly marked and enabled, notice the left hand side menu and choose Content.

This is where you will be at that point:

Home page content

You should add the code, as shown in the editor.

Note that if you repeat it you will get multiple banners.

Once you’re done, click, on Design menu item located in the menu on your left hand side, and choose layout for your page from the dropdown menu.

You can also edit other parts of the page by entering or changing keywords and description by navigating through the left hand side menu.

Once you’re satisfied, click on orange Save Page button in the upper right part of the page and save your changes.

And down below you can see how our page looks like after we added our banner.

We hope you have found this tutorial useful.

Now go ahead and add some palm trees to your home page!

Home page banner

  • Was this helpful?
  • Yes   No