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’ 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.
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 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.
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.
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’s streamlined sticky menu with buy button on mobile
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.
To learn more about ecommerce design, book yourself onto one of our training courses:
Comments