E-commerce carousels: when to use one and how to design it

Use a carousel when the items are similar to each other and none of them has to be seen by everyone. For an offer that matters, a static banner or a grid works better, because lots of people scroll down and skip the carousel entirely. If you keep one, hold it to a few items, show that there’s more content, support swiping and don’t let it rotate on its own.

Why every store has a carousel

Nielsen Norman Group’s carousel guide names the biggest upside: several pieces of content share the same prime spot on the homepage. That helps settle the internal fight over which campaign gets the top. The same guide names the biggest downside: people often scroll right past and miss everything that isn’t in the first frame.

The same article flags a second risk. Designers think about the set of images, but visitors see only one. If that single image has little to do with the business, people leave with the wrong idea about the store.

The NN/g guide suggests considering a single static hero image instead of a carousel. With one image, the choice tends to be stronger, and the site menu no longer competes with something that moves. The guide also recommends repeating the carousel’s important content somewhere else in the navigation.

In practice, the question is simple: if someone sees only the first frame, does the store lose anything? If it does, that content can’t depend on the carousel.

How many items fit

The guide recommends five frames or fewer. Past that, it gets hard to remember what you’ve already seen and to find an item again.

NN/g’s article on mobile carousels looks at the limit from another angle. Most people stop after viewing three or four pages of a carousel. So the last item should be three or four taps or swipes away. When each page shows several products, more items fit without breaking that rule.

With lots of items, the same article suggests swapping the carousel for a list, where people can jump straight to any product.

Show that there’s more

The mobile article separates strong cues from weak ones. The little dots under the image are weak, because they’re small and easy to miss. An image cut off at the edge of the screen is a strong cue: people get right away that there’s more content beyond it.

More rules from the main guide:

show how many frames there are and which one is on screen;
keep the controls inside the carousel, not below it;
make buttons big enough to see and click, even on top of a busy photo;
if there’s one button per frame, make each one different and true to the frame it opens.

The first item carries more weight than the rest. The mobile article compares it to a letter of recommendation for everything after it: if it isn’t interesting, people ignore the whole carousel. Put what your audience cares about most first, and keep the items closely related.

Swiping on mobile

On a phone, people swipe to see the next item. The same article treats a carousel that doesn’t support swiping as a real failure. It also warns about a conflict on the iPhone: in Safari, swiping in from the left edge takes you back to the previous page. Some white space around the carousel helps people swipe away from the edge.

Why it shouldn’t rotate on its own

Jakob Nielsen’s article on auto-forwarding describes a study in the U.K. The participant was looking for washing machine deals on the Siemens site. The offer sat in the biggest block on the homepage, but the block switched panels every five seconds. She gave up and decided there was no deal at all. In that example, the promotion was visible only 20% of the time.

The same article lists other costs of rotation. People with motor difficulties miss the click before the panel disappears. Slow readers don’t finish the text. And anything that moves looks like an ad, so it tends to be ignored.

The main guide allows rotation with care. If you use it, time each frame by reading speed, using three words per second as a guideline. On mobile, the guide says not to rotate: the page gets slower, and people have already scrolled down by the time the frame changes.

What accessibility requires

WCAG 2.2, the W3C accessibility guidelines, includes success criterion 2.2.2 at level A. Content that moves on its own, lasts more than five seconds and shows up alongside other content needs a way to pause, stop or hide it. An auto-rotating carousel fits that case exactly.

The carousel pattern in the W3C ARIA Authoring Practices Guide spells out the minimum for keyboard and screen reader users. ARIA is the set of attributes that describes a component to assistive technology. The pattern asks for:

previous and next buttons;
a button to stop and restart rotation, as the first focusable item inside the carousel;
rotation that stops when keyboard focus enters the carousel and only resumes if the person asks;
rotation that stops while the mouse is over the carousel.

The same pattern explains the risk for screen reader users. If the slide changes without warning, someone hears an item on slide 1, and the next command lands on slide 2 without any sign that the context changed.

How it shows up at Le Biscuit

In the Le Biscuit case, the desktop storefront has four blocks: the promotional bar, the category carousel, the offer grid and the best sellers carousel. The store sells thousands of home and lifestyle products, and the storefront had to handle the merchandising calendar without falling apart.

In that layout, the offers sit in a grid, where they all show up at once. The carousels hold sets of similar items: categories on one side, best sellers on the other. That’s the split the sources above point to. What has to be seen doesn’t depend on a frame rotating, and the carousel holds what people can explore if they want. The blocks come from a component design system tied to the VTEX IO content schemas, which is the topic of the post on headless VTEX IO.

Where the sources disagree

Auto-rotation. The main guide accepts rotation with careful timing and a continuous loop. Jakob Nielsen’s article says a carousel should only change when the person asks.
How many items. The main guide says five frames or fewer. The mobile article counts steps to the last item, three or four, and allows more items when each page shows several.
The value of the top spot. The main guide lists putting more content near the top of the page as an upside. The same guide and the mobile article show that many people scroll right past and never see anything beyond the first frame.

The common mistake

The common mistake is using a carousel to fit every campaign competing for the homepage. It settles the internal fight and hides the problem: only the first frame has a real chance of being seen. Decide first which content has to be seen and give it a fixed spot. Leave the carousel for what people can explore if they’re interested.