An “Add to Cart” button is the most important button on the product page. It needs to be highly visible above the fold. It tells a customer exactly what to do after viewing the product images, reading the product descriptions and reviews, and seeing the product price.
How to design a great Add to Cart button
- Choose a color that both contrasts against the background and fits your brand. The color should also be different from the one you use on the price.
- Make sure the Add to Cart button attracts the most attention on the page, compared to other buttons or links. You can do this by surrounding it with some whitespace and making sure it’s larger than any surrounding text or buttons.
- Make sure the text on the “Add to Cart” button is clear and legible.
Be descriptive
Test descriptive labels for the button. For example, if you promise to deliver the next day, you could test a button that says Buy Now to Get It Tomorrow.
Other ideas from GrowCode:
- Buy Now to Get 50% Off
- Buy Before 5 PM for Free Delivery
Which color?
Best colors
- Red: taking urgent action
- Green: for products/services relating to the environment, psychology, peace
- Orange/yellow: exciting, warm, happy
Worst colors
- Black: dark and gloomy, blends with the background
- White: blends into the background, no emotions
- Brown: boring and ugly
Mobile
Please refer to best practice #68 to read my recommendations for mobile.
Examples