You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

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 article will guide you through the process of placing multiple banners on your site in a slider format.


1. Create a Banner Type

Note - if you already have banner Types set up and just want to add a new banner to an existing Type, skip to Section 2.

  1. First, you'll want a 'type' for your banners. This allows you to target the content your banner widget displays. 
  2. In the CMS, navigate to Content → Banners.
     
     
  3. Click 'Add New Banner Type'. 
  4. Enter a Code and Name for the new type, and assign an Icon if you wish. 


  5. Click 'Save'. 
  6. Your new banner type will appear in the Banner Type Maintenance list. You can edit or delete from this page as required. 
     

 

 

2. Upload Banner Images

Now that you have a banner type, you can add some images! 

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

  2. Select the Banner Type you just created. 
     
     
  3. Click 'Add New Banner'. 

  4. Enter the Details for the banner:

    Description - A short description to identify the image
    Banner Link - The URL, /category, or /product page the image links to
    Start Date - The date the banner becomes active (and therefore, visible)
    Expiry Date - The date the banner expires and is automatically removed from view
    Display For -

    •  All devices 

    • Desktop only 

    • Mobile only

     

  5. To load the image, click 'Select or Upload Image'.
     
     
  6. Select and insert a previously added image, or click 'Upload' to browse to a local file.
  7. If you wish to display this banner only for particular users, specify that in the Banner Filters section. The filter fields correspond to your ERP fields. You can enter multiple values, separated by commas. 

     
     
  8. Enter Overlay content if required. This will appear on a transparent panel atop your image. 
     
     
  9. Click 'Save & Exit'. 
  10. 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.
     
     
  11. Repeat Steps 3-9 for the remaining images in your slider. You can drag and drop banners to re-sequence them if required.
     

 

 

3. 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. 

  1. In the CMS, navigate to Content → Theme Layout (or Standard / Custom Pages, as the case may be). 
  2. Locate the appropriate zone for your banner slider, according to the page layout. In this case, we'll choose the 'Feature' zone. 
  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! 
    Full widget documentation is available here.


  6. 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.

 

  • No labels

© Copyright 2001-2023 Commerce Vision Pty Ltd. Use of this site signifies your acceptance of Commerce Vision’s Terms & Conditions. CV Connect, the Commerce Vision logos, and other Commerce Vision marks are assets of Commerce Vision Pty Ltd.