{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Sticky or fixed ecommerce elements are the features that appear to follow you down the page as you scroll.

They're an established tactic to improve ecommerce UX.

Here's a bunch of examples...

Sticky calls to action

Currys won't let you forget you're on a product page.

As you scroll through extensive product detail and specifications, including video, the right-hand side of the page is always dominated by price, an 'add to basket' CTA (call to action) and delivery information.

What's doubly nice is the way this sticky element switches from the right hand side to the bottom of the page as screen size is reduced.

Compelling stuff.

Currys sticky 'add to basket' on desktop

currys sticky add to basket

Currys sticky 'add to basket' on smaller 'screen'

currys sticky footer on smaller screen

Sticky filters

With category pages that feature lots of products, it makes sense to pin the filters to the left hand side.

Here, Nike uses a sticky size filter, to allow customers to narrow down their search for trainers.

My GIF is a bit grainy but you get the idea.

nike sticky filters 

Sticky product description

ETQ pins pretty much everything to its product pages, apart from product images.

The result feels like you're wafting through pictures of the product. It's pretty effective.

sticky etq 

Sticky header menu

Lush

Lush uses content throughout the ecommerce experience, as well as a curated homepage and category pages.

To ensure that users don't lose the aiblity to navigate easily and find what they want, Lush employs a sticky header menu.

It's chunky and clear, wherever you are on the page, on desktop or mobile.

lush sticky header menu on mobile

Oliver Bonas

Lots of ecommerce sites anchor their topmost header menu (search, basket and country icons).

Oliver Bonas goes further with a fully pinned header menu, including these buttons as well as the dropdown megamenu.

oliver bonas sticky menu  

Sticky product menu

Apple

Each of Apple's products is sold using several rich pages. For example, the iPhone has illustrated pages about design, cameras, specs, 3D touch, OS and technology.

In order to help the customer navigate this product information easily, Apple uses an anchored or sticky menu, which also features a 'buy' button.

On mobile, the 'buy' button remains but the other options are concertinaed into their own little dropdown.

'Product' menu on Apple's website

apple iphone product page

Apple's streamlined sticky menu with buy button on mobile

apple's sticky menus 

Off the peg sticky elements

Sticky ecommerce elements have been around for several years.

You can now add them fairly easily to ecommerce platforms such as Shopify.

The Icon theme includes sticky header and sidebars.

shopify sticky header

To learn more about ecommerce design, book yourself onto one of our training courses:

Ben Davis

Published 25 February, 2016 by Ben Davis @ Econsultancy

Ben Davis is a senior writer at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

899 more posts from this author

Comments (1)

Avatar-blank-50x50

Oskar Kleine-Kalmer, Marketing Manager at Aromatico Heinrich Schwarz GmbH & Co. KG

Thanks a lot for this blog post. These are some really great examples of how to keep the user engaged and make it easy to follow the desired call to action in order to boost conversion rates. I have to say, that it would have been interesting to have the ecommerce systems listed, although many of these functions seem not to be out-of-the-box functionality, but who knows...

4 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.