Home Page Enhancement - Banner Image Slideshow with Links using JavaScriptDo you want to have banners on your home page which change after a few seconds so that you can get different advertisements or specials displayed to your shoppers? This is a great feature which will allow you to direct your customers straight to featured products, brands, or specials. This will show you how you can add JavaScript to your home page template in the head section and a line of code in the body of the page to get images with specific links added to your home page. An example of this can be seen to the left. If you click on a picture you will be taken to a new page. If you want me to install this code on your website for you I can do that for a fee. Note: This script is from http://www.dynamicdrive.com/
|
Step 1: Add Code To Your <head> Section
You will want to begin by adding the following code into the head section of your custom template. You can add this code anywhere between the <head> and </head> tags.
Step 2: Add Code Into <body> Where You Want It To Appear
Next you will want to add the following code into the body of your custom template where you want the slideshow images to appear. What many merchants will do is add the code just before the [-- PAGE.Text1 --] field in their custom page template.
Step 3: Add JavaScript and Upload Images
You will now need to add three images directly into your media directory, and add one JavaScript file into your store. Right click with your mouse (or two-finger click if you have a Mac) and save the three images below. Then log into your ShopSite store, and go to Images > Upload Images (make sure you are uploading them into your media directory).
Now go to Merchandising > Custom Templates > Includes, and in the "Publish Files" section you will need to "Add Publish File." The name of the file should be exactly fadeslideshow.js. Then click on "Edit Publish File" and add the following code.
Step 4: Add Your Images And Links
For this last step you will want to go to Pages > highlight your home page > Edit Page Content. Scroll down to the extra fields section, and in the extra field 1 you will want to add the following code. After adding the code, you can replace the images with your images, and the links with the links to the pages you would like the images to link to. You can add as many as you want, just separate each with a comma. The last one should not have a comma after it.
Modifications You May Want To Make
You will probably want to change the dimensions of this feature. For this, you can go to Merchandising > Custom Templates > Page/Product Templates > Edit Template, and edit the code from step 1. There is a section of code with the dimensions, dimensions: [200, 133]. The "200" is the pixels wide, and the "133" is the pixels high. You can change these, save changes, then publish your store so that the slideshow has the dimensions that you want.