Contents
Overview
Large banner images are a common feature of many home pages, allowing a hero image (or several) to catch the user's eye and direct them to a promotion, highlighted products, or call to action.Loading several banners gives your users the option to scroll through, with each image linked to its own content.
This guide takes you through the process of placing multiple banners on your site in a slider format.
1. Enable Banners
Before you can create and edit banners, the Banners feature must have been enabled. If enabled, Banners displays as a submenu item in the Content menu.
To enable Banners,
- Navigate to Settings → Feature Management → Content.
.- Ensure Banners is toggled ON.
- Click Configure.
- In Banner Feature Settings, you can maintain Banner Types and allow filters so that particular banners can be viewed only by certain sub-groups of Users. (The next step will guide you in creating a banner type. You can maintain banner types in Settings or in the Banner Maintenance screen.)
- To save your settings, click Save & Exit.
2. Create a Banner Type
First, you'll want a 'type' for your banners. This allows you to target the content your banner widget displays.
If you already have banner Types set up and just want to add a new banner to an existing Type, skip to Section 3.
- In the CMS, navigate to Content → Banners.
- Click Add New Banner Type.
- Enter a unique Code and Name for the new type, and assign an Icon if you wish.
- Click Save.
- Your new banner type will appear in the Banner Type Maintenance list. You can edit or delete from this page as required.
3. Upload Banner Images
Now that you have a banner type, you can add some images! Enter the Banner Details:
Description - A short description to identify the image
Banner Link - The URL, /category, or /product page the image links to
Banner Link Open in New Window - to open linked page in new window, toggle ON
Start Date - The date the banner becomes active (and therefore, visible on your site)
Expiry Date - The date the banner expires and is automatically removed from view
To upload different banners for different devices, click Select Mobile Banner against the required device.
NOTE - Follow the recommended file and pixel sizes for efficient downloads.
NOTE - Toggle ON Customer filters apply to user's current Customer only? if users with multiple customer accounts should see a banner only if they are in a particular Customer account.
4. Place Banner Slider Widget
Now all you have to do is place the widget where you'd like the slider to appear.
In this example, we'll add it to our site's Theme, but restrict its appearance to the Home Page via the Layer.
- In the CMS, navigate to Content → Theme Layout (or Standard / Custom Pages, as the case may be).
- Locate the appropriate zone for your banner slider, according to the page layout. In this case, we'll choose the 'Feature' zone.
- Click Add Widget.
- Search for Banner Slider and click Add Widget.
- Edit the newly added widget and configure the options. Don't forget to set the Banner Type Filter to the one you created earlier!
Full widget documentation is available here.- Click Save.
Presto! Your banner slider is ready. Load your site in a new browser to view your handiwork.
Not on our Best Practice Design framework yet? Refer to our guide for classic sites here - Home Page Banners - Classic sites.
Related help