Best Practices and Optimizations for your Product Page

Your product page is where potential customers make the ultimate decision: to buy or not to buy.

The product page is your pitch to the customer. Your chance to build trust and communicate mouth-watering benefits. The product page is where conversions are made. One sentence can make the difference between a sale and a fail.

But I can hear you saying, “I have high-res images and lots of text on my product page. Isn’t that enough?”

I’ve got a nice, simple answer for you: No it’s not.

Forget about high-quality images and how shakespearian your text reads for a minute. These things are important, but if text and images are all you concentrate on, you’ll quickly find people pressing the dreaded back button instead of the juicy buy button.

Do you want that? Of course you don’t.

Your product page is often the first impression customers get of your website. Why? Because Google Search throws people directly into product pages instead of home pages.

So from the moment the lead arrives, you’ve got around 30 seconds and 2 million pixels to turn potential into profit.

To make sure you product page doesn't let you down, let’s have look at some Do’s and Don'ts for product page conversion.

Important Information On The First screen

First of all, it's important to remember not everyone uses the same screen size. Some people shop online with their 27” iMac, while some browse on old 12” netbooks! (Yes, shockingly some people still use them).

As of 2016, the most common desktop screen size was 1366x768 (15.6 inch).

768 pixels on average, from the top of the browser to the bottom of the screen, is all you get to advertise important content. And for mobile devices, the screen space is even tighter.

And pixels aren’t your only problem.

1/10th of a second. That’s how much time it takes to form a first impression about a person, a business, a website… And your Product.

1/10th of a second.

So you better make that screen real-estate count.

Positive first impressions lead to longer browsing times on your site. The longer people browse the higher the chance of conversion. Not to mention Google loves it when people linger on your website longer.

Knowing these facts, we see how important the role of website design plays in selling. First impressions are formed by the website’s design. It’s a sad fact of life that, just as we judge a book by its cover, we judge a website by its design.

First things first. Images.

Clear Images. Different Angles. High Quality.

Image: Zalando product page. The image is just about half of the page, but the height of it exactly fits a 15.6” screen (+ some padding).

______

Though high-quality images alone aren't enough to secure a conversion, they are still an important part of the product page mix.

You need high quality images. But you need the right high-quality images.

You also need to consider the size of the image (dimensions on the screen). Big images are great for showing details that smaller images can’t.

However, you must strive for balance. If the image is too big or too small, it often negatively impacts the user experience in surprising ways.

The consequence: Traffic bouncing away.

To avoid the dreaded bounce, use an average, not-too-big-not-too-small, image size.

Remember, you can change image dimensions in Prestashop Image Settings. If Prestashop compresses your image too much, and image clarity becomes an issue, set compression to 0 for an instant quality boost. Compressed images are great for increasing website load speeds, as long the compression does not compromise quality.

Use Cropped Images And In-Context Shots

Image: Comfy Copenhagen product page. Image of both an in-context shot, but also a cropped image.
_____

It’s vital to show multiple images of your product.

Yes, it’s hard and time consuming to take photos, especially if you have thousands of products on your webshop. But taking the time to take multiple photos will pay-off over and over again in the future.

You have two choices:

1: Don’t take many photos for a short term gain in time, but a long term loss of profit. 

or

2: Take many photos now for a short term loss in time, but a long term increase in profit.

Given the choice, I know what I would choose. (Pro Hint: It’s number 2!)

Additionally, more images improves your site from an SEO perspective. The more images you get indexed, the better (Remember to use alt tags!).

So multiple images are a definite ‘need-to-have.’ Whether it’s clothing, watches, or bags, get as many inspirational images of your products on the site as you can.

Images are especially important for shoes and clothing as you can’t “try” them on in a changing room. To help the customer make a positive buying decision, make sure you have all angles included.

If you really want to make an impression, use 3D rotation images. There are several Prestashop Modules to help you include these classy interactive images easily onto your product pages.

Just remember this simple equation and you’ll be fine:

More images = Easier decision for customers.

Image: And pants product page. The first image is a 360 rotation image, and the other images are close-up images of the shoe.
_____

Keep Big Images And Galleries Down The Page

You have some high quality large images of your products.

It’s a shame they’re often hidden away in the depths of the image slider.

Instead of locking them way, grab attention and inspire potential customers by using big pictures below the fold. As your user scrolls, you’ll excite their imagination and their need to spend money.

Placing a large spanning image below the fold is good practice if you sell few products, or if want to put focus on particular products.

LUNDD product page. Some of the products have big in-context shot down below the page. Creates a visual atmosphere on the product.
_____

Price, Name, Size And Other Key Details.

Take a look at any product page and try to notice which is bigger: The product title font size or the price font size? Which do you think should be bigger?

Let's look at some examples from big stores around the web..

Zalando product page. Title is font size 36px whereas the price is much lower with only 22px.

Zalando - Sells branded clothing - Normal prices

Title: 36px

Price: 22px

Asos - Sells mostly their own brand - Cheap / Relatively competitive
Title: 20px

Price: 20px

JD Sports - Sells branded shoes - Expensive/Normal prices

Title: 21px

Price: 21px

Ebay - Marketplace - “Competitive prices”

Title: 18px

Price: 20px

Etsy - Marketplace - Unique products - Expensive prices

Title: 20px

Price: 20px

MVMT Watches - Sells their own brand - Normal prices

Title: 28px

Price: 16px

Power - Sells branded electronics - Extremely cheap / competitive prices

Title: 32px

Price: 72px

Nike - Sells their own brand - Expensive prices

Title: 32px

Price: 14px

Marks & Spencer - Sells mostly their own brand - Relatively cheap

Title: 18px

Price: 28px

Notice any trends in the font sizes? Generally, webshops that sell branded goods display the name of the product bigger than the price.

Conversely, discount and “unbranded” product stores do the opposite. They make the price bigger. What you decide to do depends on the type of business you own.

Look at what you sell and their prices, then decide whether the price or title should be bigger.

Power.dk product page. All the prices on the product pages are display with a 72px fontsize. Price is the #1 factor on this product page.
_____

A Reader Friendly Taster Text. ‘Nice-to-Read’ and ‘Need-to-Read.

Your product description should be split into two parts:

1: The first section should be reader friendly ‘Need-to-read’ text. This taster text should be placed at the top of the product page and detail key attributes and benefits.

2: Any other text is considered ‘nice-to-read.’ This text should be placed in the second part of the description further down the page and contain more detailed information about key features and benefits.

Show Accepted Payment Methods

If your store is international, show the credit cards you accept. By showing what payment methods are available to customers you’ll grow trust and decrease friction in the buying process.

But beware of placing card logos on the product page. Logos usually contain many distracting colours and symbols that can pull people away from the buying process. So keep the logos small or at the bottom of the page.

However, if you offer monthly payment solutions such as Klarna or Viabill, you should include that information next to the products price. Just be sure you state clearly it’s an alternative solution, and not mandatory.

Make The Cart Button Stand Out

The Add to cart buttons need to be seen. But they should work with your overall website design, not against it.

If your website is made of low key pastel colours, and you hang a big luminous orange buy button on every product page, it will hinder your conversion rate.

However, just to confuse matters further, don't think your site is going convert if you have a drab grey button. That won’t work either.

Like all thing in life, it’s about finding balance.

“So what’s the best color and design for my buy button?”

The answer:  It depends on your website.

Amasty conducted a survey on button color distribution in two different sectors: Consumer electronics and clothing.

As you can see, in the clothing sector black is a popular choice. However, on consumer electronics, the most popular button colours are red and green.

To find the right colour for your buy button, look at your own brand colors to see which color is dominant. Look at your competitors and see what they do then copy them. You can always change it latter.

And one final hint about buy buttons: make sure they don’t melt away into other content. Buy buttons need to stand alone with plenty of white space around them.

Trust Signals For The Win

Display your USP’s. Do you have fast delivery? Do you offer gift packaging? Make sure people who are looking at your product know about your top USPs. They are what set you apart from the competition.

Show the SKU/Reference Number

If you are selling branded products the reference number is a need-to-have.

Showing the SKU/model number shows your product is genuine and builds trust with potential buyers.

Though it’s important, there’s no need to make the number prominent on the product page. It's fine to have it in a light grey tone, so only people who are looking for it will find it.

Additionally, a lot of price comparison crawler sites look for the SKU/model number in order to match products. Just including the SKU number can get your website and products a lot of extra exposure.

Inclusion of SKU numbers also benefits your product page SEO. Sometimes, different product models look the same but have slight but relevant differences. If the customer is searching for a specific version of the product, they will likely just Google the SKU/model number.

And guess which sites appear? That’s right. Those that have the SKU visible.

It has many names. Model number, SKU, reference number, product code, EAN, UPC, variant ID, you name it.

Display Shipping Costs Clearly

Want to know the easiest way to lose customers?

Don’t display the shipping Cost.

Don't hide shipping costs in the checkout checkout ready to pounce out and scare off the unaware buyer - be clear with your customers from the start.

Display the shipping price clearly on the product page. That way, you’ll avoid surprising the customer with the price and potentially losing them in the process.

Make use of Scarcity

The Scarcity strategy states that:

If supply of an item is limited or scarce,  demand, and therefor price, increases.

Scarcity is widely used on the web. Everytime you see a banner stating “limited items available” or “exclusive access,” that’s scarcity in action.

The master of Scarcity is Booking.com. Although, not an ecommerce site, there are many things we can learn from booking.com.

“Booked 77 times in the last 6 hours”

In e-commerce language, we call that: “Ordered 77 times in the last 6 hours”·

“Only 6 rooms left on our site!”

In e-commerce language, we would call that: “Only 6 items in stock!”·

“Someone just booked this”

In e-commerce language, we call that: “Someone just ordered this item!”·

Though the above examples are very aggressive forms of scarcity, there are plenty of examples of more subtle forms.

A very discrete type of scarcity is a simple timer that shows how many hours are left until the next-day delivery cut off time. This creates urgency in the minds of customers.

Amazon Example:

Size Charts In Popups

Never lead your customer away from a product page.

On clothing stores, you’ll often see Size Charts linking out to external pages.

Don’t do that!

If you have extra information to give your customer, show it directly on the product page. If you don't have room, use a popup. But never lead them away from the product page once customer is on it.

Sportsdirect.com. Size Chart/Size Guide showing in a popup.
_____

Don’t forget, to write ‘popup’ next to your size chart link. This way you warn the user the size chart will appear in a popup and not in another window.

I hope you enjoyed the article.

Have any suggestions or comments? We’d love to hear your thoughts on what we’ve talked about in this article. Drop us a line and join the conversation.

This blogpost was written by Hassan Aziz. UI/UX Designer at Bulldesign, a certified Prestashop Agency. We have over 5 years experience with UI Design and UX.

Contact Bulldesign to learn how we can help you increase conversion on your product pages now.

If you want to open an online store, download PrestaShop and start selling products online!