The Carousel module allows you to put images of your products in a compact, simple format where your customers can simply click on a product image they like the look of and be taken to the actual product itself. This acts almost like a feature slider for your product images, rather than having one large image slideshow.

If you are looking to add/edit a slideshow with multiple images that have animated transitions, or editing a static (non-moving) image banner, please refer to the links below.


Creating a Banner to use with a carousel


  1. Login to your admin system
  2. Go to System > Design > Banner


Click 'Insert'            


Click ‘Add banner’ at the bottom right hand corner of the page
Fill in all of the relavant details, a guide can be found below.  
Banner Name
Slide Title
Enter in a title for the slideshow image
Slide Link
If you want the image to go to a specific product or category, put the link of the product or category in the ‘Link’ box.
Image Upload
Select ‘Browse Files’ underneath the grey camera thumbnail to upload a new image for your slideshow or select an image that already exists from your Image Manager.

Note: your slideshow image must match the design of your site, most sites require images that are 920px wide by 250 pixels high. Please contact your designer to find out the image size for your shop. If you do not insert an image of this exact size, the shop will not automatically resize it for you, it will upload the image as is and will not be laid out correctly on the page.
Remove Slide
To Remove the slide click remove
Select ‘Save’ at the top right hand corner of the page


Repeat these steps for each image you would like to appear in your carousel.

Installing your new Carousel


  1. Login to your admin system
  2. Go to Extensions > Modules
Install the 'Carousel'  
Click 'Edit'
Click 'Add Module'  
Fill in all of the relavant details, a guide can be found below.  
Banner
Use the dropdown menu to select which banner you would like to display.
Limit
Enter the maximum number of images you would like to see at any one time.

Note: The image size should be planned with the limit in mind. Please contact your designer to find out the best limit and image size for your shop.
Scroll
Enter the number of images accross you would like the carousel to scroll when the navigation button is pressed.
Image (W x H)
Enter in the dimension of each image within the carousel. Be sure to enter the width followed by the height.

Note:
 The image size should be planned with the limit in mind. Please contact your designer to find out the best image size and limit for your shop. If you do not insert an image of this exact size, the shop will not automatically resize it for you, it will upload the image as is and will not be laid out correctly on the page.
Layout
Use the dropdown menu to select on which pages of the shop the banner will display.
Position
Use the dropdown menu to select on where on the pages of the shop the banner will display.
Status
Use the dropdown menu to select if the banner is enabled or disabled.
Note: This allows you to stop the banner displaying without losing its information.
 
Sort Order
This is the order modules are displayed, 0 is the first item display and 9999 is the last.
 

To Remove the slide click remove
Select ‘Save’ at the top right hand corner of the page

Resizing the Image

Images must be the correct size or else they will not display correctly. If you do not have access to photo editing software like PhotoShop, follow the simple steps below using an online image editor Sumo Paint.

Step 1

Go to www.sumopaint.com/app

Under File, click Open From My Computer and select the image from your computer



Step 2

Under Image, click Image Size





Step 3

Enter the Width of your Slide Show Dimension (do not worry about the Height)

Tick Constrain Proportions

Click OK




Step 4

Under Select, click All



Step 5

Under Edit, click Copy



Step 6

Under File, click New Image




Step 7

Enter the dimensions (both Width and Height) of your Slide Show 

Click OK



Step 8

Under File, click Paste



You now have the correct Slide Show image size

To move the image around, click on the Move Tool (on the left of screen)



By clicking and holding down on the image, you can move the image up and down if need be

Step 9

To save the image, under File, click Save To My Computer



Step 10

IMPORTANT: Select JPG from the Format list

Click Save