Smilehouse Workspace HOWTO Articles

Howto make a product banner carousel

Usually it is good to present top-selling products to all visitors to increase sales and present wider range of products per visitor.
One way of doing this is to generate a special product banner carousel that creates a carousel with product pictures, names and links with fading effect.

Creating the script

First you should decide where to show the banner carousel. Usually the size of the banner carousel is slightly bigger than the average size of your product pictures, as it uses directly your product pictures to generate banners.

If you would like to put the carousel on the right side of the page, you should put a Product Spot WAE to that place.
Go to Visual -> WWW-outlook -> Page construction
And click Bottom.

A new window opens where you can manage the contents of this part of the shop layout.

Put this code to Start HTML:

var newestProdItemCodes = new Array();

This creates a new array of products where the script loads the product information.

Put this code to Product HTML:

<div id="$product_itemcode$_newest" style="display:none">
$product_picture1$ <br>
newestProdItemCodes[newestProdItemCodes.length] = "$product_itemcode$";

This generates the outlook of carousel based on product information.
In here we first show the the product picture 1, then the name of the product below it.
You could also add for example the price of the product next to the name etc.

Put this code to End HTML:

<div id="newestTarget"></div>
var index = 0;
function scrollNewest() {
//index = parseInt(Math.random() * newestProdItemCodes.length);
var ind = (index % newestProdItemCodes.length);
var id = newestProdItemCodes[ind];
var sourceId = id+"_newest";
var targetId = "newestTarget";

This script creates the actual carousel.
Notice: If you want the order of the items in carousel to be random, remove characters // from the 5th line.

changeOpac(0, targetId);
setTimeout("copyHTML('"+sourceId+"','"+targetId+"')", 200);
show(1, targetId);
setTimeout("scrollNewest()", 5000);
setTimeout("scrollNewest()", 5);
function copyHTML(source, target){
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;

This script creates a fading effect to transitions between products.
You can change the time (now 5000 = 5 sec) each product is visible and make other custom adjustments to the script if needed.

function show(opac, id){
opac = opac+(opac/2);
changeOpac(opac, id);
setTimeout("show("+opac+",'"+id+"')", 100);

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";

The final parts of the script adjusts fading effect for different browsers.
Notice: some browsers cannot show the fading effect at all.

You should leave the Grouping HTML empty and set Grouping interval to 1.


Click the Setting tab on the Product Spot WAE.

First select the product group from where the product to the carousel whould be loaded from.

Then set Product Name and Product Pictures as links to product page.


You should see a result looking something like this:

You can alter the script and the layout the way you want.
If something is wrong in the script, the browser should give you and error message with detailed description about the Javascript error and code line where the error can be found.

<< Back to HOWTO index