SHARE

Most Popular Reads

Arguably the most important pages in your e-commerce store are the product detail pages. You know, the ones with your fancy photos, nice big “Add to Cart” button, description and price? When we created our shopping cart software BigCommerce, we spent a huge amount of time making sure the product pages were perfect.

But what makes a good (high converting) product page? There are certain elements that have been proven to increase conversion rates, such as having a bright, bold “Add to Cart” button shown above the fold (in the first 600 vertical pixels of the page), crisp and detailed product photos and of course good prices.

In this post I want to share product pages from sixteen of the top retailers in America and Australia. You will of course notice a lot of similarities on their product pages, but I’m sure you’ll also notice a lot of small differences. For example, the position and size of the “Add to Cart” button varies quite a lot between retailers.

Numerous studies have been done that show the “Add to Cart” button produces the best conversion rate when it’s shown above the fold in a bright color and toward the right side of the page, so why do some of the biggest retailers in the world show it in other places, potentially costing them millions of dollars in sales every week? Who knows.

Take a look at each of the sixteen product pages below and then leave me a comment to let me know which you prefer in terms of layout and why.

Amazon.com

Zappos.com

Sears.com

BestBuy.com

Dell.com

Audible.com

DealsDirect.com.au

EziBuy.com.au

Shoes.com

Apple.com

DStore.com.au

Sony.com

Walmart.com

Myer.com.au

Macys.com

NeimanMarcus.com

Leave a Comment
  • Phil

    I find it interesting how EVERY site, has the picture on the LEFT side of the screen… I know I’ve read that people like to look at pictures, but I didn’t realize that having them on the left like that, was so important.

  • Hi Arielle and Mark.

    Is this Modcloth shop on the BC platform? I notice their designers http://retail.crowdint.com/ have the BC logo on their home page.

    I’ve just had a 5 min play and this is def a BC shop.

    Very good.

  • Hi Arielle. Very nice – thanks for sharing.

  • Hi Mitchell,

    I’d love to suggest ModCloth. Although it is not a big name like Macys but the sales and growth is amazing. True story of real start up: from 2 person to a small company that has about $1 mi in sales every month. They were featured on BusinessWeek as one of Best Young Tech Entrepreneurs 2010, 2009.

    Long story short, in 2009, they had about 2 mi unique visitors per month. Their front design is like most of other stores like Forever21..:
    http://www.modcloth.com/

    However, when it comes to SHOP section, they stand out! Why? Check this out:
    http://www.modcloth.com/store/ModCloth/Womens/Dresses/Razz+Time+Dress

    1. Big Description/Measurement section next to also Big Picture. (also nice, personal, engaging description)
    2. Right below the title is engaging tools: not just Sharing buttons but also Love Button which serves like a list for the buyer/member of the site. This helps big time! Just like on etsy, you add an item to favorite (love list)
    3. Be the buyer section: This is what set ModCloth apart from every other competitor. It is another way to keep the audience engaged and help the buying department: no more left over inventory, customers have a say in your stock!

    I wanted to implement this to my site but I don’t think a static page can do its justice since it needs many features: inserting from my product list, voting plugin etc. So I hope BigCommerce can take this into consideration :)

    4. Huge Add to Cart, Add to Wish List, Add to Other wishlist: Amazon etc
    5. Recommended Items are right below “Add to Cart”
    6. Under Review, another reminder for customers: “Related Items”, “Recent Views”

  • Simon

    Traditionally the best converting add-to-cart button is the large, orange one as close to the price as possible. Interesting to see the add-to-cart button in the upper right hand of the page becoming more popular. I think it was getelastic.com ecommerce blog where I read a test on that and the results suggested a better conversion rate. One to test ourselves… Mitchell just quickly are you guys seeing much activity on the wibiya bar?

  • Hi Roger. It’s possible but honestly I wouldn’t recommend it. Customers are accustomed to certain elements being placed in certain locations and none is more important than the Add to Cart button. Also if your products have variations they would have to appear with the second add to cart button as well which would mess up your layout in my opinion.

    You can change the layout, etc of the button with CSS, sure. Here’s an article to help you out: https://support.bigcommerce.com/questions/920/Can+I+Customize+My+BigCommerce+Template+using+HTML+%26+CSS%3F

  • Mitch,

    Is it possible to have two “add to cart” buttons on a product page. A button above the fold and a button at the bottom so the customer does not have to scroll back to the top after reading content or watching a YouTube video?

    Can you change color, size and placement of the “add to cart” button in BigCommerce?

    Roger

  • Hi – Neiman Marcus is definitely the worst of the lot. I’m all for simplicity of design, even to the point of wanting it ultra clean – but not so far as to eradicate the ‘buy’ option from sight.

    Meyer, Sears, Zappos were my picks (can you tell I hate busy pages?), followed by Shoes and Ezibuy. All have easy to find buy buttons.

    I do like the super clean look of the N.Marcus site and would love to see a template option that offers a similar, non-intrusive, zen-like atmosphere so that the product photos are the most prominent thing. Do let me know when you guys add one….

    I’m currently setting up our twin sites under CanadianCalibreInc and CCIshop – so far the Big Commerce software is handling our rather particular needs rather well and we’re looking forward to launching towards the end of August, if all goes as planned.

    Dawn.

  • Hi David. YouTube is the best way and you can easily add a YouTube video to a product description in BigCommerce by clicking the “video” button on the WYSIWYG editor.

  • Hi James. Do you mean the add to cart button? They’re on all product pages and other areas of the template such as the home page.

  • James

    I cant seem to find the ‘add to cart’ logo on the BigCommerce templates. Is this something we have to install ourselves (or am I missing something quite obvious!). Thanks.

  • I also like this idea.

    Note that I’ve found that many people are visiting my web page, but not filling in the form and not buying.

    I note that when I show someone the product they usually buy it.

    How can I “show” the people the product online? I have added videos to my web site.

  • Dell and Walmart are the only designs I really don’t like. Neiman Marucs and Myer are boring.

    I’d be interested in knowing whether left-handed people also prefer the ‘Add to Cart’ button on the right hand side of the page? Is it because we read from left to right or because most people have the mouse on the right-hand side of their computer?

  • Hi Don. It’s up to you. If you need some of the new features it won’t be a long wait. If not you can go ahead and launch whenever you want to. Regardless, it’s easy to upgrade when the new version does come out.

  • Great idea Angus, I’ll see what our team can come up with.

  • Interesting how UNcluttered most pages have become. I would think people still want MORE information about a product that they cannot hold physically, touch, smell or possibly even judge size (by sight of the image alone), not less.

    I also find it interesting that Walmart.com, Macys.com and NeimanMarcus.com do NOT have an “Add To Cart” button, (of any color), above the fold (or at least not on the part of the page we can see, above)!

    Also, kind of fascinating to see how most of the retailers, above, went with ‘opposite’ colors, on the color wheel, or ‘complimentary’ colors to make the button stand out more. Even when it made the sight not look as ‘pretty’ as it may have been.

    Now, I just wonder what their individual conversion rates are, while keeping in mind those things mentioned above.

    Very interesting, “half a”, case study!

    Thanks for reminding me to think this way. I tend to want to make the websites look ‘designed’, color theming them instead of using complimentary colors to make things POP, which I obviously need to remember to do more of!

    Thanks again,

    ~WebBiz

    P.S. We just got our store up, and running properly, now it’s time to refine our design. Thanks for the reminders!

  • Mitchell! they probably don’t have your expertise! ;)

  • Jack

    I have to say Amazon and Dell I find quite hard to navigate. In particular Amazon generally has too much content on their pages and it’s probably in fact one of the worst sites to navigate around. Sears.com stands out well and DealsDirect.com – On the contrary Audible.com has too much content as is quite messy. I see what your getting out – we should give it a try.

  • I would definately say the ZAPPO’S and DEAL direct

    It is near the pricetag and cannot be missed.

  • I like the above Product Detail Page the best

  • Hi Mitch,

    From my perspective, the most appealing storefronts are:

    Amazon
    Audible
    Deals Direct
    Sony

    This due to the prominent placement, size and color of the Add to Cart button.

    The least desirable storefronts were:

    Dell
    Macy’s
    Neiman Marcus

    This is because with a 5-second scan of the page, I was not able to discern the presence of an Add to Cart button or how otherwise to buy the product. Some had too much colorful clutter competing for your attention.

    We are very impressed with BigCommerce and are looking forward to going live with our new store, Cryptocritters. We have been selling on eBay, eCrater, Etsy, CafePress and Zazzle for years and we think that the powerful marketing tools you provide and going to make a big difference in our business. Your instructional videos have been especially useful.

    The main impediment to finishing our store has been the need to dedicate the majority of our time to the activities that actually bring in the cash to pay the bills. I just recently returned from a consulting assignment in Armenia.

    We are wondering if we should delay the deployment of our store until BigCommerce Version 6 is available so we don’t have to make a lot of changes later….

    Don Rudisuhle
    Cryptocritters LLC

  • Angus

    More interesting would be to datamine Big Commerce sites and let us know who has the best conversions so we can all learn. There are well known sites out there converting in the 20% range and one consistently in 30% to 50%. Like to know how this compares to Big Commerce sites and you could even tell us which of your provided templates converts best.

Less Development. More Marketing.

Let us future-proof your backend. You focus on building your brand.