Cycling Banners

Cycling Banners

The following will guide users on creating/adding/editing Cycling Banners, which are a fun and useful tool to showcase information on your zeckoShop site.

The dimensions and file size of the images you use are particularly important when it comes to creating cycling banners;
  1. All images in a banner should be the same width and same height.  
  2. Images that are wider than the browser window will scale down to fit the window. 
  3. The image file size should be no larger than 720 kB.

How to get to Cycling Banners

  1. From the Administration, go to Index Content Cycling Banners.
  2. At the top of the page, you will see a dropdown list of Existing Banners.
  3. Select a banner from your list to edit.

Cycling Banner Options

  1. Name - enter a simple name to identify your banner by. This will not appear to the site User.
  2. Pause Duration - use the slider to choose how long a panel should be displayed before it transitions to the next panel in the banner. This can be from 0.5 to 60 seconds.
  3. Transition Type - select how you would like your panels to transitions from one to the next. Fade will fade out the current panel while fading in the next panel. Scroll will scroll the current panel off to the left while the next panel scrolls in from the right.
  4. Next/Prev Buttons - if you select Yes, buttons will appear on the left and right sides of the panel that allow a User to go to the next panel or go back to the previous panel in your banner.
  5. Random Start - if you select Yes, a random panel in your list will be shown as the first panel. If you select No, the first panel in your list will always appear first.
  6. Pause on Hover - if you select Yes, the User will be able to pause the cycling of the banner by hovering their cursor over the panel. This allows them as much time as they need to view the contents of the panel. When they move the cursor off the panel, the banner will resume cycling.
  7. System Condition - optionally select a condition for when this banner will appear. (ie. choosing the Logged In condition, your banner will only appear when a User has logged in to their site account.)

Adding Cycling Banner Panels 

  1. Scroll down to the bottom of the Banner Panels section
  2. Click Add New Panel. The Edit Panel Details screen pops up
    1. Title - (optional) enter a title for this panel. This text will appear as an overlaid header on the panel.
    2. Content - (optional) enter content that will appear overlaid on the body of the panel.
    3. Note:  Title and Content can be styled with HTML or CSS
    4. Background Image - click   to select an image from your computer. A preview of the image will appear.
      1. On the right side and bottom of this preview you will see the dimensions in pixels of the image you have chosen.
    5. Links To 
      1. Nothing / any URL
      2. To a product
      3. To a category 
      4. To a custom html page 
    6. Start Date (Required) - select the first date that you would like the panel to appear in your cycling banner.
    7. End Date (Required) - select the date when you wish for the panel to no longer appear in your cycling banner. If you wish for it to appear indefinitely, select a date long in the future (ie. the year 3000)
    8. Click Close and you will see your new panel listed
  3. At the bottom of the screen, Click the blue Save All Banners to save your progress 
Continue adding as many panels as you would like to your banner.


Click and hold to drag your panels into the order you would like them to cycle in.

To edit an existing panel,
  1. click the edit button (Edit this panel
To delete an existing panel,
  1. click the delete button  (Delete this panel)
To set a condition on an individual panel,
  1. select a condition from the the System Condition dropdown. 
Note: These do not override the condition you may have set for the entire banner. (ie. if the banner is set to be viewed only when logged in, the logged out condition on an individual banner will not override it.)

    • Related Articles

    • Open a panel on a new tab on Cycling Banners

      How to get to Cycling Banners From the Administration, go to Index > Content > Cycling Banners. At the top of the page, you will see a dropdown list of Existing Banners. Select a banner from your list to edit. Open a panel in a new tab Scroll down to ...
    • Link a panel to a File on Cycling Banners

      How to get to Cycling Banners From the Administration, go to Index > Content > Cycling Banners. At the top of the page, you will see a dropdown list of Existing Banners. Select a banner from your list to edit. Link a panel to a File Scroll down to ...