Adding a banner carousel to your webstore is a great way of showcasing multiple banners without taking up too much screen real estate!
First of all, a quick catch up on the below articles would be recommended before going any further.
So, to begin with we should decide on where our carousel will appear. Lets go for the Home Page layout. The widget in question - Single Banner Container. Drag this to your content layout and re-size to full screen;
⚠️ Pro Tip: If you want your carousel to appear full screen, make sure you add your widget to the 'Top Container'
Creating your carousel is a 3 stage process. Lets tackle stage 1 - applying your banners to the Banner Group.
Step 1
Click on Marketing>Banner Groups
Click on + New Banner Group - give your group a name, start date & end date (these are important if you have content created which you would like to drop on/off on a particular date.
Once complete, scroll down to the 'Associated Banner' area.
Click on Associate New Banner
⚠️ Pro Tip: If you haven't already uploaded your banners, ready our quick article on how to do this.
Continue this process until you have all your banners loaded.
Step 2
Ok, on to the 2nd step. We need to create a banner container where our banner group will reside.
Click on Marketing>Banner Containers
Click on + New Banner Container
Give your container a name - ensure its something memorable as you will need to use this when associating the container with the widget in step 3!
Now click on the container you have just created - its time to associate your Banner Group.
Under Associated Groups, click on + Associated New Group - search for the banner group we created earlier in step 1. Click on save - on to step 3!
Step 3
Almost there - last but not least, we need to associate our container with the Single Banner Container Widget on our home page.
Click back into Appearance>layouts>home page
Click into the widget settings - under 'Banner Container', select the relevant banner container.
Job done - now all we have to do is decide on how quickly we want the carousel to rotate (delay in seconds). You can also pause the banner when your mouse hovers over it, and display the navigation bullets - handy if you have quite a few banners to showcase! Remember to save your widget settings changes!
Publish your changes and make your way to your home page to admire your handy work! Nice one!
