Configuration of the CubeCart Slideshow

A homepage slideshow is one of the first things most store owners want to set up, and one of the easiest to get wrong in ways that cost you sales. This tutorial covers how to configure one properly.

The slideshow described here is a feature of our CubeCart skins (Retail Therapy, Nautical, Party Time and Trade) and is driven by the Skin Configuration plugin, which is included free with every skin we supply. CubeCart itself does not provide a homepage slideshow in the standard Foundation skin.

Before you upload anything: image sizes

This is the step that matters most, and the one most often skipped.

The slider uses your source image at the size you uploaded it. It is not resized down to a thumbnail first. If you upload a 4000 pixel wide photograph straight off a camera, every visitor to your homepage downloads that file in full, and on a phone connection that is the difference between a homepage that appears immediately and one that does not.

Resize and compress your slide images before uploading them. As a rule of thumb, size the image to the widest the slider will ever display, save it as a compressed JPEG, and check the resulting file size. If a slide is over a few hundred kilobytes, it is too big.

Keep every slide the same dimensions as each other. A slider containing images of different heights will jump as it transitions, which looks broken even when it is working exactly as designed.

Step 1: upload the images

Slide images are managed through CubeCart’s standard File Manager, so there is no separate upload screen to learn. Upload your prepared images there as you would any other image.

Step 2: mark the images as slides

In the File Manager, each image has an Enable for homepage slider toggle. Switch it on for each image you want in the slideshow. Only images with this enabled appear in the slider.

This is also how you remove a slide later. Turning the toggle off takes the image out of the slideshow without deleting the file, so seasonal banners can be switched on and off rather than re-uploaded each year.

Step 3: set the alt text, title and link for each slide

Each slide carries three fields, and all three are worth filling in.

Alt text describes the image for screen readers and for anyone whose images fail to load, and it is read by search engines. Describe what the slide actually shows or offers, rather than writing “banner1”.

Title is used as the slide caption if you have captions enabled in the slider settings, so write it as something a customer should read rather than as an internal note.

Link URL is where the slide sends the customer when clicked. A slide advertising an offer that does not go anywhere is a wasted click, and customers do try to click them.

Step 4: set the slide order

Slides are ordered by dragging them into position in the admin. The order you set is the order they appear in, unless you have enabled the random start option described below.

Put your most important message first. A significant proportion of visitors never see slide two.

Step 5: configure the slider behaviour

The Slider Configuration section controls how the slideshow behaves. The settings available are:

Position. Where the slider appears in the page, from Position 0 (off) through to Position 6. Position 6 is used with the Nautical header layout 2. Setting this to 0 disables the slideshow without removing your slides.
Mode. The transition between slides: Horizontal, Vertical or Fade.
Slide transition duration, in milliseconds. How long the transition itself takes.
Pause, in milliseconds. How long each slide is displayed before the next one.
Auto show starts playing on load. Whether the slideshow advances by itself.
Auto show pauses on hover. Stops the slideshow moving while the customer’s mouse is over it, which prevents the slide changing just as they go to click it.
Start on a random slide. Useful if all your slides are equally important, unhelpful if one of them is not.
Remove pagination. Hides the dots beneath the slider.
Include image captions. Captions are taken from each image’s title field.
Easing. The easing curve used during transitions: none, linear, ease, ease-in, ease-out or ease-in-out.
Video. Enable this if any of your slides contain video.

Two settings are worth thinking about rather than accepting the defaults. A pause value that is too short means customers cannot finish reading a slide before it moves, which is worse than having no slideshow at all. And pause on hover should generally be on, because a slide that changes under a customer’s cursor sends them to the wrong page.

Optional: different images for different screen sizes

A wide banner designed for a desktop monitor usually reads badly on a phone, where the text becomes too small and the important part of the image is cropped out.

The Alternate Image Sizes setting solves this. With it enabled, you upload a separate version of each slide for each screen size, and the skin serves the appropriate one.

The images are matched by filename prefix, which must be exact:

Small screen images must have filenames beginning small_
Medium screen images must have filenames beginning medium_
Large screen images must have filenames beginning large_

Each version still needs its slider toggle enabled individually. Note that when Alternate Image Sizes is switched on, only images carrying one of those three prefixes are displayed, so any slide without a prefix will simply disappear from the slideshow. That is the usual explanation when someone enables this setting and the slider goes blank.

A note on whether to use a slideshow at all

It is worth saying plainly that homepage sliders are less effective than most store owners expect. Click-through rates on slides after the first tend to be very low, and a large auto-rotating image at the top of the page pushes your actual products further down.

That does not mean do not use one. It does mean that if you have six slides because you could not decide what to feature, you would probably be better served by one strong static banner and getting customers to your products faster.

If it is not working

The most common causes, in the order we see them:

The slider position is set to 0, which switches it off.
Images were uploaded but the Enable for homepage slider toggle was never switched on.
Alternate Image Sizes is enabled but the filenames do not carry the exact small_, medium_ or large_ prefix.
The store’s cache is still serving the previous homepage. Clear it and retest.

If you host your store with us, CubeCart support is included, so raise a support ticket and we will look at it directly.

More guides are listed on our CubeCart tutorials page.