Creating a Banner Rotator

Watch the video tutorial!A banner rotator can be used to display a single banner, or multiple banners in a specific sequence or randomly. The next banner in sequence appears when the page is refreshed.

As a frontend app, the rotator can be assigned to a specific page, product, or category, and placed most anywhere in your store. In addition, a banner rotator can be used as a related banner that is associated with a specific shopping cart or catalog rule.

If you prefer a more animated effect, you can add a jQuery slider or carousel that changes images automatically. There is a wide assortment of jQuery sliders available online, and many are free. To add a slider to your store, first create a static block. Follow the slider instructions to add the jQuery code to the block. Then, use the Frontend App tool to place the static block where you want it to appear in your store. To learn more, see: Working with JavaScript.

To add a standard banner rotator to your store, follow the steps below:

Step 1: Create the Individual Banners

Create the individual banners that you want to include in the rotator.

Step 2: Create a Frontend App

Complete the first three steps for creating a frontend app.

  1. Choose "Banner Rotator" as the type of app.
  2. Specify the page and location where it belongs (see Banner Layout Update Options).
  3. Choose the template you want to use.

Step 3: Configure the Banner Rotator

  1. If necessary, select CMS > Frontend Apps, and click to open the banner rotator that you created in the previous step.
  2. In the left panel, click Frontend App Options to configure the banner. Then, do the following:
    1. Set Banners to Display to “Specified Banners.”
    2. (Optional) To limit the banner to a certain section of the store, set Restrict by Banner Types to the section where you want it to appear.
    3. In the Rotation Mode list, select one of the following:
  • Do not rotate, display all at once
  • One at a time, Random
  • One at a time, Series
  • One at a time, Shuffle
  • To specify the banners you want to include, do the following:
    1. In the Specify Banners section, click the Reset Filter button to list all the available banners. You can also use the search filters to find the banners you want to include.
    2. Select the checkbox of each banner you want to include in the rotator.
    3. To set the sequence of each banner in relation to the others, enter a number in the Position column. If you wan the banner to appear in the first position, enter the number 1.
  • When complete, click the Save button.
  • Banner Layout Update Options

    Option Description
    Display on Categories Determines the categories where the banner rotator appears.
    Anchor Categories: Appears only on anchored category pages, which are category pages that are shown in the layered navigation.
    Non-Anchor Categories: Appears only on non-anchored category pages, which are category pages that are not shown in the layered navigation.
    Products: Displays the banner rotator for a specific product or type of product. Options include:
    All Product Types Simple Product Grouped Product Configurable Product Bundle Product Virtual Product Gift Card
    Categories Displays the banner rotator for only the categories selected.
    Block Reference Assigns the banner rotator to a specific location by reference. Options include:
    Breadcrumbs
    Left column
    Main Content Area
    My Cart Extra Actions
    Navigation Bar
    Page Bottom
    Page Footer Before
    Page Footer Bottom
    Page Header
    Page Top
    Right Column
    Store Language
    Template Options include:
    Banner Block Template
    Banner Inline Template
    Banners to Display Options include:
    Specified Banners
    Shopping Cart Promotions Related
    Catalog Promotions related
    Restrict by Banner Types Limits the banner to a certain section:
    Content Area
    Footer
    Header
    Left Column
    Right Column
    Rotation Mode Select the rotation mode for the banners. Options include:
    Do not rotate: Display one banner after the other in a stack where all are visible.
    One at a time, Random: Displays the banners that you specify in a randomly generated order. Every time the page is refreshed, a different banner appears.
    One at a time, Series: Displays the banners that you specify by the order of their position every time the page is refreshed.
    One at a time, Shuffle: Displays one banner at a time in a shuffled position order. This option is similar to the One at a time, Random option, except that the same banner does not repeat back-to-back (unless you only have one banner).
    Specify Banners Select the banners to include from the list of available banners.

    Discussion:

    Explore the Knowledge Base