Product Page in Magento - How to make it better?

Magento product page

The first customer impression is everything. Very often, store owners pay more attention to adapting their homepages and, at the same time, forget about the importance of a well-built product page. And it is one of the greatest mistakes, because any product page is created to introduce the product within a few seconds and to force customers to buy it. Generally, it is not the most difficult thing to build a page that converts, but it’s where many ecommerce stores fail. So today, we want to talk especially about Magento product page and its standard components, as well as provide some tips on its improvement and describe several features of Madison Island and Luma product page.

Firstly, we will look at the default Magento product page. As the example we will take demo store with Magento Madison Island theme. It is designed according to the best usability practice results with simple and clear layout, well-organized product description placed at the visible area. There are big and high-quality images, as well as a number of catchy elements on this page. 

You may know that Magento has 6 product types. So, when we are talking about configurable, collected and divided into groups products, we cannot but mention that some product pages, presenting specific features of product types, looks differently. But, such difference do influence a lot on the overall page look.

Below, you can find the main components of Magento product pages (examples are presented on the website with Madison Island theme): 

  • Product title 
  • Product price 
  • Stock availability 
  • Main product image 
  • More Views
  • Image zoom 
  • Product description
  • Product options
  • Add to cart button
  • Wishlist 
  • Compare products options
  • Send email to a friend option 
  • Social sharing buttons 
  • Tabs with additional information

Madison island product page


Also, Magento product page can contain blocks - cross-sells and up-sells. It is very useful feature. Let’s imagine, one girl is on the page with shoes that she is going to buy. She needs a new bag to wear with these shoes and under the section with wishlist and social sharing buttons appears one that is designed especially for them. Such cross-selling option really can increase your sales as well as help customers find what they want.

It should be mentioned that almost all features presented in Magento Madison Island were saved and implemented into Magento 2 Luma product page. You can see it on the picture below.

Magento Luma product page components

Magento team did a great job of providing many useful options into the product page. And even containing a lot of special elements and content, it is still a user friendly. However, we understand that companies really need and want to stand out from others, and one of the ways is creation of your own page design. So, we have prepared a list of tips that can help you do it better.

Basic Tips On Designing A Good Product Page In Magento

1. Make the product page simply structured. Customers do not like when pages are stuffed with a lot of information and components, which are not organized correctly. Place only the key data and implement just necessary option to make it easy-in-use.

2. One of the most essential moments in product presentation is images use. You have to add only high-resolution product images, which depict your product in the best way. Because before to buy something, customers want to physically touch and study it. Unfortunately, they can not do it online yet. So, your task is make everything possible to persuade customers that they know everything necessary about the product. Do not forget about zooming, since it allows customers to see all product details. Also if it is necessary, you can use videos instead of photos.

3. One more advice here is to place product price in a prominent place. To let customers find the cost of the product quickly. A larger font size or a color that differs from another text color can help you with it. Marketing dictates that information about discounts should be placed even in the more noticeable place than prices. If there is a need, add shipping costs and methods as well - use Magento product page shipping costs extension.

4. Inform customers about products availability. Do it on the product page, do not wait till your customer will go to the checkout. As with costs, stock information has to be noticeable.

5. Place product descriptions that sell. But it is important not to overdo here. It should not look like an advertising text. Just indicate main product features and highlight why customer should buy it. The biggest mistake here is to use descriptions provided by manufacturers. Never do it, because they are dry and not catchy!

6. Add special options to enable customers see all product variations. In Magento you can integrate it by creating configurable products or adding options of products customization. The second way is even better, as customers have the opportunity to customize and personalize products to make them meet their needs and wants. Here is a really good example from Nike that uses a visual configurator.

7. Answer potential customers’ questions. To provide your visitors with additional information, offer them a live chat or special question option. It is a good method of communication with your future buyers.

8. Not less important is optimization of  the add to cart button. Here is only one rule - never use red color, because people get used to perceive it as a caution. Generally, there is one commonly accepted look of this button, but of course, you can experiment with its design (keeping in mind the rule cited above).

9. The most irritating thing for customers and for people in general is waiting. That is why, it is important to pay enough attention to the website pages loading time. The higher its speed will be, the better. It is possible to reduce product page load time by using cashing technique. Put it simply, when a product page is visited, its cash “saves” the corresponding data on the server. And when this page will be visited again, it will load quicker. The good news is that you can use this technique not only in Magento Enterprise, but in Magento Community as well with the help of special extensions offered on Magento Connect.

10. And the last but not least is A/B-testing. You should compare two versions of the page and it will help you to understand which of them performs better. There are a number of solutions, which can help you to do this.

We have presented the main tips on product page building and hope that they will be useful for your business. However, you should remember that each project requires specific approach. So, to achieve the maximal result, the best way is to turn to real professionals. Our SaM Ecommerce team is considered as one of the best Magento development and support teams. So, if you need some additional help, we will be ready to help you! Readmore about Magento here:

Comments (0):
Leave a comment:
*Your comment will be published after approval by site administrator.