February 22, 2023
•
Product pages are the most important pages on your store, so it's essential to get their design and content right. We interviewed our Lead Designer Kerrin Meek about product page best practice.
Originally from a print design background, Kerrin approaches client projects in a slightly different way. Layout and positioning of content is one of his key priorities, making him the in-house go-to designer when creating perfect product pages. From typography to print, to animation and video production, he’s armed with a full digital tool kit.
There are 6 key items that need to be above the fold on your product page:
On mobile, this content should be streamlined, which can mean removing or minimising the 6 key items above. On mobile, you want to show your product images, the price and then the add to cart button. You can also fix the add to cart button and the price onto the bottom of the screen for mobile users, a number of clients have asked for that option as it gives more room for content and provides a good user experience.
You can’t have everything above the fold, that would just lead to a cluttered and messy product page that ultimately will be difficult to use. Above the fold you need the six items I listed above. That is everything your customer needs to make a decision to purchase.
There is a myth that people don’t scroll which is not true, especially now that we live in a mobile age. Scrolling on mobile is a common action for digital natives.
Below the fold should be anything additional that will help a customer make a purchase decision. Recommended products, more detailed product descriptions such as ingredients, technical specifications and full customer reviews are really helpful for potential customers.
We’re starting to definitely see an increase of video on product pages. A video can be included in the thumbnail of a product page, such as the ASOS catwalk videos, which includes it above the fold. Another alternative is to include it below the fold, which gives you a lot more space to fit a landscape video in.
It all depends on what you are selling. There are generally a couple of different ways of laying out your product page but still keeping in mind the most important things that need to be above the fold. So for instance, if you sell shoes, that’s not necessarily going to be a square or a portrait image on your product page, that will generally be a landscape image.
New Balance is a really good example, they use landscape images for their shoes and that stretches quite generously along the top of the page. Importantly, they still include all of the top 6 things, even with their imagery taking up half of the page. They have the add to bag button, variants, star review, price, size and even a wishlist option, all above the fold.
This layout allows the product to speak for itself. There is a nice intentional click (rather than a hover) zoom feature that allows customers to really see the product up close. This is great for brands that really want to show off the quality or smaller, maybe distinctive, details of their products.
Know when to show it, not tell it. Text isn’t always the best way to describe your product. If you’re getting too wordy, think about how you can simplify it.
Images carry weight and are remembered by customers, however, product descriptions are very important and they need to be as detailed as the brand thinks it needs to be. It should all be based on research into the target audience. What do they need to know to hit that “buy now” button? If you’re selling technical products, your audience will want to know specifications and maybe compatibility or installation advice.
Brands tend to make the mistake that the product description simply should describe your products, but instead, they need to sell your products. Rather than going into detail about features and specifications, turn these into enticing benefits.
You should use that space to tell a story, sell an experience and an ethos.
A study by NNGroup found that 20% of overall task failures (when a user failed to successfully complete a purchase) could be attributed to incomplete or unclear product information.
“Leaving shoppers’ questions unanswered can derail a sale or even worse, make shoppers abandon not just the purchase, but the site as well. One shopper in a recent study could not find the information he needed in the product description so he left the site to search for more detailed product information. In the course of his search, he found another site with the same product, a complete description, and a lower price.”
If you are not doing it right, someone else will be.
Everyone's seen the product photography where the product is cut out, or on a plain white background. That’s great as it doesn’t distract from the product. However, lifestyle shots of your product in action are becoming more and more important. Especially for sport or active wear brands. If you can climb mountains in your products show it. Finisterre do this really well.
You can feel the wind and really see what this product can withstand. It evokes a feeling and is in line with the overall brand story.
Most stores have a basic size chart, so the usual chest, waist and leg measurements, however technology in this market is rapidly growing. There are tools out there that allow customers to enter their exact measurement, BMI, height and use crowdsourced images, maybe from Instagram, of the clothes, what size they are and what the fit looks like.
Well, that’s basically where the business happens, so it’s really important to have the design of your product pages very, very slick, just as much as your home page. I have noticed the trends recently that product pages have started to become longer, and lifestyle product shots are becoming more and more common.
Brands must remember that too many high quality images can slow the speed of your site right down. Combine that with heavy text and video and customers may start to leave. It about having a healthy balance.
So I’m going to go with Lush first, mainly because they are using video to really sell their product, the video shows exactly what will happen when you use the bath bomb.
They have minimised the checkout into a small square card, and let the video speak for the product. If there were no further details below the fold, customers would still make the decision to purchase on the video alone. There’s all the key elements there: cart button, star review, price, quality, all of the key six, but it doesn't feel cramped, it still looks quite simple.
Below the fold is an in-depth description, ingredients, longer product reviews, a shout out to it being a vegan product. Links to the blog to get more traction there and other related products and content.
The next is Carbon Beauty.
So moving away from quite a busy and colourful product page, to something simpler. They’ve cut out their product imagery, which gives designers far more range on how they’re presented on a product page.
For example, if you shoot your product photography on a colourful background, or even a simple black one, then that needs to be accommodated into the design. With a clear cut out, we can manipulate the background and offer consistency across the product range far easier.
You can see with Carbon Beauty they’ve chosen a pinky-grey, that then fills up to the top of the screen, offset by the white product information. Designers can push the boundaries more when product imagery is clearly cut out.
Their product information is really clear, it looks like a product label, the quality and price is really clear. This one is definitely doing the rounds in the web design community, it’s got the big add to bag button that swipes to black when highlighted. It’s not static and that touch of colour is on brand with the rest of the site.
And my favourite e-commerce product page is Protest.
This is really good. It has the important 6 above the fold. The title, the price, the variations, add to cart. They address uncertainties such as free shipping and times, and a size chart and you’ve got big, lovely multiple product images. There’s a click to zoom, and it’s not intrusive, as in, it doesn't cover the add to cart or any other functionality.
Protest does not have a physical store, so it’s important for them to show the whole story and product. There’s a nice wave microinteraction showing product variants updating, and another that pushes me back to chose my size if I haven’t already done so when I try and add it to my cart.
If you are looking to delight your customers with a new Shopify store, or need help designing your product pages, enquire now to see how Kerrin and the We Make Websites design team can help.
