Magento is one of the most popular and developed e-commerce platforms, which has more than 5000 extensions. The latest version of the platform, Magento 2.0, appeared on the market in 2015 and currently works in two versions: Magento Open Source and Magento Commcerce. The tool supports the growth and development of stores and B2B platforms with its solutions.
Due to the possibilities offered by this platform regarding the customization of elements in the store, it is worth taking care of a good design of the site and planning its content. In today's article, we will touch on the topic of the product card and share good practices. Below you will find 10 proven items that you can easily enter in the product card of your store.
Price of discounted products
It should be appropriately highlighted by applying, for example, red color for the new price and crossing out the previous price of the product. It is also worth adding information about the amount of the discount expressed as a percentage, in order to additionally draw the user's attention to an attractive offer.
Information about the manufacturer
If the store contains products from different manufacturers, add the relevant information with the name of the manufacturer and, optionally, a brief description of the brand in question. After clicking on the name, the user should be taken to the list of products of the selected manufacturer, where you can also find a brief description in the header.
Highlighted main features of the product
The content of the description should not be too long, but should focus on the key characteristics that are relevant to your customers. Detailed information can be included in the technical parameters tab or after expanding the description (e.g. “See more”, “Expand description”) and abbreviated points should be placed at the very beginning of the product description.
Remember to make the language understandable to everyone. Avoid industry terms (unless your audience is familiar with it) to make content easier to browse and encourage users to buy, without having to contact customer support.
Crumbs
Be sure to implement a crumb path (the so-called. breadcrumbs) to make it easier for users to navigate your store. Thanks to them, they will be able to easily return to previous subpages and check what product category they are currently browsing.
Products not available
Give users the option to sign up for a notification if the product is not available. Information about the availability of the product should be sent to the e-mail address of the person concerned. This allows you to know how many people want to buy a product. This is a kind of declaration of readiness to purchase, which is worth using in order not to lose the client.
Product Variants
If the product is available in several variants, e.g. in different colours or sizes, please inform the user. Give him the opportunity to check other variants not only from the product list, but also on the tab of the product in question. So if the user chooses from the list of products, for example, a black t-shirt, it does not mean at all that he can change his mind and want to see what the same t-shirt in red will look like. With this solution, he will not have to go back to the list of products, but will choose a different color that is visible on the product card.
Add to Favorites List or Clipboard
Remember that not every user can come to the store immediately with the intention of making a purchase. Some will just be looking around, looking for the best product. It is therefore worth giving them the opportunity to create a list of products they are considering purchasing. Add a button along with the corresponding icon (most often it is a heart or an asterisk), which indicates the preservation of the product in the list of favorites. During the next visit or even during the same session, users will be able to quickly review the products that caught their eye and add to the cart those for which they finally decide to buy.
Photogallery
When posting more than one product photo, be sure to include photo thumbnails so that users can see that there are more. Add appropriate tags if the preview (thumbnail) of the photos does not fit in the given view. Users should be able to scroll through the entire gallery and see how many photos are in it. Remember to keep the photos relatively large, but not overloading the page, as it can affect the length of its loading. Allow photos to be enlarged without losing quality and show products in use situations such as on a model or in context depending on the purpose of the product. This will positively affect the reception of the product, users will have a complete idea of it, thanks to this they will also see the actual size of the item.
Additional Information
Post in the area of the add to cart button, relevant shipping and payment information available in your store. Remember that a well-informed user will make a purchase faster, and the store will be more credible in his eyes. Add information about delivery methods and their cost, as well as available payment methods and possible commissions.
Add to cart
The most important button on the product card should be the most visible. If possible, it is worth placing it above the bend of the screen. Next to the button should be the number of products added to the cart. If the product needs to be configured additionally by the user (e.g. he must select a size), this value should not be automatically selected and the ability to add the product to the cart must be disabled so that the customer does not accidentally buy the wrong size product. Remember the appropriate hierarchy of buttons and, if you add to the cart, apply a distinctive color, consistent with your brand and with other buttons on the site.
Most online store owners choose to use a ready-made template, which can be found on the Magento platform. However, our experience shows that adapting the store to the business and modifying the established templates brings real benefits. The data speaks for itself:
- 7 out of 10 CEOs believe that good UX is a competitive brand differentiator
- Conversion per user can increase by 400% if the site offers a high level of UX,
- the amount spent on broadly understood utility design pays off a hundredfold,
- 94% of users do not trust outdated websites and half of them are frustrated by stores that are poorly adapted to mobile devices.
- 88% of online shoppers say they will not return to the site if they have experienced a bad UX.
Data from this type of satisfaction surveys of business and users of online stores can be found a lot and each of them confirms the legitimacy of taking care of usability. We therefore recommend that you focus on this aspect when building your store so that it stands out from the competition, encourages users to shop and is tailored to the brand that creates the best shopping experience.
Check out our other articles on product card design on popular platforms:
