The purpose of any product page is to introduce the product within a few seconds and to get the customer to add it to cart. Basically, it’s not a rocket science to create a page that converts, but it’s where a lot of ecommerce businesses fail.

In this article we are going to review a Magento product page and its standard elements, as well as provide some recommendations on how it may be improved — both in terms of design and content.

Let’s start with the default Magento product page. Designed with the best usability practices in mind — simple and clean layout, well-structured and prominently placed product information, big imagery and eye-catching call-to-action elements — it provides a solid starting point for presenting products.

Considering that Magento offers 6 product types, there are some differences in appearance of product pages reflecting specific characteristics of some product types (this concerns configurable, bundle and grouped products).  However, those differences do not have a big impact on the overall page look and feel and serve just some particular goals.

Default Magento product page

Magento CE 1.9, configurable product page

Speaking about common elements of Magento product pages, there is a bunch of them that should be mentioned:

  • Product title
  • Pricing information
  • Stock availability
  • Main product image
  • Image gallery
  • Zoom-in feature for images
  • Reviews
  • Ratings
  • Short description
  • Product options (can be set up for configurable products and as custom options for simple products)
  • Wishlist
  • Compare products feature
  • Send email to a friend feature
  • Social sharing buttons
  • Add to cart button
  • Long description
  • Tags
  • Other tabs with additional information.

Product page in Magento

The product page also may contain blocks with related products and up-sells. They appear respectively under the section with wishlist and social sharing buttons and below the tabs with additional information.

Related products on the product page

Related products

Magento did a very nice job of including many useful features into the product page and still keeping it easy to read, easy to use and easy to understand. It’s a good foundation to start working on your own page design, but what would be your next move on the way to creating a better product page? What tools and techniques should you use to make the most of your product page? We have rounded up 15 tips that may be increadibly helpful to you.

15 FUNDAMENTAL TIPS FOR BUILDING A BETTER PRODUCT PAGE DESIGN IN MAGENTO

  • Keep it simple. Pages stuffed with all sorts of information and elements annoy users. Include only essential information and features on the page. This is the case when just enough is more!
  • Use attractive high-resolution product images. One of the primary concerns of online shoppers is the inability to physically touch and scrutinize products. This is why product images are so important and MUST be of good quality. Also, include several pictures from multiple angles and in familiar contexts to enable the customers to envision themselves using the item.

Product images

Utilizing a large main product image is a good idea too, since it allows users to see the smallest detail of a product without zooming in.

Large product image

GaitLine

You can also benefit from letting your customers upload captured by them pictures to the product page. Free visual content and a social proof are garanteed!

  • Include videos to demonstrate your products quickly and efficiently. Magento doesn’t offer this feature out-of-the box. However, it is easy to implement with help of a product video extensions by FEMExtentions or IWDAgency.

Aheadworks did a great job by developing an extension enabling your customers to upload their own videos featuring your store items. As a part of marketing campaigns this feature may become a great tool to earn more credibility in the eyes of your customers.

Product videos

Direct Game Cards

  • Place pricing information prominently. To make price noticeable, use a large font size or a color that differs from description color. If discounts are applied, they should be even more noticeable than prices.

Pricing information One2wear

Include shipping costs into the product page. To display all available shipping methods and costs directly on the page — use product page shipping costs extension. There is also a good solution to calculate shiping costs from CMSMart.

  • Show your product availability clearly. If you are running low on stock, don’t wait till the checkout page to break this news to the customer. As with prices, stock information should be noticable. It’s also nice to have an out of stock notifications option to let your customers subscribe for email notifications about product availability and prices updates.

Product availability

The Watch Gallery

  • Write product descriptions that sell. First of all, you have to determine who your customer is and what he wants. Only after this start working on the copy. Point out product benefits and highlight why the customer should buy it. And, do not forget that people love humor. A funny or ironic headline could be all you need to sell a product.Regarding don’ts: never ever use product descriptions provided by manufacturers. Even, if they are extremely well-written, they can harm your rankings in search engines. Google, for example, introduced a “Farmer” algorithms that weeds out unoriginal content from search results.When the product documentation is very comprehensive and you still need to place its content on the product page — provide it as downloads.

Product options

Victoria’s Secrets

More advanced way to present products with multiple options — create product configurators enabling your customers to customize and personalize products to fit their exact preferences.

Product customizer

Brooklyn Popcorn

Here is a very exciting example from Nike — so-called visual configurator that produces new visual content online depending on selected options.

Product configurator

Nike

  • Include product reviews and ratings.  It is one of the simplest and most effective ways to build confidence in your products. According to statistics provided by Econsulting 61% of customers read reviews before making a purchase. The next huge advantage of reviews is that they are a great source of unique content — so beloved by search engines.

When moderating submitted reviews do not weed out negative reviews. Shoppers want to hear both sides of the story. About 30% assume that your reviews are fake, if they do not see any negative reviews.

Both — reviews and ratings — are standard Magento functionality. To make them even more effective, you can install a product review reminders extension to be able to invite your customers to leave a comment about the product.

More to the point: you can also hire Magento developers to add rich snippet review markup to your product pages and help those pages to be displayed more prominently in Google’s search results, increasing your click through rate, and traffic.

  • Place returns and payment information prominently. Don’t keep your customers in the dark when it comes to payment methods, since their availability on the product page influences the buyer’s decision. A nice and simple way to convey this information is to place logos of payment providers directly on the product pages.

Be clear on the return policy as well. Wipe out worries and answer the question “What happens, if I don’t like the item?”.

Returns policy

New Look

  • Feature related products or up-sells. When people are looking at your product pages, there is a good chance they have not made a decision which product to buy. By displaying related products or up-sells you will let more store visitors complete their purchase without having to exit the funnel completely. Lifehack: to reduce time on assigning related products and up-sells to each product, use an extension by Aheadworks to automate this process.

Related products in Magento

Ahmad

  • Show trust and quality badges. A small message or safety logo of a reputable company like Trusted Shops can allay customers’ fears of getting ripped off or compromising their valuable information.

Trust bages

Screwfix

  • Optimize your add to cart button. It should be easily recognizable and compel the customers to act. Since there is no universal way to style the add to cart button, you can experiment with it. But, never use a red color, since people perceive it as a warning.
  • Reduce product page load time by using cashing technique. In simple words, product page cash “saves” product page data on the server after the corresponding page has been visited once. Next time when somebody visits the page, it loads quicker. Magento offers this feature only in its paid enterprise-level version. However, you can implement it in Magento Community as well. The extension by Amasty may be pretty handy for this purpose.
  • Answer customer questions. Store visitors may have questions about a product or a part of the buying process. Offering a live chat or product question option is an effective way of saving a few of sales.
  • A/B-test! A/B-testing is a method of comparing two versions of the page against each other to determine which one performs better. There is a variety of tools and services out there. You can start your research with this extension by Amasty.

A/B testing

We hope that our recommendations have given you some good ideas that you can incorporate in your own websites. The most important thing is to remember: what works for someone else might not work for you. So, test, test and test! If you need a professional advice or any help with building your product page, our team of Magento certified developers, designers and ecommerce experts will be happy to jump in.