How much effort have you put into your product page? Yes, I know you found information and images from the manufacturer and added them. Sure, you named the product and maybe if you were really working on good product pages, you took an extra picture of the product in use to highlight what it really looks like to your customers.
But I know most ecommerce sites don’t even go that far.
About 10 years ago I worked in retail and one of my jobs was to add products to our site, but only after everything else was done and if the boss couldn’t find anything extra for me to do. This was shortsighted and meant that they didn’t see much business from their online store. But if you don’t put any effort into your product pages, the natural outcome is little traction with your site.
It’s important to remember that your online users can’t touch your product. They can’t ask a salesperson a question or get specific feedback on how the product worked for someone they can talk to. Customers are reliant on the information you provide them to help them make a purchase.
Today we’re going to talk about how to design a great product page. Remember, from the product name to the reviews, your product page is a landing page. Its job is to sell your products to your customers.
If your product page is a landing and sales page, then the first thing you need to look at is the name of your product. This is the title of your page and you should spend just as much time thinking about this as you would for any blog post you want to rank well in search engines. The more descriptive your product name is, the better it is, at least up to a point.
We’ve all seen ridiculously keyword-stuffed Amazon product titles. We want to use a descriptive product name, but not crossover into the realm of these overloaded titles.
Take a look at these Mpow headphones on Amazon.
If you’re looking for waterproof Bluetooth sports headphones with controls on the headphones, the title is a great match. I think it’s getting close to being a bit long, but just by reading the product name, you get a summary of all the features that the headphones provide.
When you’re looking at your product names use the Google Keyword Planner to investigate what terms are ranking well for your product. Use these terms to help you craft a well-optimized title that will bring customers to your landing page.
When it comes to your product description, the first thing to ask yourself is “what questions will myom customers have”. A description that answers your customer’s questions poorly will mean they make a purchase they’re not happy with. Then they’ll want to return it, and you may get a poor review on the product.
According to Nielsen Group, 20% of missed purchases were because a product didn’t have the information a customer was looking for in the description. If users don’t see the information they’re looking for in your product description, they’re going to turn to Google. That means you risk having them find the product at a better price elsewhere. Making your customers search to get more information is just like losing the purchase and all future purchases from your customer.
As you write your product description ask yourself what questions the customer will have about your product? Your goal is to answer the questions and deflate the objections that customers will have so that they feel confident in their purchase.
Good product descriptions are jargon-free. They’re not heavy on marketing text, but are to the point and clear. If you’re talking about 5 different feature highlights, use bullet points so that readers can scan to get the information they need quickly.
If you’ve got many of the same types of products, say dishwashers, then take the time to standardize the language across suppliers. Don’t list measurements in inches for one product and then centimetres for other products. Standardize on one method, or if you deal with international clients let them choose what measurement they want to see. You can see a great example of this with Apidura Cycling bags. They let users change between inches and centimetres for their bag measurements. This puts their users in control.
After your product name and description, it’s important to focus on the images you provide to your customer. Remember, they can’t touch the product. They can’t tell how big it is, or exactly what shade of blue it is. They are relying entirely on you to provide this information with your images.
There are two ways to go with product images. You can choose to use a backdrop with other stuff that matches the product, or you can go with a flat white version. Keep the style consistent including the dimensions used with the final images. I think the best option is to have a combination of both of these options.
Bellroy is a great example of both methods combined. They show you several images of their products on a flat white background. They also add it with known items, like physical bills and blank cards that are the same size as credit cards. You get to see high-quality uncluttered photos to judge colour and texture, then clean photos that help you get an idea of the size of items you’re looking at.
Bellroy also provides high-quality images for each color option for a product. You don’t have to guess based on a color swatch, you can see exactly what you’re choosing as you make changes.
While this may look like a lot of work, it’s just a bit of work and a small investment. You don’t need a fancy camera. Any smartphone in the last few years will do. If you don’t have natural light, then you will need to purchase a consistent light source. You can usually find the Godox SL60W for under $200. If you’re dealing with small products and want to have an extra clean background, then look at a softbox. You can find these on Amazon for as little as $30.
With a light source and a softbox, all it takes is a bit of practice. Take a bunch of test images from different angles. If you spend a weekend playing around you’ll improve greatly so that you can get good images for Monday.
If you’re looking for a great walkthrough on product photography, check out the video below by Peter McKinnon.
Once you’ve got the images, take a few minutes to edit them for color and contrast. Most people use a sized template so that every image on the site is the same size.
If you’re not sure what this means, it’s like having a company letterhead you always use. In this case, it’s a Photoshop file that’s 2000X2000 and every image you take goes on the same template so that your site images look uniform.
Then once you have your images on the template looking how you want them, save them out in a web format. Look to keep them under 700kb if possible. To help with this at the final stage you can use tools like Kraken to optimize the images as you upload them.
Putting some effort into your product images will help your store stand above the competition.
Adding To Cart
Next, your add to cart button. There are a few mistakes that many sites make with this crucial interaction. First, make sure that users can see the button without scrolling across all devices. It should be obvious and a contrasting color from the rest of your site so that it stands out. You can see a good example of this on MEC below.
Note that they have a nice product image, and the purchase button is in a vibrant green and stays with the customer as they scroll on a mobile device.
You also need to make sure that it’s clear to the user something happened when they add something to the cart. Luckily WooCommerce has this as a default with a banner being displayed to a user after a product has been successfully added to the cart.
The second most important interaction after your main purchase button may be the option to add a product to a wishlist. A good spot for this is just below the main purchase CTA. I have many wish lists on Amazon for when I’m ready to revamp parts of my office. I already have my desk video setup all picked out in a wishlist. When it’s time to purchase I just need to add all those products to my cart, and then checkout.
Showing your product in use can show how easy it is to use to customers that are concerned about that. Yes, it might mean some duplicate information, but highlight the benefits and deflate the objections with your videos, just like you do with your marketing copy. Some studies suggest that a good product video increases conversion to sale by 84%. Videos are also known to have higher click through rates in search.
You can see this if we head back to Bellroy. The first thing that comes up with their products is a video of their product in use.
Just like good product photos don’t have to be a huge investment, decent video doesn’t have to be a huge investment. The light I recommended above is a great video light. Your recent smartphone is a decent video camera. Add a lavalier microphone to this setup for $50 and you’ve got a good video setup.
When it comes to pricing, it’s pretty straight forward. Make sure you don’t hide any price increases from your users. If the blue version is more expensive, change the price when the user selects the blue version (don’t worry both WooCommerce & Magento do this out of the box). Just under the price is also a good place to add product availability information. Don’t let your customers try to add something to the cart only to find that the product isn’t available in their chosen combination of size and color.
Social Proof: Reviews
Did you know that user reviews are 12 times more powerful at convincing people to purchase than your marketing copy is? That means you need to employ ratings on your site. Display the overall rating, usually stars, at the top near your product title and description. Then after all the product information your customers want, display the reviews you’ve gathered from users.
It’s important to make your reviews filterable, and don’t censor bad reviews. I’ve often read the bad reviews for a product to find the pain points and then purchased because I don’t care about any of the major issues with it.
One great plugin to help enhance the reviews on your site is WooCommerce Product Reviews Pro. This plugin will let you add product photos and user videos to your reviews to supercharge your social proof.
Remember, your product page is a landing page and should be optimized for search engines and to convert visitors to customers. As I said when I talked specifically about mCommerce, make sure that you A/B Test the changes you’re making to your product pages to help ensure that they’re having the effect you expect. If you can put a bit of effort into your product pages, you’ll see big rewards in your sales.
Leave the Design to Us
Built on a platform trusted by experts, StoreBuilder by Nexcess allows you to reap all the benefits of our Managed WordPress and WooCommerce without the complexity. No coding experience? No problem. There’s no reason to start from scratch or feel overwhelmed by a blank screen. Just answer a few questions, and in minutes, you’ll have your own online store with an intuitive, easy-to-navigate homepage that’s optimized to convert your visitors to customers. Check it out!