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 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


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 Editor at Econsultancy. He lives in Manchester, England. You can contact him at, follow at @herrhuld or connect via LinkedIn.

1244 more posts from this author

You might be interested in

Comments (1)


Oskar Kleine-Kalmer, Marketing & ECommerce 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...

about 2 years ago

Save or Cancel

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 Digital Pulse newsletter. You will 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.