Ecommerce and Retail • Ecommerce Design
How to Design an Awesome Product Listing Page
Rob Marchant
19 Jun 2019 • 8 min read
19 Jun 2019 • 8 min read
If the product page were an employee, it’d belong in the sales team. Its primary responsibility is to sell the product to customers, using every persuasive tool and technique in its arsenal, convincing the customer beyond any reasonable doubt that they need the product in their lives.
An exceptional salesperson intuitively understands a customer’s needs, can anticipate the questions that will be asked, and answers every question with accuracy. An exceptional ecommerce product listing page should do exactly the same thing—a standard product listing template won’t cut it. In this article, we’ll talk about what your product page needs to be a first-class, effective salesperson, who fully encompasses design best practices, and can close sales with effortless ease.
The product name allows the customer to determine whether they’ve found their desired item, so should include key identifying information. This might include the product’s brand name, a concise description, and the model number, for example “2017 HASA TI800 Shimano 105 22 Speed TITANIUM Road Bike 56cm”. A precise product name assures the customer that they’re in the right spot.
High-definition, multi-angled product imagery will instil confidence in the quality of your products, and allow the customer to get a good understanding of the item’s composition, helping to inform their decision to purchase. The ability to zoom is essential, as is being able to quickly navigate through the images. It can also be helpful to add some photos of the product in use, demonstrating how the item is typically operated.
Great product imagery can be achieved with a digital SLR camera, a white background, and a little experimentation. Alternatively, you can consider hiring a professional to do the work.
A rare bargain is difficult to resist, and should be communicated clearly using sale labels, percentage reductions, and a countdown for when the sale is over, each yanking on the customer’s attention and encouraging them to buy.
If a product is discounted when purchasing in bulk, this information can be laid out in a table, displaying the purchasing brackets (e.g. 5-10 items), and the discounted unit prices for each bracket. This is essential if you’re a wholesaler.
Free shipping is another incentive that should be clearly highlighted to the user, and can be made more potent by guaranteeing same or next day delivery when ordering before a certain time of the day.
This is where much of the sales magic happens, in the form of short, concise bullet points that explain why the product is worth buying. Good examples would be “the world’s most popular vacuum”, or “20% longer lasting than the leading competitor”. Each bullet point should help to nudge the customer towards the add to cart button.
The product’s brand can also help to close a potential sale, and should be displayed clearly near the top of the page, in the form of an easily-identifiable logo.
Stock information is also essential for the customer, who should be able to quickly identify whether the product is currently available for purchase. Displaying a stock level below a certain threshold, with wording such as “only 3 left!” can utilise the scarcity principle, making the product seem more valuable because of its apparent rarity, encouraging the customer to purchase before it sells out.
These small but effective approaches all help to create a high converting product page.
This might be considered the most important thing on the page—a clear, highly visible “add to cart” button. A call to action is most visible when painted with a colour that isn’t used anywhere else on the site, creating a high level of contrast. If a webstore’s main colour is red, and the “add to cart” button is also red, it won’t stand out as much, which reduces the chance of the customer spotting it. A great way to test the visibility of your call to action is to squint your eyes—if it can still be easily identified, you’re onto a winner.
Wording for the call to action should be kept simple, with a clear action for the customer—”add to cart” or “buy now”. This kind of active language is great for convincing the user to take action.
After clicking on the call to action, displaying visual feedback such as a spinning icon will help to communicate that the action worked, assuring the customer that their much-wanted product is about to land in their shopping cart.
Selling bikes? The customer might need a pump for their tyres, a helmet, or a security lock. Selling clothing? The customer may want to “complete the outfit” by purchasing a matching pair of pants or shoes. These “cross-sell” items are terrific for increasing your revenue, and should appear above the add to cart button, allowing the customer to select which additional items they’d like to purchase, before adding everything to cart with one easy click.
It can be frustrating to find a competitively-priced product, only to be presented with a high shipping cost when reaching the checkout page. Adding a shipping calculator to the product page prevents this issue, allowing the customer to determine their shipping costs before deciding to move forward with the purchase.
The calculator itself should be flexible enough to recognise either postcodes or suburbs, and ideally, offer a range of shipping options that vary between speed of delivery, just in case the customer wants to pay a little extra to receive the item more quickly. With Neto’s ecommerce software, these features are available as standard for all webstores.
The product description is where many of the customer’s questions should be answered, including key product information, its features, specifications, and anything else that might inform the decision to buy. Try to anticipate every question that might arise in the customer’s mind, negating the need to contact you for more information, and helping to close the sale rapidly. The description is where the bulk of the product page content will sit, so it must be as extensive as possible.
Product information can usually be lifted from the manufacturer’s website, but you should consider rewording in order to avoid duplicate content penalties, which can affect your SEO ranking.
For certain types of expensive product, the customer will likely need even more information to convince them to buy. Buying guides and product articles are great for this, as they go into further detail for the item, and can include product comparisons, pros and cons, and other useful information.
Other types of valuable info include sizing charts, FAQs, and business policies such as how returns are handled, or data privacy practices.
Social proof is a big deal, with almost 95% of shoppers reading customer reviews before deciding to make a purchase. Reviews are even more important for expensive, “riskier” items, so it’s essential that you allow your customers to review your products, and position them in an easily accessible spot on the product page.
Customer reviews can have the added benefit of filling information gaps for the product, with comments such as “I ordered a size higher than usual, and it fits perfectly”, which you might consider adding to the product description to better educate potential buyers.
Reviews also add potential SEO value to your site, with fresh and unique content that search engines love, pushing your webstore nearer the top of search engine results pages (SERP).
**
With a combination of the right elements, your product page can become a master salesperson, successfully persuading the customer to click on the “add to cart” button. Desire will be heightened, questions answered, and assurances made, culminating in a fruitful, happy purchase, with the possibility of having one of the best converting ecommerce sites in your industry.
Looking for more information on how to design a successful webstore? Check out our design guide.
