HomeBlogThe Perfect Product Page: 12 Must-Have Elements And Rules For Mobile Devices
The Perfect Product Page: 12 Must-Have Elements And Rules For Mobile Devices
An online store for the owner is a source of sales and profit. To get them, the site must be not only beautiful in appearance, but also user-friendly, with good customer service. At developing an online store, the owners are guided by their own tastes and do not take into account user preferences, it often turns out to be an offensive situation: there is a site with a unique design, there is a quality product, but there are no sales. Users enter the online store, spend time there, but do not perform the targeted action. The question arises, why is this happening? How to increase conversion? The problem may lie in the product card: uncomfortable, overly complex, or, conversely, simple and uninformative.
A product page in an online store is an important step on the way to turning a visitor into a buyer. An ideal product page should attract attention, arouse a desire to own the product, work out questions and objections, motivate to buy, and also promote the site in search results.
Seems like too many requirements for just one page of an online store? But this can be achieved with the help of a few mandatory elements and simple rules. We tell you how to squeeze the maximum benefit out of the product page and not get confused in the nuances.
12 required elements of a product page
1. Header with product name
The name of the product should be placed in the most prominent place, so that the visitor to the page immediately understands that he got where he wanted. We read from left to right and the first thing that catches your eye is the upper left corner. This is the optimal place.
By design, provide a large enough block for the title so that even a long title is displayed correctly. This is necessary because it is often necessary to put a lot of information in the title: name, brand, model, size, color, and so on. Firstly, the more detailed information in the title, the easier it is to find a product through a search on the site. Secondly, the buyer does not have to look for important information – everything is in the title. Thirdly, the indication of the brand will allow you to play on its popularity, especially when it conducts an advertising campaign in the media.
For example, good headlines Amazon has: there is a mention of a popular brand and distinctive features of the product. The heading is large and prominent on the page.
2. Image
A good image will tell the buyer more than a thousand words, so for the perfect product card, you need to strive for the perfect image with high quality and resolution.
The buyer should be able to view the product:
from all sides: that is, it is better to appreciate the details, texture and color;
in a real setting: that is, to understand what the size of the product is and how it looks in real life.
To do this, there are several options: add detailed photos of the product, the ability to zoom in on images, set up a 360-degree view, add photos of the product “in action” (for example, photos of clothes on a model, kitchen utensils in an interior, products in a table setting, etc. ).
Here is a photo of their sweets posted by the eco-shop Humble Market:
This photo is not only beautiful, but also provides useful information about the product. Everyone knows the size of a coffee bean, which means they can easily understand the size of sweets. By the way, this is not the limit of zooming – you can zoom in even more and see the details better.
In CS-Cart, by default, you can add several images to a product, each of which the buyer can zoom in on. If two-dimensional images are not enough, you can install the “Product 360 view” add on and take the product page to a new level of detail.
3. Store availability
On the product page, it is necessary to inform the buyer about the availability of goods in the warehouse. So the buyer will be sure that he will not have to wait a long time for delivery.
For example, the online store Humble Market mentioned above simply informs customers that the product is in stock:
What to do if the product is out of stock, and you do not want to lose a buyer because of this?
If an item is temporarily unavailable, give the opportunity to pre-order or subscribe to alerts when it arrives.
If the product is outdated and no longer appears, redirect the user to a similar or new model.
For CS-Cart, there is a add on “Custom Stock Statuses” : you can set up any text to inform buyers about the status of the product.
4. Discounts and promotions
If there is a special offer for the product, in the price block indicate not only the promotional price, but also the regular price, as well as how much money the buyer will save. The principle of scarcity works here: the buyer will be afraid to miss out on a profitable offer and hurry up with the purchase.
We recently launched a new add on “Price History” , which allows you to increase the credibility of the store and increase the subscriber base just by displaying a price change chart on the product page:
Next to the chart there is a price range and an average price for the item. All together, this clearly proves to the buyer that the price was not raised on purpose before the action. No speculation – the online store can be trusted.
If the buyer is not ready to buy a product right now, he can subscribe to a price reduction for a certain product and receive notifications by email.
5. Choice of options
If the product is presented in different colors, sizes, volumes, you need to give the buyer the opportunity to choose them without leaving the page. This is done by grouping all available options on one page in the form of lists or boxes.
But there is one important clarification. Consider it on the example of a clothing store, where one model can be presented in different colors. If you leave only one product page with a color selection block, then the buyer, looking through the catalog, may think that there is no desired color or that the assortment is scarce. So the best solution would be to leave product pages for each color in the catalog, and add a color selection block or “View in a different color” block to the page of each product.
The advantages of this method:
real idea of the range;
easy navigation through options;
already in the catalog, you can attract the buyer with photos of the goods in different colors;
site search works more efficiently.
Here is how it is implemented in the Wildberries online store, section “Women’s Dresses”.
On the category page, we see several dresses of the same model, but in different colors. The buyer can immediately choose the appropriate option.
But even if at some point the buyer changes his mind and wants to see the dress in a different color, there is a color selection block on any of the cards:
This principle, when there is both a switch between options and a product page for each option, is applicable for any products where there is a choice within the same model: digital equipment (for example, phones in different colors), household appliances (for example, refrigerators of different colors), industrial equipment (for example, boilers of different sizes), gift sets (for example, in different packaging), baby products (for example, diapers for different ages), and so on.
6. Size chart
If you sell clothes and shoes, be sure to place a size chart near the size selection box. Otherwise, how will the buyer be able to choose the right size if he has not yet decided on the size grid? The table should open in a window, and not be downloaded to the device and create an obstacle to the purchase.
Using Stronger.com as an example, let’s see how a competent size table should look like. It is easy to find and does not lead to another page. You can choose your size without leaving it:
An important detail: the size chart must correspond to the product on which it is placed. This applies not only to the division into goods for women, men and children, but also into goods of different subcategories. For example, if lingerie is sold, then the size grid should be for lingerie, but for all categories of the online store.
7. Conditions
Simplify the path to purchase for the customer and indicate the terms of delivery, warranty and return on the card. If the buyer sees information about guarantees and returns, he will be more confident in the safety of investing money.
The client wants to know not only about the delivery time, but also about its cost. In order not to risk that the buyer will not return after visiting the site of postal and courier services, it is best to immediately implement a shipping calculation calculator. This will increase the likelihood of an order. For CS-Cart, the “Product Shipping Cost” add on is well suited : a button will appear on the product detail page, after clicking on which a window will open with available delivery options, terms and cost:
8. Additional blocks
When a visitor is already set to order, it is not difficult to push him to an additional purchase. Add blocks like “This product is often bought with”, “You might like it” and the like to the product page. This stimulates cross-selling well.
Here are a couple of examples:
When buying clothes, the buyer may have a fear that the item will not fit into the wardrobe, or doubts about how to combine it with other things. Chase that fear away with lookbooks. That is, form sets from the things of your online store and, when the buyer is on the card of one of the goods of this set, offer him a ready-made image.
For example, here’s how it’s done on ASOS:
On the product page there is a block with images, when clicked, a window opens with a description of the image and what you can add to the selected product.
Please note that the buyer does not leave the product page to other pages and can add the entire image to the cart with one click. This saves the client time and increases the average bill.
If you have an online store on CS-Cart, using the LookBook add on, you can create not only images for online clothing stores, but also sets of goods for any other area: for example, you can offer a mobile phone and a headset together, a dishwasher and a suitable dishwashing liquid.
9. Call-to-action
The target action for a product page is a purchase. Therefore, the call to action button plays a special role. It should attract attention: be large enough, in a contrasting color. The action the button calls for should be obvious. Usually it is “Buy” or “Add to Cart”. We do not advise you to be creative, the buyer should have an unambiguous understanding of what awaits him after pressing the button.
There is no ideal location for a call to action button, it is best to test several options and choose the most converting one.
Explanations are sometimes added near the button: for example, that the product can be removed from the basket at any time or that the safety of the purchase is guaranteed.
10. Detailed description or characteristics
The consumer wants to get maximum information about the product, especially when it is technically complex (computers, household appliances, industrial equipment). The composition and characteristics should be reflected in the product page, and not in a separate document. So the buyer will be spared from unnecessary actions.
11. Ratings and reviews
Before buying, there is always a fear that expectations will not match reality. To resolve doubts, buyers usually go to look for product reviews. Think about how they can do this without leaving the product page to third-party sites. Let these sections be as convenient and accessible as possible – they increase the credibility of the product. Ratings and reviews still work as social proof: if others buy a product and a hype is created, then the thought “and I need to take it” naturally appears.
On Argos.co.uk, for each product there is a block with a rating and reviews. You can make sure that the product is liked by those who purchased it.
12. Feedback
Add the ability to ask and answer questions. This will cause more trust in the online store, show that there are active users in it, and help those who are in doubt make a purchase decision. Here you can work out objections and stimulate related sales.
Mobile version of the product page: basic rules
Buyers enter the online store not only from desktops, but also from mobile devices, which is why it is so important to adapt the product page to different screen sizes.
The first option is to use adaptive layout, as in the CS-Cart (and in add ons for CS-Cart). This means that the page sizes, including the product page, automatically adjust to the screen of the device from which the visitor enters. Functionality and usability do not suffer.
The second option is to separately develop desktop and mobile versions of the online store.
Whichever option you choose, there are a few rules to follow in order not to lose customers from mobile devices:
Don’t sacrifice product information. If the buyer does not find important information on the product page, he will go to the online store where it is easy to find. Therefore, even for such a limited space as a mobile phone screen, it is necessary to keep the main elements: product dimensions and variations, colors, photos, detailed description, stock availability, delivery times.
Check that the filters and sorting of products are easy to use even through a small screen. It is not always convenient to enter data from the phone, so it is useful to add autocomplete or checkboxes to select characteristics. Then the user will be able to use the online store even on the go and when in a hurry.
Add the ability to swipe. The buyer is used to this when working with a smartphone, so if he can use familiar gestures in an online store, it will be much more convenient.
There is no universal template for a product page. If you look through online stores, you will see that information blocks can be located in different places, differ in size and style. It is important that you now know what elements should be included in the product page in order to maximize conversion and not miss potential buyers. The main rule is that it should be convenient for the buyer to interact with the site, this must be taken into account when choosing a platform and during development.
By default, CS-Cart has two types of product pages: a standard template and a template with an enlarged image. Both options already contain most of the elements for maximum conversion. The modules that we mentioned in the article will help you expand the default options. Plus, you can easily customize CS-Cart templates or create your own. You can even set up different cards for different products. Test the demo version of CS-Cart and see for yourself that this is the most functional platform for an online store and marketplace.
The Perfect Product Page: 12 Must-Have Elements And Rules For Mobile Devices
An online store for the owner is a source of sales and profit. To get them, the site must be not only beautiful in appearance, but also user-friendly, with good customer service. At developing an online store, the owners are guided by their own tastes and do not take into account user preferences, it often turns out to be an offensive situation: there is a site with a unique design, there is a quality product, but there are no sales. Users enter the online store, spend time there, but do not perform the targeted action. The question arises, why is this happening? How to increase conversion? The problem may lie in the product card: uncomfortable, overly complex, or, conversely, simple and uninformative.
A product page in an online store is an important step on the way to turning a visitor into a buyer. An ideal product page should attract attention, arouse a desire to own the product, work out questions and objections, motivate to buy, and also promote the site in search results.
Seems like too many requirements for just one page of an online store? But this can be achieved with the help of a few mandatory elements and simple rules. We tell you how to squeeze the maximum benefit out of the product page and not get confused in the nuances.
12 required elements of a product page
1. Header with product name
The name of the product should be placed in the most prominent place, so that the visitor to the page immediately understands that he got where he wanted. We read from left to right and the first thing that catches your eye is the upper left corner. This is the optimal place.
By design, provide a large enough block for the title so that even a long title is displayed correctly. This is necessary because it is often necessary to put a lot of information in the title: name, brand, model, size, color, and so on. Firstly, the more detailed information in the title, the easier it is to find a product through a search on the site. Secondly, the buyer does not have to look for important information – everything is in the title. Thirdly, the indication of the brand will allow you to play on its popularity, especially when it conducts an advertising campaign in the media.
For example, good headlines Amazon has: there is a mention of a popular brand and distinctive features of the product. The heading is large and prominent on the page.
2. Image
A good image will tell the buyer more than a thousand words, so for the perfect product card, you need to strive for the perfect image with high quality and resolution.
The buyer should be able to view the product:
To do this, there are several options: add detailed photos of the product, the ability to zoom in on images, set up a 360-degree view, add photos of the product “in action” (for example, photos of clothes on a model, kitchen utensils in an interior, products in a table setting, etc. ).
Here is a photo of their sweets posted by the eco-shop Humble Market:
This photo is not only beautiful, but also provides useful information about the product. Everyone knows the size of a coffee bean, which means they can easily understand the size of sweets. By the way, this is not the limit of zooming – you can zoom in even more and see the details better.
In CS-Cart, by default, you can add several images to a product, each of which the buyer can zoom in on. If two-dimensional images are not enough, you can install the “Product 360 view” add on and take the product page to a new level of detail.
3. Store availability
On the product page, it is necessary to inform the buyer about the availability of goods in the warehouse. So the buyer will be sure that he will not have to wait a long time for delivery.
For example, the online store Humble Market mentioned above simply informs customers that the product is in stock:
What to do if the product is out of stock, and you do not want to lose a buyer because of this?
For CS-Cart, there is a add on “Custom Stock Statuses” : you can set up any text to inform buyers about the status of the product.
4. Discounts and promotions
If there is a special offer for the product, in the price block indicate not only the promotional price, but also the regular price, as well as how much money the buyer will save. The principle of scarcity works here: the buyer will be afraid to miss out on a profitable offer and hurry up with the purchase.
We recently launched a new add on “Price History” , which allows you to increase the credibility of the store and increase the subscriber base just by displaying a price change chart on the product page:
Next to the chart there is a price range and an average price for the item. All together, this clearly proves to the buyer that the price was not raised on purpose before the action. No speculation – the online store can be trusted.
If the buyer is not ready to buy a product right now, he can subscribe to a price reduction for a certain product and receive notifications by email.
5. Choice of options
If the product is presented in different colors, sizes, volumes, you need to give the buyer the opportunity to choose them without leaving the page. This is done by grouping all available options on one page in the form of lists or boxes.
But there is one important clarification. Consider it on the example of a clothing store, where one model can be presented in different colors. If you leave only one product page with a color selection block, then the buyer, looking through the catalog, may think that there is no desired color or that the assortment is scarce. So the best solution would be to leave product pages for each color in the catalog, and add a color selection block or “View in a different color” block to the page of each product.
The advantages of this method:
Here is how it is implemented in the Wildberries online store, section “Women’s Dresses”.
On the category page, we see several dresses of the same model, but in different colors. The buyer can immediately choose the appropriate option.
But even if at some point the buyer changes his mind and wants to see the dress in a different color, there is a color selection block on any of the cards:
This principle, when there is both a switch between options and a product page for each option, is applicable for any products where there is a choice within the same model: digital equipment (for example, phones in different colors), household appliances (for example, refrigerators of different colors), industrial equipment (for example, boilers of different sizes), gift sets (for example, in different packaging), baby products (for example, diapers for different ages), and so on.
6. Size chart
If you sell clothes and shoes, be sure to place a size chart near the size selection box. Otherwise, how will the buyer be able to choose the right size if he has not yet decided on the size grid? The table should open in a window, and not be downloaded to the device and create an obstacle to the purchase.
Using Stronger.com as an example, let’s see how a competent size table should look like. It is easy to find and does not lead to another page. You can choose your size without leaving it:
An important detail: the size chart must correspond to the product on which it is placed. This applies not only to the division into goods for women, men and children, but also into goods of different subcategories. For example, if lingerie is sold, then the size grid should be for lingerie, but for all categories of the online store.
7. Conditions
Simplify the path to purchase for the customer and indicate the terms of delivery, warranty and return on the card. If the buyer sees information about guarantees and returns, he will be more confident in the safety of investing money.
The client wants to know not only about the delivery time, but also about its cost. In order not to risk that the buyer will not return after visiting the site of postal and courier services, it is best to immediately implement a shipping calculation calculator. This will increase the likelihood of an order. For CS-Cart, the “Product Shipping Cost” add on is well suited : a button will appear on the product detail page, after clicking on which a window will open with available delivery options, terms and cost:
8. Additional blocks
When a visitor is already set to order, it is not difficult to push him to an additional purchase. Add blocks like “This product is often bought with”, “You might like it” and the like to the product page. This stimulates cross-selling well.
Here are a couple of examples:
When buying clothes, the buyer may have a fear that the item will not fit into the wardrobe, or doubts about how to combine it with other things. Chase that fear away with lookbooks. That is, form sets from the things of your online store and, when the buyer is on the card of one of the goods of this set, offer him a ready-made image.
For example, here’s how it’s done on ASOS:
On the product page there is a block with images, when clicked, a window opens with a description of the image and what you can add to the selected product.
Please note that the buyer does not leave the product page to other pages and can add the entire image to the cart with one click. This saves the client time and increases the average bill.
If you have an online store on CS-Cart, using the LookBook add on, you can create not only images for online clothing stores, but also sets of goods for any other area: for example, you can offer a mobile phone and a headset together, a dishwasher and a suitable dishwashing liquid.
9. Call-to-action
The target action for a product page is a purchase. Therefore, the call to action button plays a special role. It should attract attention: be large enough, in a contrasting color. The action the button calls for should be obvious. Usually it is “Buy” or “Add to Cart”. We do not advise you to be creative, the buyer should have an unambiguous understanding of what awaits him after pressing the button.
There is no ideal location for a call to action button, it is best to test several options and choose the most converting one.
Explanations are sometimes added near the button: for example, that the product can be removed from the basket at any time or that the safety of the purchase is guaranteed.
10. Detailed description or characteristics
The consumer wants to get maximum information about the product, especially when it is technically complex (computers, household appliances, industrial equipment). The composition and characteristics should be reflected in the product page, and not in a separate document. So the buyer will be spared from unnecessary actions.
11. Ratings and reviews
Before buying, there is always a fear that expectations will not match reality. To resolve doubts, buyers usually go to look for product reviews. Think about how they can do this without leaving the product page to third-party sites. Let these sections be as convenient and accessible as possible – they increase the credibility of the product. Ratings and reviews still work as social proof: if others buy a product and a hype is created, then the thought “and I need to take it” naturally appears.
On Argos.co.uk, for each product there is a block with a rating and reviews. You can make sure that the product is liked by those who purchased it.
12. Feedback
Add the ability to ask and answer questions. This will cause more trust in the online store, show that there are active users in it, and help those who are in doubt make a purchase decision. Here you can work out objections and stimulate related sales.
Mobile version of the product page: basic rules
Buyers enter the online store not only from desktops, but also from mobile devices, which is why it is so important to adapt the product page to different screen sizes.
The first option is to use adaptive layout, as in the CS-Cart (and in add ons for CS-Cart). This means that the page sizes, including the product page, automatically adjust to the screen of the device from which the visitor enters. Functionality and usability do not suffer.
The second option is to separately develop desktop and mobile versions of the online store.
Whichever option you choose, there are a few rules to follow in order not to lose customers from mobile devices:
There is no universal template for a product page. If you look through online stores, you will see that information blocks can be located in different places, differ in size and style. It is important that you now know what elements should be included in the product page in order to maximize conversion and not miss potential buyers. The main rule is that it should be convenient for the buyer to interact with the site, this must be taken into account when choosing a platform and during development.
By default, CS-Cart has two types of product pages: a standard template and a template with an enlarged image. Both options already contain most of the elements for maximum conversion. The modules that we mentioned in the article will help you expand the default options. Plus, you can easily customize CS-Cart templates or create your own. You can even set up different cards for different products. Test the demo version of CS-Cart and see for yourself that this is the most functional platform for an online store and marketplace.
Read more about what seo requirements for product page.
Subscribe to stay up-to-date!
I want to be notified about ecommerce events.
Subscribe to stay up-to-date!
I want to be notified about ecommerce events.
More articles from this category