This also goes for the “Continue to Checkout” button in the Cart: make it sticky on mobile.

On desktop, you can either do the same as on mobile, or you can have a large button (or two – one at the top and one at the bottom of the Cart page) with a contrasting color.

See best practice #69 for some more thoughts on the CTA button on the product page.

 

Let’s look at how IKEA does it.

I think it’s the first time I see a design like IKEA’s. Usually it is a full-width bar at the bottom and sometimes the top.

The main issue with this one example though is that the icons they chose are not standard and thus not easily understood, and there is no ALT text when hovering the mouse to see what they are.

 

On desktop:

 

When clicking ‘View Price’, it expands the panel upwards with the product title, one-liner, price, and rating.

 

 

On mobile, it looks almost the same. They just removed the add to wishlist button.

 

 

 

 

Some nuance…

I recently talked with one of the CRO agencies I work with about this and they tested it out on a few sites. The tests were all inconclusive. So I’m not convinced that this will move the needle for your store. My advice is to hold off on it and just make sure to have big and contrasting Add to Cart buttons for now. 

On the other hand, Inflow claims to have had a lot of success with having a sticky Add to Cart CTA. So I’d recommend testing it for your store to know if it moves the needle for you. This also goes for the “Continue to Checkout” button in the Cart: make it sticky on mobile.

On desktop, you can either do the same as on mobile, or you can have a large button (or two – one at the top and one at the bottom of the Cart page) with a contrasting color.

 

EXAMPLES