On any eCommerce website the product details page is one of the most important pages on the site, for many reasons.
It's the page where the customer makes the decision to "add to cart" and it's the page that often ranks in the search engines (if you're doing SEO correctly, read our Ultimate On-Site SEO guide).
Let's dig a little deeper into what elements makes a product details page successful.
While all aspects in this article (design, usability and search marketing) work hand-in-hand, we'll start by looking at the surface.
The average internet user decides within seconds if they want to stay on a page or leave it. Engaging the visitor on the product details page from the very beginning is important. Even though it may seem like common sense, we've outlined some of the items that need to be easy to find.
Price, Price saved or discount, In Stock / Out of Stock notification (so many sites so not show this!), large and detailed product photos, brand name and logo (if applicable), customer reviews / star rating and of course the "add to cart" button. It's surprising how often many of the elements are left out and how website conversion rates suffer. Double check your site and eCommerce data to make sure you can provide these elements to customers.
From a general design perspective, the product details page is not one to get overly creative on. I talk about it a little more under the usability section, but the product page should be clean, basic and ultimately easy to find information on. The goal is to move a user from interested to checking out as quickly as possible.
Elements to be sure are included to improve conversion rates include:
Getting visitors to your website is one thing, but turning them into customers is another. This is called your conversion rate (learn more about eCommerce conversion optimization ). A solid product details page is often where the customer is making the final decision (as long as you have a solid checkout) on whether or not they want to buy from you. There are some basics in eCommerce website design and development that should be taken into consideration. Remember, if your web design company makes these type of recommendations, do you best to see how they can apply to your business. Often we make suggestions that are shot down simply because “oh, we can’t do that”.
Pricing: The basics of pricing is always have the best, or at least a competitive price. But what about how your display your pricing? Having the MSRP and showing what the customer can save with your price will let them see that they are getting a deal. Even showing a percent saved figure isn’t a bad idea.
Product Photos: No one wants to buy something if they’re not sure what they are getting. Having professional product photos will go a long way. Remember, you don’t want to look like you’re shipping this stuff out of your basement (whether you are or not). Also, pay attention to where multiple photos of a product could be beneficial. A lot of items warrant close-ups or multiple angles.
Reviews: We all look at reviews when purchasing online. Not having a reviews section, or have “0 reviews” is not going to help that conversion rate. Try hard to encourage reviews and even get some via email or over the phone and post them for your customers. Everyone wants to know what someone else who went through the same purchasing experience thought about it.
Discount Codes: If you’re running promotions and offering discount codes, make sure these are prominent on the product page. Too often these are only displayed on the homepage or within the checkout. If no one adds your product to their cart, they’ll never see the checkout!
Videos: If you have videos, or the manufacturer does, make sure you show them! Video will allow a visitor to learn a lot about a product in a small amount of time.
Warranty & Returns: Make sure these are somewhere that can be found. Before purchasing, customers want to know what they’ll need to do if something breaks or they are unsatisfied.
Shipping: If you can show a flat rate shipping price on the product page, do it! Visitors love to know the shipping before adding to the cart. Also, tell them when the product will ship. Saying “Ships in 24 Hours” or “Ships Now” will get people buying!
Phone Number: When they have questions make sure they can call. There is nothing worse than shopping online and not being able to find a phone number. Without a phone number, you’re going to lose a lot of business. And oh yea… make sure someone picks it up!
Trust Seals: If you have an authorize.net account or your own SSL, make sure you display your seals. Other seals such as Verisign or McAffe can also instill confidence.
The overall usability of a product details page is often overlooked.
Possibility a great designer designed the page, but the front-end developer didn't have strong skills. Or, maybe usability just wasn't taken as a top consideration. It's important to be sure the process of reviewing information on this page can happen quickly. I've outlined a few major no-no's on a product details page:
Additional Tabs - Clicking on a tab, such as "Additional Details" or "Related Products" should never cause the page to reload. This wastes a visitor's time and is just generally annoying.
Product Reviews - When clicking a star rating or "Write a Review" the customer should not be taken to another page. Often product reviews can be incorporated into the product details page towards the bottom. When "read reviews" is clicked it should automatically scroll down to that section of the page.
Additional Photo Thumbnails - Make sure you're not scaling down huge images and making them in a "thumbnail". This causes very slow load times.
Search Marketing Basics
Now we get to what I see as the most important part of a page product, search engine optimization. Depending on your industry, searchers are often looking for a specific product or product number (SKU). It's important to optimize the page to rank of the first page of Google, be found, and get a shot at the business. When developing a product details page here are some main SEO issues to consider:
Product Name - Be sure your product name is the appropriate header tag, typically a H1. This is just good front-end development (HTML / CSS), but also helps Google realize what the focus of the page is.
Informational Tabs - When developing the site be sure all content on the page is in your HTML code on initial load. Often developers may use AJAX or another technology to pull content in, but often this can hurt SEO. You want Google to be able to find all of the great content you're offering.
SKU Numbers - Be sure to include the manufacturer SKU number, not your own, if you're in an industry where SKU's are often searched.
Title Tag - Developing strong titles tags on all pages of your site is important, but often product pages are overlooked. Be sure to include the product name, SKU and other valuable keywords in the title. If you have thousands of products, you'll need to dynamically generate (using programming to create) your Titles.
For more than 14 years we've been an award winning design, development and web marketing agency. Talk with us and see how we can help your business.