36. Must have sticky add to cart header

After a user scrolls below the main (prominent) add to cart (or buy now button for one product stores), they usually lose interest or leave if they can't buy without scrolling back.

You want to remind your potential customers that they can get your product now if you want to make them buy it.

That's why a sticky add to cart header is mandatory and very efficient in increasing conversions.

If you want to make a seamless shopping experience scroll down the sticky header and make it disappear after scrolling back up. This is a popular practice that doesn't disable quick navigation for users and renders more attention to the sticky header by making it pop.

Elements that should be included in your sticky add to cart header, ordered by visual hierarchy from left for desktop and from top to bottom for mobile:
  • product image,
  • product title,
  • product variant dropdown selection,
  • product quantity selector with buttons,
  • product price (if on sale show discounted product price as well and old crossed out to the left),
  • add to cart button.
BONUS TIP: Add a shadow behind the add to cart button to make it unforgettable when scrolling.
Read detailed explanations on other rules
The most crucial page on your store is your product page.

If you properly construct your product page, you will see increased revenue.

If you do the opposite, any marketing efforts will fall short of expectations.

That's why you need to concentrate your design work on product page optimization.

© 2023 Mantas Digital. All Rights Reserved.