Conversely, M&S chooses to have a “Continue Shopping” CTA. It is an uncoloured clickable link that is placed in the bottom left corner, whilst the checkout CTA is a brightly coloured button that appears on the right centre of the cart page. The visual hierarchy is clear.
Just like Zara’s cart page, M&S incorporates its brand colours into the design: green, white, and black. Being the only green feature on the page and surrounded by plenty of white space, the “Checkout securely” button is striking.
The central, right-aligned placement is common across eCommerce sites and works very well on M&S’ page. It catches the user’s natural eye movement as they move from left to right – from the product they have added to their cart to the total cost.
Despite placing it in the bottom right corner, Zara highlights the checkout CTA by using a “sticky” button. The “Continue” button is stuck to the bottom of the screen, meaning that it is always clickable and visible to the user wherever they scroll on the page.
Trafiki Tip: Large sticky checkout CTAs are particularly effective on mobile devices, where the smaller screen means that users have to do far more scrolling. A sticky button will make it easier for them to proceed to checkout and thus subtly encourage them to do so.