Product Page Design & Online Catalogs

The success of a product catalog depends on the product-detail pages.

  • Share images and videos
  • Provide resources, like manuals and CAD drawings
  • Highlight related products and accessories

The success of a product catalog depends on the product-detail page.

Product Catalogs are one of the main reasons a manufacturer has a website. Let's look at one example of an excellent product page.

Before diving into the details, look at the overall product page layout (below).  It's clean, well-spaced, and visually appealing.  It offers a lot of information, but is not overwhelming.

A well-laid-out product detail page is a gift to your visitors. Give them the descriptions, documentation, images, videos, and variants they're looking for.

Product Images

Most products should have a photo, showing the product as it's being used or in an appealing light.  In addition, there should always be an option for a larger view of the product.  Ideally you'll have multiple views of the product - from the top, the side, facing front, etc.  Make sure all those larger images are a nice big size - you want to show the product in detail. 

Product Details

A picture is great.  But visitors also want to read about your product.  Give them the information they're looking for, in as much detail as you can.  They don't have to read all of it, but if they're interested in your product, they will read about it.


If a picture is great, a video is even better.  Having multiple videos for the product is better yet.  Note the layout below: The main video is highlighted, plus there are multiple related videos shown below.

You may not have video for each product.  In that case, you need a page-layout design that easily handles missing elements.  Our design slides the "related items" up, on the right-hand side, when there are no videos.

User Manuals, Documentation, and CAD Drawings

Put all your reference material in one place - easy to access and find. Product spec sheets; CAD drawings; BOM's; training videos. Whatever you have, make sure to include it. 

Related and Recently-viewed items

If your visitor is interested in one product, chances are they may be looking for other products.  Make it easy - tell them about related items. And don't forget to highlight their previously viewed items. Keeping track of what your visitors have looked at is a nice touch - it makes it easy for them to go back to a previously-viewed product.


Certifications and Standards

Do your products meet safety standards or other industry certifications?  If so, make sure to show those.

Certifications on a product-detail page.

Where Does the Data Come From?

A well-laid-out product detail page is great for visitors, but can be a nightmare for your website administrator. If you want to make a product catalog, maintaining pages must be easy or the catalog will quickly become out of date. For smaller manufacturers, product information can be maintained in a spreadsheet or in Microsoft Access and then uploaded to Titan CMS.

Larger manufacturers can use our PIM (Product Information Manager) to support their product detail pages. For many of our manufacturing clients, the PIM was the first time all their product information was gathered in one place. The PIM maintains all the data about the products. It can receive information from other systems (e.g. ERP or accounting packages) and can feed information out to other systems (e.g. InDesign). When a website visitor lands on a product page, the page is built dynamically by pulling the relevant information from the PIM.

How does the PIM integrate with my other systems?

Is there a new "related item" to a product? Enter it in the PIM and it's automatically added to the website page. Has the pricing changed in your ERP system? The ERP system can automatically update the PIM and change the price on the website. One of our manufacturing clients uses the PIM to feed five external systems, including their website, a marketing publishing system, and an OEM database.

Examples of Product Catalogs

Check out some of our manufacturing product catalogs.

Server Products

Server Products

Server Products is a leading global provider of market-driven dispensing solutions for the foodservice industry. Northwoods completed this website redesign project, including a new product catalog that is maintained by the Titan CMS. Detailed product information is fed by their existing ERP system.



Nordco is a major supplier to the North American Class 1 railroads, regional and short-line railroads, public transit systems, railroad contractors, equipment leasing companies, and rail mills. The Digital Strategy Team at Northwoods developed a user experience that combined all product lines under one branded website, incorporating videos, foreign translations, and an extranet for product manuals.



Vollrath manufactures equipment and supplies for the commercial foodservice industry. Northwoods developed a Product Information Management (PIM) system to effectively manage and disseminate data to different channels. Today, the PIM makes the organization of product information easy, while also streamlining the process of providing this information to all stakeholders.


Ready to improve your online catalog?

Schedule a free evaluation to determine your online catalog needs. Our evaluation includes strategies to improve the following areas: 

Product naming and detail information

Product categories and tagging 

Page-layout and design 

Use of video and images 


Schedule Your Evaluation   (It’s free.)

Ready to Learn More?

Contact us with any questions, comments, or suggestions.

Northwoods Web Solutions

1572 E Capitol Drive

Milwaukee WI 53211


847-752-1095 (Chicago)

Microsoft Partner SIlver
© 2017 Northwoods - all rights reserved.