Website Carousel Best Practices
What are the website carousel best practices for Shopify and ecommerce stores?
You want to convert visitors to your Shopify store into customers, right?
And like plenty of other store owners, you’re thinking let’s start with an image up top. People like pictures. Every picture paints a thousand words.
But hold on.
Why give your visitors just one image when a rotating carousel (AKA content module or slider) gives you the option of loading up your above-the-fold space with a gallery of great imagery? That’s sure to delight.
It’s going to give you a great chance to show off your product range in pictures. You can even put different messages on each slide.
That’s got to draw customers in, get them eager to find out more…
Surely, that’s one of the many website carousel best practices?
Well, actually, no.
Not at all.
You know those carousels that don’t automatically rotate, the ones you have to manually click on to see the next image (they’re also called static carousels)?
Recent website carousel best practices tests have revealed…
That only 1% of site visitors click on them.
Yes. Just 1%.
And of the scant few who do click, 84% just click on the first slide, leaving the rest of your slides attracting just 16% of clicks.
So, no matter how many products you’re dedicating their own slides to on the carousel, only the first one is ever likely to get any attention.
That might get you thinking that having a self-rotating carousel, one that automatically toggles through the imagery is the answer to website carousel best practices?
While they are certainly more click-friendly, it’s still the case that it’s the first slide that’s the real performer, attracting 40% of user clicks.
With the first image attracting by far the biggest slice of the user interaction cake (if you can imagine such a thing), whatever website carousel best practice you opt for, it does beg the question, are carousels a serious waste of the most vital space on your store’s homepage—that critical area above the fold?
Given the statistical evidence, the answer seems a no-brainer.
But let’s not write off the image carousel concept without investigating this a bit further.
After all, the idea seems a sound one – fit more imagery and multiple headlines into your above the fold space to give visitors more of an insight into your products.
What’s not to like?
The carousel concept is certainly popular with e-commerce site owners and designers.
But the popularity of a format that doesn’t produce results suggests there are a few myths and misconceptions about image carousels that people are buying into:
Myths of website carousel best practices
| Website Carousel Best Practices MYTH 1: | So many e-commerce stores use image carousels, they must work. My competitor has a 3-image carousel, so I’m going to out-do them and have 5. |
| Website Carousel Best Practices MYTH 2: | The more products I visually display on my site, the more conversions I’ll get. Let’s show customers as many products as possible, they’re bound to like and buy at least one. |
| Website Carousel Best Practices MYTH 3: | Saying as much as I can about my business above the fold is crucial. A carousel gives me a good way to deliver multiple messages in minimal space. |
If it’s important for your business to satisfy as many internal stakeholders as possible by giving them above the fold space to say their bit, then go-ahead, get the carousel and load it up with messages and imagery.
If you’re more concerned about have a Shopify store that actually converts, check out the evidence and face the facts that carousels simply don’t engage users much at all beyond the first image.
Website Carousel Best Practices – Why Your Site’s Image Carousel Isn’t Working
Given their above-the-fold status, to be worth their place on your site, image carousels really need to be delivering the conversions.
But the evidence suggests they’re just getting overlooked. And if so, why? A closer look at carousels and the anatomy of webpages reveals exactly why:
A Negative User Experience
It’s there and… oh, it’s gone. One of the most annoying aspects of rotating carousels is the speed at which they rotate.
OK, many do hang around long enough for people to take in any message and appreciate the visual. But what if the messaging is in a language that’s not your mother tongue?
Or what if the user is visually impaired and needs more time? Rotating carousels don’t take into account the different needs of different users, they just assume everyone can read the content at the same time.
Not Mobile Friendly
It’s safe to assume that most carousels are designed on a desktop computer, for optimum viewing on a desktop computer.
And yet so many shoppers are using their mobiles to make purchases, and that’s rendering carousels even more difficult to see and read.
Top of The Page Is Ad Space
Users have become accustomed to seeing advertisements in the form of banners at the tops of web pages, and their automatic reaction is to ignore them.
Many of them having moving images or changing messaging that users are so used to now, they just gloss over them.
They haven’t asked for the banner ads to be there and just regard them as an annoyance. So where does that leave your image carousel? In many user’s eyes, it’s just another advertisement for them to ignore.
A discussion on UX Stack Exchange confirmed this, with Adam Fellows revealing that during tests, almost all users completely missed content delivered by carousels, chiefly because of their similarity to adverts in terms of positioning on the page and content.
And with so many different messages being delivered in one space, there’s no focus for the user, and any impact is lost.
Who’s Calling the Shots?
A rotating image carousel takes away a user’s control of a website.
They have no control over what image they see and when, unless there’s a pause function.
It’s not something that makes people feel comfortable online. It’s the user who wants to call the shots on a website, but instead, they’re seeing offers slide by one after the other.
This can lead to unplanned interactions when an image the user wants to click suddenly slides onto another image which they end up clicking on. Frustrating!
Catch the Call To Action
To make a sale, you need the user to click a button.
On some carousels, the location of the button changes from slide to slide, or a user can be just about to click when the image automatically changes and they have to adjust.
Another frustrating experience which could result in a lost conversion opportunity.
Users don’t want to play chase the button when they’re on a site to shop.
The Carousel Has Had Its Day
Much like their fairground predecessors that enjoyed popularity way back when the carousel on e-commerce sites has enjoyed its day in the sun.
When the idea was new, they attracted attention purely because they’d not been seen before. Now they’re everywhere, people are used to seeing them, and they’ve become like wallpaper.
Web pages simply have more interesting elements to offer visitors.
I Don’t Know What to Do
Being single-minded is one of the best ways to focus the attention of a user. Ask someone to do multiple things at once, and they won’t know where to start, and will almost certainly end up doing nothing.
And that’s a key problem with carousels, they deliver multiple messages in the same space in a short space of time and the user becomes unsure of what they’re meant to do.
That’s Not What I’m Here For
Following on from the above point, the multiple messages delivered by carousels are likely to mean that the majority aren’t relevant to the user and don’t align with their reasons for being on your page in the first place.
Again, this lack of single-mindedness makes the user do more work to find what they want, having to wait for the carousel to flick to the panel that interests them. And some visitors won’t wait, so that’s a lost sales opportunity right there.
The first thing a visitor does when arriving at a page with a carousel is to ignore it and start looking for elements on the page that are relevant to their requirements.
Website Carousel Best Practices – What Should Go on The Page Instead Of A Carousel?
I think it’s fair to say that we’re not big fans of the carousel. But it’s all very well criticizing. Is there an alternative?
Well, yes. Much like a newspaper, your above-the-fold web page content should lead with your most important content, or with your best selling product/s. Show visitors what other people are buying most from you. Or elevate the section of content that’s generating the most interest to headline status.
If a product’s selling well or content is performing well, it has a much better chance of being the reason why someone is visiting your page than anything else, so it deserves its place above the fold.
And if you’ve got a new product or service you’re promoting or discounting, put that above the fold. That’s news and deserves a prominent place on your site. People are immediately drawn to things that are new, or if you’re offering them the chance to save via money off or two-for-one deal.
If your page is explaining what your company does, just include the one main message that encapsulates your business in the space above the fold.
Don’t cram it with multiple messages, so that everyone from HR, to Finance, to Marketing gets their messaging up top.
It’s unlikely any visitor to your site is there to hear from all your management team. They are there for a specific purpose, and you need to deliver messages with clarity so that visitors understand what you can do for them and are therefore more likely to buy.
Personalize Your Page
Do all you can to give page visitors a unique experience.
If they are returning visitors, use data from previous experiences and browsing history to serve up new and relevant content for them. Even deliver content that’s relevant to where the user is from. Carousels are too impersonal, too ‘catch-all’ that they end up doing nothing.
So, if you see a competitor site with a 3 or more image carousel right up top, let them keep on going round and round and carry on thinking they’re doing the best thing to get conversions.
Because now you know the truth about carousels, you’ve got plenty of new ways to make your page a more effective selling tool.