Add a Rotating Banner to Any Website




We've had numerous people ask us how to make a rotating banner or slideshow for their website. As Pro Members of Store Coach, we are going to give you the code and show you how to make it work for your website.

This code will work for banners of any size and all of the images don't even have to be the same size (they look better when they are, though). Just make sure that your banner isn't wider than the width of the body section for the page you're putting it on. You can put as many rotating images in the display as you want, too. You can also put the banner anywhere you like but for the purposes of this tutorial, we are going to put it into the upper area of the home page's body.

For this tutorial we are making each of the banner images 708 pixels in width. The height of the banner is not important but, again, it should probably be the same for every image if you want a clean and uniform look.

After you have created all of the images for your rotating banner it's time to put them on your website. Here is how it is done:

Upload Your Images

[dropshadowbox align="right" effect="raised" width="300px" background_color="#ffffff" border_width="1" border_color="#dddddd" rounded_corners="false" ]

Logomazing

Professional, glossy store logos and banner ads for crazy-low prices!

[vc_button title="Learn More" target="_self" color="btn-success" icon="none" size="btn-large" href="/custom-logo-banners" target="_blank"]

[/dropshadowbox]
  1. Login to your BigCommerce Control Panel and click the Website Content tab. Then, click the Image Manager link from the drop-down menu.?
  2. First, you simply need to upload each one of the images you created that will be inside of your rotating banner. Click the Upload Images button, then click the Browse button and one by one, upload each of the images you created. In our case, we uploaded:
         image-1.png
         image-2.png
         image-3.png
         image-4.png
         image-5.png

    ALL of these images are now located in the directory path /product_images/uploaded_images/ so the relative path to each one of these images is:

     /product_images/uploaded_images/image-1.png
     /product_images/uploaded_images/image-2.png
     /product_images/uploaded_images/image-3.png
     /product_images/uploaded_images/image-4.png
     /product_images/uploaded_images/image-5.png

    I have highlighted these because you are going to need those image locations in an upcoming step (yours will be different at the end because you will have different image names, obviously).

Copy and Modify the Code

Now it's time to copy some code. Copy ALL of the following code (including the part I highlighted at the bottom) and paste it into a text editor like Notepad or WordPad (or TextEdit if you are on a Mac):

<p>
<!-- Image Slide Show Start website image -->
<script type="text/javascript" src="https://storecoach.com/js/fadeslide.js"></script>
<script type="text/javascript">// <![CDATA[
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [708, 122], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/product_images/uploaded_images/image-1.png"],
["/product_images/uploaded_images/image-2.png"],
["/product_images/uploaded_images/image-3.png"],
["/product_images/uploaded_images/image-4.png"],
["/product_images/uploaded_images/image-5.png"]// <--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 2000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
// ]]></script>
<div id="fadeshow2">&nbsp;</div>
<!-- Image Slide Show End -->
</p>

 

Now, we just need to tweak a few things ...

  • The numbers highlighted in blue are the largest dimensions of your images. Put whatever the width (in pixels) your largest image's width is as the first number and whatever the height (in pixels) your tallest image is as the second number. All of our images were 708 pixels wide by 122 pixels tall, so we entered 708 and 122 as the SlideShow's maximum dimensions.?
  • The section highlighted in yellow is where your image file names go. These are the image file names you should have taken note of in Step 2 of the Upload Your Images section, above. Please make sure that you leave the quotation marks (“) on both sides of the image paths. All depending how many images you have, you may have more or less lines for images than we have here. Also please make sure that there is no trailing comma after the image in the very last bracket.
  • The section highlighted in green is where the amount of time (in milliseconds) each image is displayed on the screen before transitioning to the next image. The higher the number you put here, the longer each image will display before rotating to the next one.
  • The section highlighted in pink is the amount of time (in milliseconds) the transition fade from one image to the next occurs. A very low number here will cause images to immediately replace one another, whereas higher numbers create a longer “melt” time between each image.

Put the Code on Your Website

Now that you have created your rotating banner code, you just need to insert your banner somewhere. As stated before, you can put it wherever you want but in our case, we want it just below the Header tag on our home page. To insert it there, do the following:[s2If !is_user_logged_in()][coach_expand]

%%[blank px=25]

Create a FREE ACCOUNT to Access the Rest of This Tutorial

[vc_row][vc_column width="1/6"][vc_column_text][blank space=2][/vc_column_text][/vc_column][vc_column width="2/3"][vc_column_text][blank space=1] [blank px=15][coach_register_full type="fast"][/vc_column_text][/vc_column][vc_column width="1/6"][vc_column_text][blank space=2][/vc_column_text][/vc_column][/vc_row][blank px=15] [/coach_expand][/s2If]




Q&A with Coach