Magento2 on line store – Design winning Product page

AndrewJ AndrewJ English blog Leave a Comment

Manage your own on line store by yourself

Step Five

products page design

Some words before

A few weeks passed after our last update because we were swamped (among other things) developing a winning product page.

Here’s what we wanted, what we achieved and insights to reduce your time and effort in creating a product page.

There is no doubt that you bought a template and applied later developments in a solution, that is the golden road to white site development and the use of a casual template that targets a broad audience with the widest common denominator and therefore does not include important features for a specific store in a particular field.

First- What should we avoid?

  • Displaying basic product information that you copied from the importer or another store, which usually appears in the manual that a customer receives after buying the product and not before it.
  • Be satisfied with presenting laconic and technical product characteristics, instead of showing – what disadvantage the product will fill in the client (practical, psychological, etc.)
  • Over-seriousness and “dry” language, instead of using micro copy with  a smile 
  • Placing “Buy” button is too large, too small, scary (red or too bright)
  • Surprise the customer by adding additional delivery costs assembly fees or necessary options at the end of the process rather than at the beginning
  • Product images – Even if it is high quality and not pixelated, it is better to have atmosphere pictures that will fill the customer with an expectation of what he has gotten out of the product. We have added an interactive banner that presents the client with pre and post fitness equipment as well as detailed information on specific areas and muscles that operate accordingly to the different types of equipment. Do you market video cameras? Show samples of videos taken by the camera you market, and your competition. * Being OK with the product naked, instead of expanding the scope for essential maintenance products and complementary products. * Use of too many colors instead of Color palette of 3 colors + background – and ONLY use your branded colors. * Share buttons – this is not only beneficial to the SEO of the online store, but it also gives a publicity feeling.


Guiding insights

  • Organic search customers often land on a particular product page – therefore, this page will be the first (and possibly the last) page where you can make the first impression on the customer.
  • Customers quickly feel if they have landed on a template page or a professional and respected store page.
  • Customer that came to your product page has probably visited a carefully designed website abroad – and the comparison can not be avoided.
  • The first look on product page must include the essential information about the product Over-confusion, too detailed data, and graphic closure will cause the customer to abandon your shop.
  • In the design you must consider two types of customers: the “flipper” with a “trigger-happy” hand, and on the other hand
  • The “annoying”(In-depth) people, who are trying to learn more details and some information to make a purchase (even if they will talk with a real human being on the phone, not even on the website)
  • A web surfer is just like a shopper at the mall – to enhance the customer experience and his self-esteem you must add unforgetful experience.
  • The flashing chat icon and on the other side customer reviews that will make the customer realize what he can expect from the incredible product he is about to purchase.

Applications on the product page?

  • On the product page, show why clients should by from you store a visual basic design language , you significant store benefits by icons
  • Turn the template page to a well-designed page

  • Displays the summary of products benefits at the top of the product page
    the customer will immediately understand the advantages of the product at first glance, this limited information will be expanded with a scroll down or by clicking on a tab.

  • A rush type of clients – with lack of time will be able to read, be impressed and make a purchase immediately. The “In-depth” customer will be able to chat, email, telephone, watch videos and read all the opinions of previous verified customers.
  • Consulting” Bot – not everyone of your potentials clients would like to talk with live person, as well, from your side you can’t guarantee availability” all day long . Here comes an excellent solution a bot which “explains” step by step about the shopping process as we implemented here as well (By the way, we would be happy to give a discount coupon for embedding such a robot at your shop).



The design process is an experience by itself, especially with overseas designers. The work time of an expert designer may range from USD 30 to USD 100 per hour. We worked with a design agency in the past, but you able to find with freelancer, we saw that the costs are very rising however the output was relatively similar in quality.

We were able to design a product page with extremely high efficiency. If we were doing the entire design process in Israel (by the way, if you are an expert designer with sane prices, send me your details, we may work together in our project ..)

Check out the design stages. We have excluded many intermediate steps that were in front of the client:

Display a price on a product page

Consumer on your on line store, probably likes to see that he buys the cheapest and the highest quality product. That is why we added: the price before a discount, an icon that guarantees the lowest price in market, squeezed it shows the lowest price right now in price compression web sites (our own extension we have devlopeted ).

עיצוב דף מוצר מנצח – הצגת מאפייני מוצר

דף מוצר מג'נטו 2 - תבנית בסיסית

דף מוצר מג’נטו 2 – תבנית בסיסית


Here are some of the technological tools we’ve used for this wonderful product page
(We will be happy to provide a discount coupon for each of extension we used)

  1. Online Chat
  2. Icons show – Product attributes on the product page
  3. clients review extension – includes customer authentication and product photography to ensure absolute reliability
  4. Large video images with detailed explanation about the product
  5. 360 view of the product
  6. Bot that advises a customer to purchase
  7. A unique extension that checks the current low price in price compression sites, compares it to the store price and corrects it according to the defined conditions (Checking hours, minimum price limit, shipping calculation, etc.)


See you in the next post!

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *