Knowledge Base


  • Video block
  • Video Tutorials

  • Watch our easy-to-follow video tutorials for quick tips on designing and managing your store.
  • View Video Tutorials

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