{"id":1148271,"date":"2021-10-06T09:02:29","date_gmt":"2021-10-06T13:02:29","guid":{"rendered":"https:\/\/www.practicalecommerce.com\/?p=1148271"},"modified":"2022-09-01T12:25:41","modified_gmt":"2022-09-01T16:25:41","slug":"3-rule-breaking-product-pages-designed-for-conversions","status":"publish","type":"post","link":"https:\/\/www.practicalecommerce.com\/3-rule-breaking-product-pages-designed-for-conversions","title":{"rendered":"3 Rule-breaking Product Pages, Designed for Conversions"},"content":{"rendered":"

Most ecommerce platforms have a standard layout. Their product page designs are relatively conventional, with a left-to-right display and a dominant image. Calls-to-action almost always appear near the top, especially on mobile.<\/p>\n

But the norm isn’t always the best. Brands that understand their audiences can defy convention and leverage prime real estate to boost conversions.<\/p>\n

Let’s look at three online stores that are breaking the product-page rules.<\/p>\n

3 Product-page Rule Breakers<\/h3>\n

Bird Rock Coffee Roasters<\/strong> knows what’s important to customers. So it provides crucial detail<\/a>s above the CTA \u2014 for desktop and mobile \u2014 including the bean’s growth altitude (which correlates to acidity) and the roast level. This helps shoppers make instant buying decisions. Bird Rock realizes that picky coffee drinkers often value specifics over price.<\/p>\n

\"Bird

Placing details above the CTA makes sense when it drives the purchase. Source: Bird Rock Coffee Roasters.<\/em><\/p><\/div>\n

The image above is on a desktop. In a conventional mobile view, shoppers have to scroll two or more screens to reach the CTA. But not for Bird Rock. Even on mobile, Bird Rock places the most sought-after details above the CTA, lowering the likelihood of shoppers looking elsewhere for answers.<\/p>\n

—<\/p>\n

Nixon<\/strong>, a lifestyle accessory brand, delivers different experiences<\/a> on mobile and desktop. On desktops, it places product imagery in the center of the page, between the description and CTA. But on mobile, the main image displays first, followed by product options, add to cart, and description.<\/p>\n

The desktop view facilitates reading left to right, showcasing key reasons to buy. Both views provide thumbnail images of each variant to speed up choosing a color and material configuration.<\/p>\n

\"Nixon

A three-column product-page desktop layout lets Nixon.com spotlights the main product images.<\/p><\/div>\n

—<\/p>\n

Gymshark<\/strong>, which sells fitness apparel and accessories, focuses on product images. On a desktop, grids of photos (and sometimes videos) take up the entire left side. On mobile, thumbnails are large enough to see core details. With a fixed CTA on mobile, shoppers only need to look at the bottom of the screen to add the product to the cart.<\/p>\n

Displaying additional images automatically with easy enlarging reduces clicks and swipes, lowering abandonment and increasing conversions.<\/p>\n

\"Gymshark

Gymshark spotlights several product views on desktop and mobile.<\/p><\/div>\n

What Drives Shoppers?<\/h3>\n

Millions of ecommerce sites look eerily similar. Merchants should consider their audience’s desires and behaviors<\/a> to differentiate from competitors. Heat and tracking maps can provide valuable insight into where visitors leave. Detailed analytics tell us exact stopping points in the conversion process.<\/p>\n

Reassembling product pages requires a balance of design, functionality, and consumer expectations. And product type plays a big role. A lifestyle company has different challenges than one selling power tools.<\/p>\n

When wireframing new product page layouts, consider:<\/p>\n