{"id":12437,"date":"2022-08-30T14:55:32","date_gmt":"2022-08-30T12:55:32","guid":{"rendered":"https:\/\/dits.md\/?p=12437"},"modified":"2025-04-29T14:04:47","modified_gmt":"2025-04-29T12:04:47","slug":"kak-uluchshit-dizajn-kartochki-tovara-v-internet-magazine","status":"publish","type":"post","link":"https:\/\/dits.md\/en\/kak-uluchshit-dizajn-kartochki-tovara-v-internet-magazine\/","title":{"rendered":"How to improve the design of a product card in an online store"},"content":{"rendered":"<p>[et_pb_section fb_built=&quot;1&quot; admin_label=&quot;Section&quot; _builder_version=&quot;4.0.2&quot; background_image=&quot;https:\/\/dits.md\/wp-content\/uploads\/paralax-background.jpg&quot; min_height=&quot;126px&quot; custom_padding=&quot; 35px|0px|40px|0px|false|false&quot; global_module=&quot;2594&quot; locked=&quot;off&quot; collapsed=&quot;off&quot;][et_pb_row _builder_version=&quot;4.0.2&quot; width=&quot;100%&quot; max_width=&quot;100%&quot; custom_margin=&quot; ||||false|false&quot; custom_padding=&quot;18px||||false|false&quot;][et_pb_column type=&quot;4_4&quot; _builder_version=&quot;4.0.2&quot;][et_pb_post_title meta=&quot;off&quot; featured_image=&quot;off&quot; _builder_version= \u00bb4.0.2\u2033 title_font=\u00bb|600|||||||\u00bb title_text_align=&quot;center&quot; title_text_color=&quot;#ffffff&quot; title_font_size=&quot;41px&quot; title_line_height=&quot;1.2em&quot; title_font_size_tablet=&quot;&quot; title_font_size_phone=&quot;27px&quot; title_font_size_last_edited=&quot;on|desktop&quot;][\/et_pb_post_title][\/et_pb_column][\/et_pb_row] [\/et_pb_section][et_pb_section fb_built=&quot;1&quot; _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;][et_pb_row _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;-1px|auto||auto|| \u00bb locked=&quot;off&quot;][et_pb_column type=&quot;4_4&quot; _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;][et_pb_code _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">the main<\/span><\/p><\/nav>[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;|auto|1px|auto||&quot; custom_padding=&quot;||14px|||&quot;][et_pb_column type=&quot;4_4&quot; _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;|| 16px||false|false&quot;]<\/p>\n<h2><b>How to design the main fields of the product card<\/b><\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>When the user opens the page, he should immediately pay attention to the photo, the price, the terms of payment and delivery, and the &quot;Buy&quot; button. That&#039;s why designers make these reference objects bright and place them along the user&#039;s gaze path. The main anchor and the brightest spot is the photo, from which the user begins to view the page.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/osnovnie_polya_kartochki_tovara.png&quot; title_text=&quot;osnovnie_polya_kartochki_tovara&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;||16px||false|false&quot; locked=&quot;off&quot;]<\/p>\n<h2><strong>Photos and videos<\/strong>\u00a0<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>Customers cannot see the product live or touch it, so the photos must be of high quality and varied. You need to demonstrate the product from different angles, as well as show its texture and details.<\/p>\n<p>On the product card, you can use the magnifying glass function to give the customer the opportunity to view the product in more detail. With its help, users will be able to zoom in on any part of the picture.<\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>If the product can be shown during use, do it. For example, when users see a dress worn by a female model, they will be able to better appreciate its fit and overall look.<\/p>\n<p>Not all products require detailing in photographs. If you&#039;re selling PC games, it&#039;s best to focus on detailed descriptions, tutorial videos, etc. Sometimes it is enough to show the original packaging in the photo.<\/p>\n<p>If you have enough resources, you should shoot video reviews: talk about the features of the product, show how they look live. A good video will highlight all the beneficial aspects of the product in a short period of time.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/pj-instructional-1.gif&quot; title_text=&quot;pj-instructional-1&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;||16px||false|false&quot;]<\/p>\n<h2><strong>The price of the product<\/strong><\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>It should be one of the central elements of the product card. Many users choose products based on price. To further motivate a customer to buy a product and visually show the savings, use a crossed-out old price.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/cena_tovara.jpg&quot; title_text=&quot;cena_tovara&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>Very often, the price is looked at first of all, so it should be placed at the top of the page near the bright \u201cBuy\u201d button. If the price is not too profitable, you can divert attention from it by placing bright modifications or loyalty program conditions nearby.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/yarkie_modifikacii.png&quot; title_text=&quot;yarkie_modifikacii&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>The gaze does not move immediately to the price, but through various modifications and an offer to register and get a discount.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;||16px||false|false&quot;]<\/p>\n<h2><strong>Buy Button<\/strong><\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>The &quot;Buy&quot; or &quot;Add to Cart&quot; button must be highlighted. The space around it should be free so that nothing distracts the user from his main task - to buy a product.<\/p>\n<p><strong>A few tips for the &quot;Buy&quot; button:<\/strong><\/p>\n<ul>\n<li>its color should be different from the color scheme of the online store for greater contrast;<\/li>\n<li>the button should be large and attract the attention of visitors;<\/li>\n<li>it should clearly state what users should do.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/knopka_kupit.png&quot; title_text=&quot;knopka_kupit&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;||16px||false|false&quot;]<\/p>\n<h2><strong>Button &quot;Order in one click&quot; or &quot;Quick order&quot;<\/strong><\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>This button is needed for users who do not want to fill in information about themselves and prefer to discuss the details of the order with the manager over the phone. It should be placed next to the &quot;Buy&quot; button, but made less noticeable. It is more profitable for an online store for customers to fill in information about themselves, this helps in collecting the base for email marketing and creating personalized mailings.<\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;||16px||false|false&quot;]<\/p>\n<h2><strong>Product description and characteristics<\/strong><\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>Some users understand the products you sell, some don&#039;t. Product information should be useful and understandable to everyone.<\/p>\n<ul>\n<li>Anticipate questions your customers may have and answer them in the description.<\/li>\n<li>Place the main information at the beginning of the text. You can highlight it in bold.<\/li>\n<li>If the description text is long, use subheadings and paragraphs to make it easier to read.<\/li>\n<li>If you can shorten the text without losing information, do it.<\/li>\n<\/ul>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>Present products as part of a particular lifestyle. Think about how your product can help make your users&#039; lives more fun, enjoyable, or efficient. Show how a bike can make a client healthier and happier; or how sunglasses will help him stay on trend.<\/p>\n<p>If necessary, explain how you formed the price. Many customers prefer not to buy expensive goods in online stores. If you decide to work with the premium segment, the product card should explain why the price is so high: tell us about the cost of high-quality materials, production features, etc.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;||16px||false|false&quot;]<\/p>\n<h2><strong>Testimonials<\/strong><\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>The presence of reviews adds credibility to the product page and increases conversion. Text reviews, Instagram photos, video reviews are great ways to build consumer trust. To motivate customers to leave reviews, you can invite them to ask questions right on the product card.<\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p style=\"text-align: center;\"><em>Text reviews<\/em><\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p style=\"text-align: center;\"><em>Reviews from Instagram<\/em><\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>Do not delete negative reviews. They increase the credibility of your online store. Answer them correctly.<\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;||16px||false|false&quot;]<\/p>\n<h2><strong>Choice of modifications<\/strong><\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>This feature allows you to go to the same product with a single click, but in a different color, from a different material, etc. It is very convenient if when switching the color icon, the product is automatically repainted.<\/p>\n<p>When implementing such a feature, pay attention not only to logic and convenience, but also to examples of competitors. For example, in online furniture stores, it is customary to place the available colors of products in colored squares. Users are already accustomed to this view. If you want to go beyond the accepted rules, it should be done very carefully.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/vibor_modifikaciy.png&quot; title_text=&quot;vibor_modifikaciy&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>Modifications should be placed in a logical order: the price is on top, then the choice of color, the choice of memory size and the &quot;Buy&quot; button. This gives users a clear algorithm of actions and motivates them to make a purchase.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/vibor_modifikaciy_2-1.png&quot; title_text=&quot;vibor_modifikaciy_2 (1)&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot; 4.8.0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>If there are not too many options, and their names are not too long, it is better to show all modifications in a row, without using a drop-down list. Clicking on the list is an extra action that you can most often do without.<\/p>\n<p>Modifications that are not available, it is better to make them gray. Unnecessary clicks to products that are out of stock annoy users.<\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>Also, on the product card, you need to indicate dimensional grids, if necessary. Different manufacturers may have different sizes. Dimensional grids eat up a lot of space, so it\u2019s better to place only a clickable \u201cSize Chart\u201d button on the product card. After clicking on it, either a new page will open, or a pop-up window will appear with detailed information. Instructions can be added to the table, for example, how to properly measure the foot.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/vipadaushiy_spisok.png&quot; title_text=&quot;vipadaushiy_spisok&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/unnamed_13.png&quot; title_text=&quot;unnamed_(13)&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;||16px||false |false&quot;]<\/p>\n<h2><strong>breadcrumbs<\/strong><\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>This part of the product card allows you to navigate the online store and return to the desired page in a few clicks. Such an element is especially important for users who went to the product card directly from the search engine. The client will be able to see the names of sections and subsections of the online store and, possibly, see other products.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/hlebnie_kroshki.png&quot; title_text=&quot;hlebnie_kroshki&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;||16px||false|false&quot;]<\/p>\n<h2><strong>Terms of delivery, guarantee and return<\/strong><\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>If analytics shows that users visit your site, go to the product card, but then leave - think about what could stop them. Perhaps you should place a block with delivery conditions and return guarantees next to the Buy button. Having received the most complete information, users will be able to get rid of doubts and make a purchase.<\/p>\n<p>Use tabs and pop-ups to style these blocks. This will help users get all the information they need, and the page itself will not look overloaded.\u00a0<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/oplata_dostavka.png&quot; title_text=&quot;oplata_dostavka&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p>On the product card, you should also indicate the estimated delivery date, so that customers understand whether it suits them. Many people buy goods for a specific date, for example, for a birthday. Not receiving the package with the order on time, the user may leave a negative review.<\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot; custom_margin=&quot;||16px||false|false&quot;]<\/p>\n<h2><strong>How to design the marketing fields of a product card<\/strong><\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<h3><strong>Bundle or &quot;Buy Together&quot;<\/strong><\/h3>\n<p>This is the field at the bottom of the product card, which shows the products that can be purchased in the kit. These can be products from the same set or products that will still need to be purchased. For example, a case or protective glass for a specific smartphone model. To increase the motivation to buy, you can offer a discount on the set.<\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<h3><strong>Personalized recommendations<\/strong><\/h3>\n<p>The fields &quot;Recommended products&quot;, &quot;Similar products&quot; and &quot;See also&quot; help to increase the average check by prompting the user to select one or more items. For example, if a client puts shampoo for dry hair in the basket, he can be offered a balm or mask from this series. The user will not have to search for these products on their own, and you will receive additional sales.<\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<h3><strong>Products viewed<\/strong><\/h3>\n<p>This field allows you to return to previously viewed products in one click. The block should be placed under the main information. It will be useful if you have a lot of doubtful customers who look at products for a long time, but do not place an order.<\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<h3><strong>Report availability button<\/strong><\/h3>\n<p>If the user liked the product, but it is not available in the desired color or size, he can use the &quot;Notify when in stock&quot; button. When the product becomes available, the user will receive a notification email.<\/p>\n<p>The \u201cNotify when available\u201d button is better placed in place of the \u201cBuy\u201d button. This is the first thing the user looks for on the page, so he immediately knows that he has the opportunity to get the desired product, but a little later.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/soobshit_kogda_poyvitsya.png&quot; title_text=&quot;soobshit_kogda_poyvitsya&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<h3><strong>Add to Favorites or Add to Wishlist Icon<\/strong><\/h3>\n<p>This icon allows the user to add the products they like to their wish list. It is better to place it near the &quot;Buy&quot; button.<\/p>\n<p>After a certain time, you can start a chain of letters with a reminder of the products that are in your favorites. In letters, you can offer discounts on the products you like and warn that the product will soon be withdrawn from sale.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/dobavit_v_zelaniya.png&quot; title_text=&quot;dobavit_v_zelaniya&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p style=\"text-align: center;\"><em>Wish Icon<\/em><\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/unnamed_4.png&quot; title_text=&quot;unnamed_(4)&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p style=\"text-align: center;\"><em>Wish List Email Marketing<\/em><\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<h3><strong>Add item to compare list<\/strong><\/h3>\n<p>This function is very useful for products with a lot of technical characteristics: gadgets, household appliances, baby strollers, etc. It clearly shows how the two products differ. It should be placed at the top of the page, not far from the &quot;Buy&quot; button.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/dobavit_v_spisok_sravneniya.png&quot; title_text=&quot;dobavit_v_spisok_sravneniya&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p style=\"text-align: center;\"><em>Button in the product card<\/em><\/p>\n<p>4.8. 0\u2033 _module_preset=&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<p style=\"text-align: center;\"><em>Comparison of two selected products on the site<\/em><\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<h3><strong>stock countdown<\/strong><\/h3>\n<p>Such a widget visually visualizes the limited duration of the promotion, and motivates users to place an order as soon as possible.<\/p>\n<p><a href=\"https:\/\/dits.md\/en\/creating-online-shops\/\">Online shopping<\/a> place this block differently. It works well both above and below the price. The main thing is to use the countdown function in a dosed way, not on every product.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/obratniy_otschet.png&quot; title_text=&quot;obratniy_otschet&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<h3><strong>Accumulative discount<\/strong><\/h3>\n<p>This field in the product card shows what kind of discount the user receives due to constant purchases. For example, an online store can offer a 10% discount on all products if the total amount of customer purchases is more than UAH 2,000.<\/p>\n<p>A cumulative discount motivates users to log in to an online store. In the future, you can use this information in marketing activities.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&quot;https:\/\/dits.md\/wp-content\/uploads\/nakopitelnaya_skidka.png&quot; title_text=&quot;nakopitelnaya_skidka&quot; show_in_lightbox=&quot;on&quot; align=&quot;center&quot; _builder_version=&quot;4.8.0&quot; _module_preset =&quot;default&quot; locked=&quot;off&quot;][\/et_pb_image][et_pb_text _builder_version=&quot;4.8.0&quot; _module_preset=&quot;default&quot;]<\/p>\n<h3><strong>\u0421onclusions<\/strong><\/h3>\n<p>To create an \u201cideal\u201d product card, you need to know your product, audience, and the specifics of the niche in which you work. Be sure to test all changes and implement the most successful solutions - there is no one right recipe. If your buyer likes the visual, price and description of the product, the likelihood that he will make a purchase will increase significantly.<\/p>\n<p style=\"text-align: right;\"><strong>A source:\u00a0<a href=\"https:\/\/promodo.ua\/\" rel=\"nofollow noopener\" target=\"_blank\">Promodo.ua<\/a><\/strong><\/p>\n<p>[\/ et_pb_text] [\/ et_pb_column] [\/ et_pb_row] [\/ et_pb_section]<\/p>","protected":false},"excerpt":{"rendered":"<p><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">the main<\/span><\/p><\/nav>How to design the main fields of a product card When a user opens a page, he should immediately pay attention to the photo, price, terms of payment and delivery, and the \u201cBuy\u201d button. That&#039;s why designers make these reference objects bright and place them along the path of the user&#039;s gaze. The main anchor and the brightest spot is the photograph, from where the user begins to look at the page. Photos and videos Clients [\u2026]<\/p>","protected":false},"author":4,"featured_media":12440,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-12437","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/posts\/12437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/comments?post=12437"}],"version-history":[{"count":10,"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/posts\/12437\/revisions"}],"predecessor-version":[{"id":12583,"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/posts\/12437\/revisions\/12583"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/media\/12440"}],"wp:attachment":[{"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/media?parent=12437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/categories?post=12437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dits.md\/en\/wp-json\/wp\/v2\/tags?post=12437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}