Banners are images that can be used for advertising or other information and linked to another page or special promotion. You can add a single banner image to your homepage or a group of banners to display in a rotating slideshow.
Summary: In Design > Banners & Galleries > Image & Banner Groups, you create a group of images (a slideshow), and when you edit one, you can add images to that group. The reason why we have groups is so that you can add multiple slideshows (groups of images) to multiple areas and pages on your website. You can also make it so that a group has only one image and could thus refer to that as a banner.
On its own, that doesn't add a slideshow or banner to your site but only lets you manage the images. To edit the slideshow and banner settings for each group, you go to Design > Blocks > Responsive Banners. This is also where you assign a banner group that you created above to one of the responsive banners and then control its settings.
To add the slideshow or banner nearly anywhere on your website, you do that in Design > Theme Settings > Layouts Builder. You drag and drop the responsive banner from the left to the right.
Read our documentation below for detailed instructions on how to manage your banners and slideshows.
Adding banner images
To add a banner to your homepage go to the menu Design > Banners & Galleries > Image & Banner Groups.
You will now see a new screen with a plus sign icon on the right hand side. Click on this icon.
Add a name for your reference. Next, click on the 'plus sign icon' to add the banner image.
Complete the following fields to add your banner:
- Title: A name for your banner.
- Link: The URL link you want your customers to be redirected to when they click on the banner image. See the below 'How do I link my home banners?' for more information.
- Image / Banner: Add your banner image. Click on the 'plus sign icon'. You will see a 'pencil icon'. Click the 'pencil icon' and you will now be able to upload an image from your local computer or choose one from your media library. The banner image you upload for your homepage banner depends on the width of your store. Most banners are between 900px and 2000px in width. Upload the image size that best suits your needs. If you want a slideshow with multiple images, click on the 'plus sign icon' each time to add a new banner image.
- Sort Order: Decide in what order you would like your banners; 0 being first.
Tip: if adding more than one image to this banner group, make sure your banner images are all the same size and height before you upload them, so that they look neat when rotating in the slideshow.
How do I link my home banners?
Your homepage banners are set up as follows:
- You create all of the banner images and link them to a slide.
- The created slide can be added to a slideshow.
The link where a slide will go when clicked on is set up when you first add the images into the banner management component.
Go to Design > Banners & Galleries > Image & Banner Groups from the store Admin menu, and then click the pencil on the banner group you want to edit.
On the editing screen, set the link to where the page will go when clicked.
If you are not sure what the link should be, then open your website in a new tab, navigate to the page, and then simply copy and paste the link into the text field available. You can either copy the whole URL (absolute path) or copy a part of it (that is after your Top-Level Domain (TLD), such as '.com', '.com.au', '.ca', etc.) (relative path). Basically, for Image & Banner Groups, you would copy the '/' after the TLD (e.g., .com) along with the text after the '/', as seen in the image above. See our helpful knowledge base article about absolute path versus relative path to learn more about those differences and how to properly link.
Important note 1: if you want to link to another website with a different domain name, or even your own website with a subdomain, you must always use the whole URL (absolute path).
Clicking on my banner reloads to the homepage. How do I make it not load any page?
If you don't want a link added to a banner, simply enter the character "#" where the Link field is. If you do not enter a # symbol, meaning that you keep the Link field empty, then the banner will be clickable and will take users back to the homepage, and if you are on the homepage, it will reload the homepage.
Adding your banners to your homepage or another page
Now that you have added your banner, you need to ensure that there is a banner block displayed under the Layouts Builder for your homepage.
Click on the menu Design > Theme Settings and select the tab 'Layouts Builder'. Select the 'Home' layout next to 'Currently building this layout' to add it to the homepage layout, or select another layout to add it elsewhere. To create more layouts, you can use the Layouts Manager under Design.
In this section, you need to make sure the block called 'Responsive Banners > Home Banner Settings (or another name that you have set)' is under a section in the Layouts Builder such as Content Top, Slideshow, or others. If this block is not under a section there, drag the block into a section.
Editing the banner settings
To edit the banner settings, if you're still in the Layouts Builder, click on the area of the Responsive Banners > Home Banner Settings (or another name that you have set) block. This will open a new pop-up window. You will now see a screen with various settings for your banner. See below for a summary of what these settings do. You can also access this page in Design > Blocks > Responsive Banners, expand it by clicking the 'Show Blocks' button, and then edit the one you want to modify.
Responsive Banner Settings:
Block Name: Choose a relevant name. You can add this gallery nearly anywhere, since it is a block, in Design > Theme Settings > Layouts Builder.
Image & Banner Group: What banner group should be used? Choose one from the groups created (or create a new one) in Design > Banners & Galleries > Image & Banner Groups.
Width: This should be set to the width of the banner image you uploaded.
Height: This should be set to the height of the banner image you uploaded.
Transition effect: This is for slideshows only (multiple images). This is the animation effect that you see when you change from one banner to the next.
Transition duration: This is for slideshows only (multiple images). This the transition time of how long each effect is displayed. Enter a number in the first field and keep in mind that every 10 equals 1 second. So, 20 equals 2 seconds. The second field is how fast it takes to switch to the next slide. Keep it at a higher number than the one in the first field. Default for first field: 20. Default for second field: 100.
Delay to next slide: This is for slideshows only (multiple images). This is how long each slide displays before it switches to the next one. Enter a number in the first field and keep in mind that every 10 equals 1 second. So, 20 equals 2 seconds. The second field is how fast it takes to switch to the next slide. Keep it at a higher number than the one in the first field. Default for first field: 20. Default for second field: 100.
Autoplay: This is for slideshows only (multiple images). Allow the slideshow to start rotating as soon as the website load. If you select 'No', it won't autoplay and the user will have to press the play button.
Display play/pause buttons: This is for slideshows only (multiple images). Add a pause button that can be pressed to pause and a play button to resume.
Pause on hover: This is for slideshows only (multiple images). If you select 'Yes', when you hover your mouse over the slideshow, it will pause it.
Loop only once: This is for slideshows only (multiple images). This will play the whole slideshow and return to the first one. After reaching the first slide, it will no longer continue rotating.
Display caption: It displays your current slide's name on the slide (the one chosen in Image & Banner Groups for that slide/image).
Display next/previous buttons: This is for slideshows only (multiple images). Displays the left (previous) and right (next) buttons to quickly switch between slides.
Display control thumbnails: Does not yet do anything but is required for the buttons to appear.
Status: Set to 'Yes' to enable your banner on the front-end of your store or 'No' to disable it.
