Product page calls-to-action design

Learn how to create effective calls to action on product pages from our design ideas. Uncluttered CTAs on your eCommerce store can dramatically increase conversion.

1

Buy The Look

Nov 20th, 2014

Fashion retailers display products using models styled with a range of other accessories showing shoppers that these products look great together. Allow shoppers to purchase all the items together with a ‘Buy The Look’ call to action so that they don’t need to navigate to different product pages to add each of those products to their cart. This is also a good approach to recommend products.


eCommerce product page secondary CTA: Buy The Look

eCommerce product page secondary CTA: Buy The Look

2

Write a review

Nov 20th, 2014

Encourage customers to leave a review for future shoppers by providing them with the option to write a review directly on the product details page. Make it simple and easy to use. Some shoppers may have a limited attention span. You can let them leave a quick star rating on a scale of 1-5 or something similar. You could also ask them to rate on different aspects of your product along with the overall rating.


eCommerce product page secondary CTA: Write a review



eCommerce product page secondary CTAs: Write a review

3

Social Sharing Buttons

Nov 19th, 2014

Shoppers often use social media to bookmark their favorite products or share what they have purchased. Social sharing can be considered as a secondary call to action on the product page as it can help increase the awareness of the product among a wider audience. Identify which buttons to include and where to place them based on the habits of your shoppers. Placing them close to the product images is one good option as the eye is drawn to photos. If possible provide incentives for sharing.


eCommerce product page secondary CTAs: Social Sharing Buttons

4

Add to Wishlist

Nov 19th, 2014

Shoppers might not always buy a product immediately. The Wishlist allows them to save the product so that they can review and purchase it later. It is also a good way to encourage repeat visits. Provide a Add to Wishlist button on the product page. Keep it subtle as it is not the primary call to action.


eCommerce product page secondary CTAs: Add to wishlist

5

Secondary CTAs

Nov 18th, 2014

A secondary call to action will provide an alternative conversion opportunity. You can ask your shoppers to add the product to a wishlist, share the product with friends and family, write a review about it or even encourage them to buy complimentary products along with it. From color, to size, to placement, ensure your secondary calls to action don’t compete with your primary CTA.

6

Notify Me

Nov 17th, 2014

How do you save a sale when the product is temporarily out of stock? Hide the buy button, ask for the shoppers’ email id and notify them when it’s re-stocked. You can also inform shoppers of an expected re-stock date. For more on how to design a product page for out of stock product variants visit Product Page - Product Options.


eCommerce product page CTA: Notify Me

7

Quick Buy

Nov 17th, 2014

Some shoppers know exactly what they want. Enable them to get to the cart directly with a Quick buy or a one step buy button on the product page. You can keep a ‘Quick Buy’ button along with the ‘Add to Cart’ button and order them based on your product, target market etc.


eCommerce product page CTA: Quick Buy

eCommerce product page CTA: Quick Buy

8

The ‘Buy’ button

Nov 17th, 2014

The primary call to Action on your product page should be the “Buy button”. Make it a large sized button in a contrasting color to the background that reads ‘Buy Now’ or ‘Add to Cart’ or ‘Add to Bag’ etc. In short, distinguish it from other elements of the product details page. Make sure it comes above all your secondary CTAs and that there is enough space around your add to cart button so that it is easy to spot and doesn’t feel cluttered.


eCommerce product page CTA: The ‘Buy’ button

You can also include visual cues in your add to cart button such as a shopping cart icon. And remember, always A/B test your primary CTA.


eCommerce product page CTA: The ‘Buy’ button

blog comments powered by Disqus

Top