Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

Banners encourage instant engagement with your website users, so why use that valuable space on a page just for one highlight or call to action?


Excerpt

Slider banners are common features on many ecommerce sites these days. On the Home Page for example, you may want to draw attention to a promotiional campaign, new products, and communicate changed shipping conditions. With the slider format, the loaded set of banners ('banner type') displays in the one space in a carousel. The user can easily go to another banner by clicking the 'next icon' or the link to the one they want. If autoplay is on, the carousel displays a for a set time before transitioning to the next one.


Info

...

The slider banner can also be used to embed an externally-hosted video banner on a page or template. NOTE - Styling may need assistance from Commerce Vision.


Example of a banner in a slideshow.

...

Features - (1) Clickable

...

'dot' icons on a banner to indicate which banner in the slideshow is in view. Also allows user to click to other banners quickly. (2) Clickable

...

Next/Previous Navigation buttons. (3) Clickable link to another page on your site

...

or to an external page. 

Image Modified

Video example: four banners in a slider format

View file
nameBanner_Slider_Format_Example.mp4
height150

Panel

On this page:

Table of Contents

Step-by-step

This guide takes you through the process of placing multiple banners in a slider format on your website.

1. Enable and configure Banners

Before you can create and edit banners, the Banners feature must have been enabled. Banners displays as a submenu item in the Content menu. 

To enable Banners:

...


2. Create a Banner Type

A 'banner type' is one or more banners grouped together. Keep in mind a banner type targets a specific type of content, e.g., a slider banner for your home page. When you add a banner feature to a page, you will be asked to select the relevant banner type.

This step creates a banner type.  Banner types is accessed via Feature Management Settings or the Banners Maintenance screen.

Tip

If you already have the Banner Type set up and just want to add a new banner to an existing Banner Type, go to Step 3.

...

3. Upload Banner Images, Videos 

Upload the images and/or video for each banner for the banner type. 

...

MultiExcerptNameuploadbannerimage
Info
titlePrerequisites
  • Banners feature enabled
  • Banner type and banners created. See: Banners



Add Banner Slider Widget

  1. In the CMS, go to Content

...

Repeat Steps 3-11 to add more images in your slider banner. You can drag and drop banners to re-sequence them if required.

Image Removed 

4. Add Banner Slider Widget

All the slider banner widget where you'd like the slider to appear.

...

  1. Pages & Templates, then the page or template to display the slider banner.  (This example uses the site Theme template, then restricts display to the Home Page with a Layer.) 

  2. In

...

  1. the page/template

...

  1. , go to the zone for your banner slider. 

  2. Click Add Widget.

  3. Search for Banner Slider and click Add Widget.

  4. Edit

...

  1. options in the Banner Slider Widget. IMPORTANT - To display a banner item on this page, in Banner Type Filter, select the banner type. 
    Image Added

    Info

    Carousel Options lets you edit settings for the slideshow. For a guide to all widget options, see: Banner Slider Widget.

...


  1. When finished editing, click Save.

...


Presto! Your banner slider is ready. Load your site

...

on a new browser to view your handiwork. 

Image Modified 

...


Access banners

...

on a slideshow quickly

When you're on a page with a Banner Slider

...

Widget configured, you can

...

jump directly to the

...

banner type/banners in use to edit them. Hover over Options , then select Banners. (See: Banner Type Maintenance). 

Image Modified



Related help

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel in ("banners","bpd") and type = "page" and space = "KB"
labelskb-how-to-article

Content by Label
showLabelsfalse
showSpacefalse
titleRelated widgets
excludeCurrenttrue
cqllabel = "widget" and title ~ "banner"