Shopify is a platform that is used by more than a million stores from all over the world. It has been operating since 2006 and since then has already become a leader in the market of e-commerce platforms. Shopify gives store owners a lot of options — from helping you build a brand, to starting a store, to promoting and managing it on different sites.
In the article, we will mainly focus on issues related to the design of the store, and in this regard, Shopify provides solutions such as:
- ready-made page templates,
- the ability to modify elements on the page,
- mobile version of the store,
- possibility of editing from HTML and CSS codes (full page adjustment),
- the possibility of implementing a full blog service,
- easy to use web-builder.
In our experience, dedicated stores enjoy a competitive advantage and a better customer experience, which translates into a higher conversion rate and a higher percentage of returning users. With Shopify's ability to customize items in your store, you might want to consider making your store more responsive, rather than duplicating popular templates. In today's article, you will learn good practices for product card design. Below you will find 10 proven items that you can easily enter in the product card of your store.
Sale, promotion
It should be appropriately highlighted by using, for example, the red color for the new price. Also show the previously valid price, but apply, for example, a strikethrough or gray color to show that it is no longer valid. It is also worth adding information about the amount of the discount expressed as a percentage, which will additionally draw the user's attention to an attractive offer and encourage him to take advantage of it.
Maker
If there are products from different manufacturers in the store, add information with the name of the manufacturer, optionally you can also include a brief description of the brand. After clicking on the name, the user should be taken to the list of products of the selected manufacturer, on which there can also be a brief description in the header, introducing customers to the activity and the nature of the brand.
Product Description
The content of the description should not be too long. Instead, it should focus on the key features that are relevant to your customers. Detailed information can be included in the tab on technical parameters or after expanding the description (eg “See more”, “Expand description”) and the basic information should be included in the points, at the very beginning of the product description. Remember to make the language understandable to everyone. You can additionally apply icons depicting a given feature or function, for even better perception and understanding. Remember that most users scan each text, do not read it in its entirety, so it is worth giving the most important information in a readable way. Also try to avoid industry and specialist terms, unless your audience is familiar with them.
Crumbs
That is, the so-called. breadcrumbs. Be sure to implement a crumb path that will make it easier for your users to navigate the 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 a product is temporarily unavailable. Include a field to enter your email address so that the user can receive a message when the selected product returns to the offer. Think of it as a kind of declaration of readiness to buy - after all, not everyone gives away their email addresses for no reason. It is not worth losing customers by the absence of such an option in the store. This is a very important feature, especially for regular customers who want to buy from your store.
Product Variants
Inform the user if the product comes in several variants, e.g. in different colors or sizes. Choosing the product color data from the category list does not mean that the user will not decide on another variant, so give him the opportunity to check them also on the product card. With this solution, he will not have to go back to the list of products, but will choose a different color that is visible when you go to the details of the selected product.
Favorites list or clipboard
Remember that not every user comes to the store immediately with the intention of making a purchase. Some will just be looking for the best product or just browsing for inspiration. It is therefore worth giving them the opportunity to create a list of products that they are considering purchasing beforehand. Add a button along with the corresponding icon (most often it is a heart or an asterisk), which means saving the product in the list of favorites. Thanks to the collection of products in one place, 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 thumbnails so users can see that there are more. Add appropriate tags to scroll photos. Remember to keep the photos relatively large, but not overloading the pages, as they can increase the loading time. Give the possibility to enlarge the photos, without losing quality and show the products e.g. on the model or in the context of use. This will positively affect the reception of the product, users will have a complete idea of it and will see the actual size of the item in question.
Additional Information
Post in the area of the add to cart button, relevant shipping and payment information available in your store. Thanks to this, the user will not have to look for this information in other tabs, he will make a purchase faster and the store will be more reliable in his eyes. Add information about delivery methods and their cost, as well as available payment methods and possible commissions. You can place them in the drop-down tabs (the so-called accordion) or in the modal window. If, on the other hand, there is relatively little information, it is worth leaving it unfolded to reduce the number of clicks.
Add to cart
The add to cart button on the product card should be the most visible. If possible, place it above the bend of the screen, along with information about the number of products added to the cart and the possibility of changing this quantity with the “+” and “-” icons. If before the purchase, the product should be configured by the user (for example, he must select the size), this information should not be entered automatically and the ability to add the product to the cart must be disabled so that the customer does not accidentally buy a product of the wrong size. Be sure to plan a hierarchy of buttons and for the main buttons, such as add to cart, apply a distinctive color that is consistent with your brand and with other buttons on the page.
Many stores that use platforms like Shopify rely on ready-made templates, which are seen in many stores on the Internet and are not new to users. However, our experience shows that adapting the store to the business and modifying the established templates brings real benefits. Check out the data that will convince you to change your approach to the topic of implementing ready-made templates in the store:
- 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.
Reports of this type, about satisfaction with the implementation of an approach focused on creating the best possible user experience in the store, can be found in abundance, and each of them will confirm the legitimacy of taking care of usability. Therefore, we recommend that you focus on this aspect when building your store, so that it stands out from the competition, encourages users to buy and is tailored to the needs of a brand that cares about its customers, is modern and wants shopping in the store to be simply comfortable.
Check out our other articles on product card design on popular platforms:
