When I A/B tested that idea and added CTA buttons in product cards, it increased conversion rate and revenue that's why I recommend doing this. And that's not taking into account how much it affected the CTR of product cards (micro-conversion)
But it's crucial to add a relevant CTA button there.
Some stores display "Add to cart" buttons in the product cards, but if they sell complex or expensive products, shoppers are not ready to add a product to the cart from collection pages because they need to get more info about a product before that.
But it highly depends on the type of business you are running.
If you are selling products where users need to read about the product (find out specific information, read in detail how the product works, about its characteristics), then it is logical that you need to add buttons that will lead shoppers to the product page so that he can find out all this.
But if you are selling simple products, visually driven products where details don't matter a lot, and products which are easy to use/understand, then it makes sense to encourage the user to add the product to the cart.
So think carefully about your particular case.
Recommendations about how to implement this guideline
- Add "View details", "Shop now", "Learn more" buttons that will take users to a product page if you are selling complex products
- Add "Add to cart" buttons that will streamline the shopping process if you have simple, visual products where you don't have to provide users with a lot of product information.
- Consider using 2 buttons at once (i.e. Add to cart and View details) with different visual hierarchy based on your case (for simpler products, the "Add to cart" can be a primary button (more prominent) and the "View details" can be a secondary button (less prominent).
- Consider adding "Quick view" button that will open a modal window with product details, so users will not need to go back and forth between product categories and product pages if they are unsure if it's the right fit (it's relevant for Desktop devices).
- For the Desktop version of the category pages, you can show the buttons on hover, so all of them will not be visible in each product card at once because it will be too distracting.
I have to say that it's hard to implement this guideline if, on Mobile devices, you have a layout with 2 products in each row. In that case, you can't add standard CTA buttons to each product card, as it will look awful. At the bottom of this article, I will show you an example of how it can be done. In my cases, I always had 1-product layout on collection pages and it worked much better than 2-products layouts (when I A/B tested it).
Now let's look at some bad and good examples for inspiration and a clear understanding of how to follow this guideline.
A bad example from Cupshe:
They don't have any CTA buttons even when I hover over product listings. They don't motivate shoppers to take further down the funnel.
A bad example from America Eagle:
They don't have any CTA buttons in the Mobile version of the category pages. Yeah, you can open a product page by clicking on the product image and title, but there is no clear call to action to motivate users to go through the funnel faster.
A mediocre example from Mavi:
They show a Quick View button when I hover over product listings and from the modal window I can add the product to the cart, but the problem is that they don't show any product details or product images there
A good example from PuraVida in Mobile view:
They show the Add To Cart button in each product listing for Mobile users (while for Desktop users, they show it after hovering over a product listing). In their case, it's a reasonable approach, because they are selling cheap bracelets and jewelry and shoppers can purchase it even from product categories.
A good example from PuraVida in Desktop view:
After you hover over a product car, you see all available product variants, arrows to see all the images and a very prominent Add to cart button which encourages users shoppers to go down the funnel.
A good example from Tinyritauls
They have a very prominent Add to cart button on each product card on category pages. They are selling very simple visual-driven products where ATC buttons are very relevant since users don't necessarily need to read detailed info about the product.
An interesting example from Gymshark
They have 2-product per line layout on collection pages, so they can't use standard CTA buttons. But since it's crucial to have some CTA elements, they added 2 icons for adding products to the cart (top left corner) and to the wishlist (top right corner).
Even though it's not so powerful as standard prominent CTA-buttons (like on Puravida or Tintyrituals), it's better than nothing.
I did a lot of A/B tests changing everything in product cards and many of them were very successful (i.e. the 3rd A/B test below where Revenue Per User increased by 28.13%)
Results of the 1st A/B test (the results of this A/B test are displayed in the screenshot above) where we added the irrelevant button in different designs, so you can see how these simple changes can significantly impact your revenue (it was an unsuccessful A/B test, but very insightful, which helped us in the future to improve the user experience on category pages)
Variation 1.
- Revenue per User decreased by 5.06% from $5.53 to $5.25
- Ecommerce Conversion Rate decreased by 4.35% from 7.58% to 7.25%
- Average Order Value decreased by 0.65% from $72.95 to $72.48
Variation 2:
- Revenue per User decreased by 6.33% from $5.53 to $5.18
- Ecommerce Conversion Rate decreased by 6.63% from 7.58% to 7.07%
- Average Order Value increased by 0.38% from $72.95 to $73.23
Results from the 2nd A/B test:
- Revenue per User increased by 8.51% from $4.35 to $4.72
- Ecommerce Conversion Rate increased by 3.75% from 5.87% to 6.09%
- Average Order Value increased by 4.5% from $74.05 to $77.38
Results of the 3rd A/B test:
- Revenue Per User increased by 28.13% from $3.84 to $4.92
- Ecommerce Conversion Rate increased by 18.95% from 5.12% to 6.09% with 98% statistical significance
- Average Order Value increased by 7.69% from $74.99 to $80.76
*Ecommerce Conversion Rate by Users and Revenue per User were calculated based on Custom reports in Google Analytics, so the numbers from the screenshot are not the most accurate. The screenshot is shown so you can see the graphs.
