No results found :(
How to create new banner in Magento
- From Magento Admin panel to CMS→Static Blocks
- On top right click "Add New Block"
- Fill in General Information
- Click "Save Block" button
- From Magento Admin panel to CMS→Banner→Manage Banners
- Click "Add New Banner" button
- Fill in banner information and upload banner image
- Click "Save Block" button
- Navigate to CMS→Pages
- Choose Page you wish to add banner to
- Choose Content from left hand side menu
- Add your banner code. Repeat if you are adding multiple banners
- 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)
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 an 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):
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 the 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.
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.
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.
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:
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:
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:
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!