When it comes to ecommerce websites, there are certain elements that have become familiar to customers thanks to years of shopping online - for example, the natural flow in the purchase journey from homepage to product page, and the layout or elements that feature on the product page.
The product page is the place where you get the opportunity to persuade your potential customer that this is the product they need - it’s your chance to show what it looks like, what it can do for them, how it feels and why they need it.
It may be the case that if you asked the average online shopper ‘what makes a good product page?’, they wouldn’t necessarily be able to tell you, but it’s one of those pieces of the puzzle that if not implemented correctly, can easily disrupt or lose the sale.
What Makes a Great Product Page on a Shopify Store?
We’ve broken down the key elements of what makes a successful ecommerce product page so you can cross-reference your own product page against them. Consider taking them into account and you’ll reap the benefits:
- Increase add-to-cart rates
- Decrease abandoned carts
- Boost conversions rates and grow revenue
- Give a lift to upsells and cross-sells
We’ve also included some examples of ecommerce sites that do a great job with their product pages to give you some inspiration.
1 High-Quality Images and Videos
Use good quality, sharp images that showcase the product (keep the file sizes small though, as large files can slow down the loading speed of your Shopify store. There are lots of free tools available which let you compress your images, reducing the file size without compromising on visual quality). Include the ability to zoom and rotate the product with a 360 degree feature.
Make use of a gallery of images - show the product from different angles on a plain background, and also include shots that show the it in context - so if it’s a wedding dress, show a happy bride wearing it on the best day of her life; if it’s a lamp, show it on a table next to a sofa in an inviting sitting room. Let your customers see the product in detail as well as helping them imagine how it could be a part of their life or home. If there are multiple variants (like different colours) make sure you give customers the option to switch between images of them all.
It’s also now possible to easily bring your products to life with dynamic 3D objects which you can create in about as much time as it takes to add other media to your Shopify store. You can create these incredibly detailed models directly in the Shopify app on an iPhone (Pro model) without any extra software, technology, or cost, via the 3D scanning app from Shopify.
It’s now easier than ever to include video content, and video is a great way to convey the product in use, or highlight its features. Users expect images, videos, 360° views, and similar visual content, to be placed together on the product page. So we’d recommend placing videos next to the main product images on the product page. Overlay a ‘play’ symbol on the still where the video appears so it’s clear that people can click the image to play the video (as opposed to auto playing the videos).
2 Compelling Product Descriptions
Write clear, concise and unique product descriptions. It’s important to cover both the features of the product (eg. size, dimensions) as well as the benefits (what problems does it solve for the customer; why do they need it in their life?). This second part is key - use persuasive language to evoke emotions and create a connection with potential buyers. We've put together a separate guide to writing good ecommerce prodcut descriptions that sell.
3 Other Product Information
Make sure you cover everything a potential customer might need to know about what they’re buying. As well as the product description, it’s good practice to address common customer questions in a comprehensive FAQ section.
If appropriate, make sure to include size charts on your product pages - this will help customers know what to buy (as well as reducing returns when they receive the item only to find they’ve chosen the wrong size).
A live chat implementation can also be helpful - modern AI-fuelled customer service solutions like Gorgias can answer questions around delivery, returns and products without the need for a person to be on hand. Every question you answer for a visitor brings them one step closer to making that all-important decision to click your CTA.
4 Transparent Pricing, Shipping and Returns Information
This ties in with the previous sections, in that the objective is to clearly give your potential customer all of the information they need to make the decision to click ‘buy’. As well as clearly displaying the product's price, we recommend including transparent shipping costs, delivery times and returns policies.
These can be linked from the footer, or included in an FAQ section. The key is making it easy for the customer to find and understand exactly how everything works so they’re confident they’re buying from a reputable company.
To augment this, display security badges and trust seals to reassure customers about the safety of their transactions. Clearly communicate your privacy policy and terms of service.
5 Clear Call-to-Action (CTA)
You want to make it as easy as possible for your customer to buy the product, so place a prominent and clear CTA (call to action) button for an easy and quick purchase. Use action-oriented phrases like ‘Buy Now,’ ‘Add to Cart,’ or ‘Shop Now.’ This can instil a sense of urgency to help close the sale.
The purpose of CTA buttons is to draw the reader’s attention to it and entice them to convert by clicking it. So when you design your product page, think about how you can highlight the button. This may also mean toning down other elements, so it doesn’t have to compete with them.
6 User-Friendly Design and Layout
Ensure a clean and intuitive design. As we mentioned at the top of this article, there is an expected flow and layout to ecommerce sites that people have learned over years of use. Creativity has its place but don’t let it override usability.
A clean design is a key element of best practice UX design in general, but it is especially important for product pages. This is because it lets shoppers find key information easily without distracting them from the main goal: to click ‘Add to Cart’.
Make sure that your customers can find this information and don’t need to go looking for it elsewhere, potentially losing you a sale.
The majority of product pages follow a similar layout: product image on the left, product copy on the right with the ‘Add to cart’ button close by and prominent. This structure is what customers are used to. Making use of white space is also important. Keeping the page uncluttered helps bring focus to the important elements.
Include the key information and call to action above the fold (i.e. so people don’t have to scroll down to see it). More detailed product information, product storytelling, reviews, and recommended items can be included further down.
Remember to use a responsive design for mobile users.
And finally, accessibility in web design has started to be taken into account a lot more in recent years, so be sure to take into account users with different visual, auditory, motor or cognitive needs.
7 Customer Reviews and Testimonials
Feature genuine customer reviews and testimonials on your product pages to build trust and help persuade other people to buy. This kind of social proof is great to encourage customers to leave reviews. You can also offer incentives and make sure the process is easy.
There are integrations available to encourage reviews and incorporate them directly onto your Shopify store - retention platforms such as Yotpo have review modules which make it simple for customers to leave a review, including photos and videos, or via a ‘community Q&A’.
Integrate social media elements to showcase your product in real-life situations from authentic customers.
8 Optimise Product Pages For SEO
Lots of the points mentioned in the other sections of this article contribute to the SEO value of the page: they all help Google and other search engines understand what the page is all about, and therefore when to present it to people in the search results:
For example, properly optimised images and videos, unique written metadata, descriptions and FAQs, reviews, testimonials and UGC all contribute to improving the page’s performance in search results. Regularly testing your site for SEO performance (there are SEO apps that allow you to do this will allow you to identify any issues (like slow page loading) and take remedial action.
It’s also a good idea to implement structured data, as this can improve search engines’ understanding of the page as well as improve how it appears in the search results.
9 Cross-Selling and Upselling
Implement intelligent cross-selling and upselling suggestions, based on the customer's preferences, browsing history, or what products complement the current product page.
There are lots of Upsell and Cross-Sell apps available in the Shopify app store that enable you to create your own bundles, so for example if a customer is looking at a wool jumper, you might upsell to a more expensive item by recommending a cashmere jumper, or cross sell them a matching scarf.
If you offer free shipping based on a minimum spend, some of the apps can present recommended products that will help them meet the free delivery requirements.
This is a great way to increase average order value.
10 Test and Iterate
Once you’ve got a great product page, your work isn’t finished. Remember to continually test and iterate, based on user feedback and analytics to ensure your ecommerce product page is always improving.
Implement A/B testing to see which variants work best, and you can also monitor your visitors’ interactions with your product pages using heat map software. Are people moving towards your CTA or skipping past it? This is a great tool for tracking your visitors’ experience and discovering sections of your landing page that need some optimisation.
Examples of Great Product Pages on Shopify
Here are some examples of successful ecommerce brands with noteworthy product pages that are helping them perform.
Forever 21
This product page makes great use of white space, with a clear and clean layout. The product imagery is big and high quality, with a great gallery, showing the product from all sides and up close. The images can also be rolled over to zoom in.
A breadcrumb at the top right lets the user know where they are in the site hierarchy and lets them navigate back up through the pages.
Payment options are included with Klarna’s ‘buy now pay later’ next to the sale price which indicates the 21% off is only for a limited time (a countdown timer here would instil a higher sense or urgency).
Colour options are listed, along with the available sizes, and a link to a size guide which opens on top of the page and as well as clearly giving measurements, also has useful instructions for measuring yourself accurately.
A shipping and delivery section lets you know the options available for your selected variant, and the add to cart stands out in a bright yellow.
Scrolling down, below the fold we get more product details, including care instructions and the size of the model to give more of an idea about fit.
There’s also a neat touch with a text field where you can find out more about the item and get answers from the community: ‘Have a question about this? Ask people who own it.’
Amazon
Amazon remains the king of ecommerce, despite the fact that it isn’t the best looking site. Its pricing, scope of products and speed of delivery have helped it stay at the top of ecommerce for years now. But what’s happening on its product pages?
Well, it incorporates a lot of the elements we’ve covered in this article.
It has a clear image and video gallery that lets you zoom in. It shouts that there’s a deal on, and that over 600 other people have made the decision to buy this product in the last month alone (combined with hundreds of positive reviews from other customers this helps reassure people that this is a product worth buying).
It has bold and clear CTAs allowing you to add to basket or buy immediately, and it tells you that it offers free returns if you’re not happy, reducing your risk.
Scrolling below the fold there’s a really clear comparison section which lets you compare your potential choice with 5 rival products, breaking it down into elements like customer rating, price, shipping, weight and dimensions. It’s very thorough.
Scrolling further there is a wealth of information from the manufacturer. The page might not be pretty and it could be argued that it’s busy, but it certainly gives you everything you could possibly want to know about the product, its rivals, what people think of it, how you can receive it (and send it back if you’re not happy).
Apple
Apple presents a very different aesthetic to Amazon which is why we thought it would be interesting to take a look at this brand.
Heading to the product page for the Apple Watch Series 9, we’re presented with a slick, gorgeous and minimal page. It opens with a short animation of the watch, and then as you scroll down, the page doesn’t scroll in a traditional way, rather, it goes through a kind of cinematic presentation, using a mixture of bold images and text against a dark background. It oozes class and sells the benefits and features of the product beautifully.
It’s a huge page but by the time I got to the bottom of it I wanted to buy one. Which is exactly when it presented me with the option to do so. A grid lays out the specs, comparing the various models and then at the bottom of the page there are offers for financing, the option to speak to someone and an emphasis that if you buy the watch, you could have it delivered in just 2 hours.
Gymshark
This sportswear brand’s product page keeps it clean and simple, sticking to all the conventions you would expect, and doing it in an effective way. Community reviews, buy now pay later options, a size guide, wishlist option to save it for later, strong image gallery, all tick the right boxes. A product description below the fold helps give practical details like the fit and the neck style, while also sounding aspirational with commentary like ‘created to encourage you to aspire more, perform more and achieve more, this gym top boasts fundamental performance technology for next-level results.’
A banner at the top of the page lets you know of a student discount, the fact free delivery applies when spending over £45 and also the returns period.
‘You might like’ and ‘people also bought’ sections at the bottom of the page helps increase the possibility of upsell or cross-sell.
A nice extra touch is a series of sliders based on the reviews that shows the overall sentiment of people when it comes to things like value for money, comfort and sizing.
Fitbit
Fitbit’s product page is light, bright and clean.
A large main image gives a great overview of the product with other angles in the gallery, and a lifestyle image to get a sense of it in use.
There’s a lot less on this page than the Amazon or Apple examples, but I think it tells you everything you need to know to make a decision, although you do have to scroll down to get to the CTA.
Below the add to cart there are tabs that go into more depth, with bright imagery and text telling you about its features and also ‘reasons you’ll love this watch.’ It also enables you to select other products in the store so you can compare them in an easy-to-understand table.
We hope that gives you some ideas and helps you improve the performance of your own product pages on your Shopify store.
We have a team of UX designers and developers here at Eastside Co, so if you need any help improving conversion and revenue on your store, just drop us a message for a chat with our team to find out if we could work together.
Shopify SEO Audit TODAY
