Pages on which individual products are presented are a very important element of an online store. Their quality largely determines whether the customer decides to make a purchase. In this article, we will show you what elements to pay attention to in order to create product cards that are user-friendly, attract attention and, above all, sell effectively.

 


What should a product card look like 
in an online store?

13 August 2020

 

Take care of a consistent message

The product page is, of course, part of the online store website. It is also an important element of the communication strategy. Therefore, when creating it, it is good to pay attention to a few basic elements.

 

To jest element tekstowy. Kliknij ten element dwukrotnie, aby edytować tekst. Możesz też dowolnie zmieniać rozmiar i położenie tego elementu oraz wszelkie parametry wliczając w to tło, obramowanie i wiele innych. Elementom tekstowych możesz też ustawić animację, dzięki czemu, gdy użytkownik strony wyświetli je na ekranie, pokażą się one z wybranym efektem.

Appearance - product cards should be consistent with the rest of the website, as well as other graphic materials, such as folders, leaflets, banner ads, etc.

Language - the language you use should be the same in all communication channels. If you use an unofficial tone on your profile, the very formal phrases used on the product page will not match this communication. This will make it difficult to build a brand image, its recognition and customer trust. 

Target audience - remember who you are addressing the message to.Personas are helpful in determining the target group, i.e. presenting the customer category as characters. 

Mission - adjust the product page to the values behind your brand. 

What elements does the product card in the online store consist of

Product pages are composed of several elements. The most important of these are photos, descriptions, prices and CTA buttons. You can also often find customer reviews and complementary products.

 

Product photos

Adequate exposure of the offer is of key importance in marketing. It is the photos that largely influence the perception of products by customers.

In the case of online stores, proper presentation is extremely important. The potential buyer is not able to see the real product. Therefore, photos play a decisive role.

The language of benefits is of great importance in marketing. It is used not only in texts. Graphics should also primarily show what the customer will gain from a given product. Therefore, it is necessary to highlight such features of the object that will be important from the point of view of its future user.

 

It's best to show the product in use. The clothes will look much better on a model than on a flat table. Furniture or accessories will look better in a well-arranged interior.

Try to show the product from many angles. Thanks to this, the store user will be able to imagine its appearance easier. Also, pay attention to the details that distinguish the item you offer.

If an item has multiple variants (for example, multiple colours), it's best to present all the configurations. This will help the customer make a choice.

 

Product description

An attractive product description should complete the photos. As with graphics, descriptions should focus on the customer's needs and the benefits of using the product. When describing clothing, it is worth paying attention to e.g. the fact that the material does not crease or that it is waterproof. In the case of furniture, it is good to pay attention to such features as ease of use and ease of cleaning.

 

 

Descriptions should be short and specific. Poetic phrases will not work in this case. Users are looking for concise information that will help them make a decision about choosing a given product. The length of the text depends on the nature of the item. However, it should not be less than a few hundred characters.

Properly constructed descriptions are of great importance for the SEO of the website. Search engine users often want to find a selected product category (for example, a raincoat) or even a specific product (XYZ brand coat). Therefore, you should include this information in your descriptions (of course, it is also necessary from the point of view of the usability of the website for your clients). It's also a good idea to include keywords related to your industry (for example, clothes, fashion, apparel) in your product descriptions.

 

CTA button

The button is a small but very important element of the product card - clicking on it starts the purchasing process.

 

Purchases in an online store are most often made by clicking on a button containing a call to action (CTA for short), for example, "add to cart".

 

The CTA must above all be well displayed. A user who wants to buy a product should have no problem finding it. Therefore, it is good to put it at the top of the page, which will make it appear when the customer enters the product card. This will allow them to immediately add goods to the cart.

 

Price

The price of the product should also be well displayed. It is important that the customer receives information about all costs that he will incur - including shipping, additional services, etc.

 

Customer testimonials

The positive opinion of people who have already taken advantage of your offer is a factor that encourages you to make a purchase. That's why it's a good idea to put product reviews and ratings on your product page, for example in the form of stars or points.

 

 

Complementary products

If the customer is interested in a specific product, it is worth offering him something to complement the offer. Have you bought shoes? You will probably need some care products.

 

Product card layout - examples

Although the elements of a product's page are fixed in most cases, the layout of the page may vary. Below you will find some examples of well-designed product cards with a short description.

 

Asos

The main thing that catches the eye is the large photo of the product presented by the model. Thanks to this, you can clearly see the cut and the way the fabric fits over the body. On the left side, we see a photo gallery presenting the product from different perspectives. We can also look at the detail. The video footage shows well how the product looks in motion. It is worth paying attention to the subdued, grey background and careful rendering of the actual colours.

The product description is very short and focused on specificities. The size drop-down menu allows you to quickly select a specific model. The CTA button is the only (not counting photos) coloured element on the page - thanks to this it is clearly visible.

 

Nike

In this case, a different way of presenting the product was chosen. We can see 4 photos simultaneously that present the product from different perspectives. On the right side, there are pictures of the product in a different colour. Thanks to this, the customer will reach all colour versions of a given model faster.

 

Samsung

In this example, it is worth paying attention to how the product is presented in the photo. On the screen, we see fancy shapes that visualize the display of graphics in perfect quality. The dimensions given allow you to imagine the size of the product.

Select the model size by clicking on one of the three clearly visible options. A well-displayed assessment of users confirms the high quality of the product. The creators of the Samsung website also took care to show complementary products.

 

Xcom

The photo shows the front and back of the phone. Thanks to this, its features, such as a triple camera or a large screen, are visible at first glance. The customer can compare the product with other models available in the store. Thanks to this, they will make a choice faster and easier.

 

Lidl

The main image shows the product in context. Placing the kettle on the kitchen counter allows you to better visualize the product in use. The next photo shows the available colours.

An interesting option is to place social media icons on the product page, which allows you to quickly recommend the product to your friends. Thanks to this, the offer becomes more visible on the Internet, and in addition, making it available by the user does not involve any advertising costs for the store.

In all the examples, attention is drawn to the quality of the photos. The photos have a high resolution, thanks to which it is easy to enlarge them and see details. Adequate lighting, colour reproduction and framing were taken care of.

 

 

Conclusion

The product card is one of the most important factors influencing the purchasing decision. Therefore, it is worth taking the time to design 

 

WebWave logo png transparent website builder

get started

webmaster panel

log in

Our free Website Builder allows you to create amazing websites effortlessly. You can build your website from scratch, start with a blank page or choose various templates from our free collection and modify it according to your needs. With WebWave you have a free design software at your fingertips.

WEBMASTER PANEL

CONTACT

contact@webwave.me

WEBSITE BUILDER

OFFER

FOR CUSTOMERS

WEBWAVE

HELP DOCS

PL

EN

FIND US ONLINE

GET STARTED

RO

Clik here to chat with us.

This website has been entirely created using our web design software WebWave. We use cookies to give you the best possible experience. Read more.