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: