Uploading A Rotating Banner / Image Slider

How to add a rotating banner to your website storefront to uniquely brand your website.

Step-by-Step Guide

1. Login to your administration panel admin.yourwebsiteaddress.com

   1. If your front page slideshow is not enabled, or to ensure it is, visit SETTINGS > SETTINGS CATEGORIES > CMS > Home Page Image Slider and verify or set this setting to ON.
      
      
      

2. Navigate to STOREFRONT CMS > CMS FEATURES > IMAGE SLIDER

3. Click the ADD NEW SLIDE button.

4. Assign a Title, Description, Slide Destination (where the user will be taken if the slide is clicked, be sure to set your URL to https:// so the banner links to the secure side of your store), Slide Window Target, and if you have multiple banners in rotation, select the number to represent the order in which this banner should appear in the rotation.

5. Click SAVE. After you press save, a dialog will appear informing you to select your image to upload for your banner.

6. Browse for and select your banner image file

7. Click the UPLOAD SLIDER IMAGE button.

8. Ensure the SLIDE IS VISIBLE ON STORE option is set to YES
   
   

   Open

   

9. Repeat steps 3-7 for each banner you would like to display.

10. To edit existing banners, click the  +EDIT SLIDER #1, #2, etc. button that corresponds to the banner you want to edit.
    
    

    Open

    

Finding Your Theme’s Rotating Banner or Slider Dimensions

The easiest way to determine your theme’s optimum slide dimensions is to:

1. Right-click (hover over the slider image and click with the right mouse button) on the slide and select Inspect (Chrome or Firefox) from the submenu,

2. Then hover over the image’s location in the inspector window.

    

3. Chrome will display the Rendered size. These are your theme’s best dimensions for creating your rotating banner image. Firefox will display the Intrinsic size which is acceptable in most cases for determining slide dimensions, though not optimal.

Related articles