Versions Compared

Old Version 32

changes.mady.by.user Documenter

Saved on

compared with

New Version 33

changes.mady.by.user Documenter

Saved on

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

Adding a video banner may require consultation with Commerce Vision.



Example of a banner in a slideshow. Basic features - (1) Clickable links to each banner. Also tells the user which banner in the sequence they are viewing. (2) Clickable 'next banner' icon. The other end has a clickable 'previous banner' link. (Can be disabled.) (3) Clickable link to another page on your site. Displays depending on content.

Video example: four banners in a slider format

View file
nameBanner_Slider_Format_Example.mp4
height150


Panel

On this page:

Table of Contents


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:

  1. Go to Settings →  Feature Management → Content.
    .

  2. Ensure Banners is toggled ON.

  3. Click Configure.

  4. In Banner Feature Settings, you can maintain Banner Types and allow filters. Filters gives the option of showing a banner only to subgroup of Users.
  5. To save your settings, click Save & Exit.
     

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.


  1. In the CMS, go to Content → Banners.

     
  2. Click Add New Banner Type.
     
  3. Enter a unique Code and Name for the new type, and assign an Icon if you wish. 


  4. Click Save.
     
  5. Your new banner type will appear in the Banner Type Maintenance list. You can edit or delete banner types from this page. TIP - Once the banner type is in use, the Name cannot be changed.
     


3. Upload Banner Images, Videos 

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

Multiexcerpt
MultiExcerptNameuploadbannerimage


  1. In the CMS, go to Content → Banners. 

  2. Click Edit for the banner type.

  3. Click Add New Banner. 

  4. Enter the Banner Details:

    Description - Short description to identify the image or video
    Banner Link - The URL, /category, or /product page linked to
    Banner Link Open in New Window - toggle ON for linked page to open in new window 
    Start Date - (optional) Date banner becomes visible on your site 
    Expiry Date - (optional) Date banner is automatically removed from your site


  5. Image upload (for Video upload, go to step 7)

    1. To upload the same image for all device types, click Select Banner for All Devices. (To upload a different image each device type, go to step 5(b).) 

      Example: same image for all devices
    2. To upload a different image file for each device type, click their Select Banner. TIP - For efficient download, use the ideal file size and dimensions in 'Recommended' for each device type.
  6. In Image Selection, select and insert a previously uploaded image. To upload a new one, click Upload. 


  7. Video Upload
    To upload one video for all device types, click Select Video for All Devices.  To upload a different video for each device type, click Video for the device type.

  8. Enter video link details.

    Video Type - select YouTube or Video.
    Video Title / Description - enter name for video
    Video ID - enter Video ID from video source

    Click Save.


  9. Enter Overlay content if required. This will appear on a transparent panel over your image. 


    Example of Overlay
  10. If this banner is not to display for all users, use the Banner Filters section to define user groups. The filter fields correspond to your ERP fields. Not all fields may be in use on your website. Multiple values, separated by commas, can be entered in a field. 



    Customer filters apply to user's current Customer only? - Toggle ON if users with multiple customer accounts should see this banner only if they are currently in a Customer account that has been given access. OFF - if a logged in user switches to a Customer Account that does not have access to the banner, they will still see it.

  11. Click Save & Exit. 
    You'll see the newly added banner listed on the Maintenance page, with a coloured tile to indicate whether it's Active, Scheduled, or Expired.
     
     

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

 


4. Add Banner Slider Widget

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

(In this example, it is added to the site's Theme and then restricted to appear on the Home Page with a Layer. 

  1. In the CMS, go to Content → Theme Layout (or the page/template for the banner slider to display. 

  2. Locate the zone for your banner slider. 

  3. Click Add Widget.

  4. Search for Banner Slider and click Add Widget.

  5. Edit the newly added widget and configure the options. Don't forget to set the Banner Type Filter to the one you created earlier! 

    For a guide to all widget options, see: Banner Slider Widget.


  6. Click Save. 


Presto! Your banner slider is ready. Load your site in a new browser to view your handiwork. 

 


5. Access banners for a slideshow quickly

When you're on a page with a Banner Slider widget, you can use the Options menu to go directly to the Banner Type rendered to edit the banners used. (See: Banner Type Maintenance). 



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"