Pixel Fish Website Design Blog

How to Build a Complete E-Commerce Product Page

Posted by Mark Fouche on Apr 23, 2020
Mark Fouche
Find me on:

Every year sees new companies entering the e-commerce sphere, and it's not just startups. Brick-and-mortar companies with local customers and inventory are opening up shop online, expanding horizons and providing local delivery services. Putting together an e-commerce store today is easier than ever with digital platforms like WooCommerce and Website Design Agencies ready to make handle the technical side for you.

How to Build a Complete E-Commerce Product Page

But no matter how quick and easy building a new e-commerce store has become, there is one labour that every new store owner must take on themselves: Building the product pages. It's up to you to take the photos, write the blurbs, and ensure each product is properly categorised so that customers can easily search and find what they want.

This article is a complete beginner's guide to building your e-commerce product listings. Following these guidelines, your pages will have everything customers need to make an informed and positive purchase. Let's get started with the basics.

Product Page Checklist

  • Automated Page Features

  • Image Suite

  • Product Title

  • Description

  • Variety Options

  • Metadata

How to Build a Complete E-Commerce Product Page

1. Automated Page Features

The automated page features are those that your e-commerce website should generate for you. In most cases, you will not need to fill out this information because it needs to be current and accurate based on internal database data. These are things that you would not write personally for each page, but should ensure they are present and accurate for each product before the site goes live.


Price is something that should be controlled internally. There are many factors that can influence a product's price like demand, deals, and customer memberships. This means that the displayed price should be pulled from your internal records and presented to the customer accurately. 

It is possible to simply write the price by hand, page by page, but this is not a good practice. When prices change, it's better to change them on an internal database and let the site self-update across the board.

Shipping Information

Your internal shipping system may provide an estimate of how long it will take each package to reach each customer. This is based on your schedule, driver availability, and the customer's distance from the shipping location. Therefore, this is information that should be automatically generated and displayed for the customer during their purchase decision.

Deals or Bulk Discounts

Like the price, bulk deals and discounts change dynamically. Ensure your site is handling these with internal accuracy and propagating them to all relevant product pages.


Naturally, when customers leave reviews, these reviews are stored and displayed automatically with no interference from the site owner. 

Cross-Selling Options

Most good e-commerce sites include a display of similar or bought-together items on a product page, "under the fold" after the buyer has scrolled some ways down in curiosity or investigation. This is a good way to keep shoppers shopping. Use automated marketing tools to generate the correct cross-selling options.

2. Image Suite

The image suite is the most essential part of your e-commerce product page. The images show your customers what the product looks like. It gives them an impression of quality, a reference for it's size, and a few ideas for how to use each product. Images make products look appealing and inspire buyers to start making mental plans before they've even finished the purchase. So make sure your image suite is flattering and complete.

Product from All Angles

Product images are, of course, the bulk of the suite. Shoot products from all angles with a removed or plain-white background. Look at products up-close, show the seams and mechanisms, and show the products being worn, used, or stored. Use your own understanding of the product to show off what customers will want to see at a distance and up-close.

Product in Use

Make sure to have at least one image of the product being used as a customer would use it. Place a pan on the stove and fill it with water and veggie chunks. Show a lawnmower being pushed on some grass, or a dog sleeping in the dog bed.

  • Do not use photo-shop tricks, as this defeats the purpose of showing the product in real circumstances.
  • Do invite customers to share their own product-in-use photos.

Product Size Reference

Have at least one photo that gives a clear reference of the product's size. Place it next to a dollar, a smart phone, or a basketball. Pick something practical and common, that viewers will immediately recognise as sizing the object. Try to avoid subjective comparisons, like folded towels or shoes which can vary pretty widely in size.

  • Do not use strangely small items to make the product look bigger. This is a known folly that leads to disappointment low-star ratings

Feature Sheet

Make a sheet that shows the dimensions or highlights the best features of the product. Use close-ups and measurement graphics.

Size Chart

For sized items, provide your brand and product's own size chart to ensure customers can make an accurate decision.

3. Product Title

Building the product title is an art that not every brand has mastered. The product title should be clear, accurate, descriptive, and hit a few important keywords. But it should not be a mess of keyword-stuffed gibberish. On your own e-commerce site, the titles of products should focus more on brand, name, and a few descriptive words. If you're competing for clicks on a larger platform like Amazon, longer titles are acceptable with your more detailed keywords long-tailed at the end.

Begin your titles with the product name, model, brand, and size. These are the things people care about most. If there's only one colour, include the colour. If there are a few designations within the product type (like manual vs automatic) then list that in the title as well.

Otherwise, try to keep the title clean. Put most of your keywords in the description and, even better, figure out your platform's metadata and work with tags and categories instead of packing the title.

4. Description Section

The description of your product is your opportunity to say everything worth saying. You can wax poetic, you can describe the uses, and you can stuff every relevant keyword in by writing them into useful statements. After all, there are reasons why those keywords are relevant. 

That said, the description is also your chance to very quickly sell customers on a product they have merely glanced at. So think of the description first as a pitch, and second as a reference-page for all the info your customers might be shopping for.

Features and Key Stats

The most important content in your product description is the details. Customers want to know how big it is, how much it can hold, what speeds it runs at, or how much power it needs. They want to know how much weight it can support, whether it comes with attachments, if it's modular with your other products, and if it both slices and dices.

Organise the key features and stats of your product in bullet-points and share them concisely so smart shoppers can skim for the most important and relevant information.

List Uses

What can your product be used for? Include a few examples and suggestions in the product description. Listing uses both assures customers that your product does what they need and inspires customers to think of new ways they want to use your product.

Keyword Stuffing

All the keyword stuffing often done in the title: Do it in the description. By listing uses and describing the product, you can usually catch all your most important keywords. For keywords that don't fit into your essential content, re-assess them for relevance and/or find an interesting and relevant way to include them in a descriptive sentence.

5. Variety Options

Many products come in a variety of nearly-identical options. Colour variety is the usual type, but sometimes there is a variety of styles, combo-packages, or sizes instead. To properly display your various options, it's important to understand the e-commerce platform that you are using. Work with the platform features to create easy-switch alternatives as part of a complete product page.

Choose simple, descriptive titles to differentiate the varieties from each other. Use accurate colour names, sizes, or descriptive set-titles. Do not use SKU designations, because customers have no idea how PK14-b varies from PK15-s.

On-page variety options are important because they save customers time and allow them to browse for preference after already choosing the product type and features they want. Do not skip this step and simply list one product eight times under different colours. This adds a layer of frustration that can drive customers to more conveniently designed options.

6. Metadata

Metadata is often added by-hand or pulled directly from your product inventory data. Metadata helps to categorise a product in customer searches and can often provide technical or logistical information that some customers need beyond choosing for features or size. Metadata may display on the page, but it serves a more important function by providing sorting markers for the page and product.

Features and Stats

In addition to listing the features and stats in the product description, it's also useful to arrange them as metadata and in a chart on the product page. These things include the product dimensions and weight, including the dimensions and weight of the box when shipped. It may include the product materials or ingredients, or the safety certifications of the product.

Sorting Tags

Sorting tags and categories are essential for helping customers find the products they want through your website search feature. Categories help narrow-down product areas, but tags are vital. Tags include things like colour, size, brand, volume, package-set-number, shipping time, and many more little details that customers sort for when looking for the right product.

Tailor each product's tags by-hand to ensure that products are categorised and listed both accurately and completely. Absolutely allow products to fall into multiple categories, like both Bath and Kitchen for example.

The Big Picture

Congratulations, you've made it to the end of the checklist, If you are building a product page (or a whole site of product pages) from this guide, then the final step is to take a step back. Save the page, switch browser-users, and enter like a customer. Take a look at how your product pages appear in searches, how searches can be narrowed, and then what the pages look like to customers when loaded.

Make sure all your pages look approximately the same. LIke uniformed members of the same team, the pages don't have to be identical but they should hold up the form and personality of the brand and website as a whole.

If the customer experience is satisfactory and your product pages pass inspection, then you are ready to open up your e-shop and start making deliveries. Contact us today for more e-commerce insights or to consult on your online store goals.

Further Reading
How to Choose The Best Payment Gateway for WooCommerce
15 Unbeatable SEO Tips for WooCommerce

Stand out from your competition with a Pixel Fish website!

Call us today on 02 9114 9813 or email info@pixelfish.com.au

Speak to us about your new business website. We’d love to hear from you.

Topics: eCommerce, WooCommerce