{"id":14117,"date":"2018-01-11T14:40:57","date_gmt":"2018-01-11T14:40:57","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14117"},"modified":"2018-01-11T14:53:12","modified_gmt":"2018-01-11T14:53:12","slug":"product-content-key-ecommerce-page-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/","title":{"rendered":"Product Content: The Key to eCommerce Page Design"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Lots of product marketers feel that their hands are tied when it comes to selling a product. There is probably already a visual style defined for the product itself and for the online shop website, which makes you think the idea that there\u2019s no additional effort required for an online product presentation.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Wrong! First impressions are everything when it comes to content. Content must be seen as a strong symbiosis between design and information. These two foundations need each other: the perfect eCommerce website or app should be visually attractive and, at the same time, it must show all the key information in a balanced, precise, up-to-date and error-free way.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What is the magical combination if you want to merge design and content to get the perfect eCommerce product pages?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Information + Clarity + Fun + Personalization<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A product page design should give everything to users and, at the same time, keep something from them with a bit of interactivity and with some options, just like the traditional experience attached to searching and buying products in a physical store.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A product page only has a few seconds to convince or frighten off a visitor. We\u2019re talking about very few seconds, maybe 5\u2026 or even 3!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What are you going to do with those precious 3 seconds?<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Content & Design: The Twins of eCommerce<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"The best way to keep the user\u2019s attention starting from the first millisecond is spending time, effort and lots of care when creating your eCommerce product pages.\"<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Your first step is the product information, which must be well coordinated inside your company and across all the channels that distribute and display the data. For this purpose, it\u2019s vital for any eCommerce to use specialized software such as a PIM or Product Information Management. If you are truly in charge of your products\u2019 information status, then you should do your utmost when preparing the design for each channel. When you have all your information ready it\u2019s easier to know where to put it and how to create a rich and complete<br \/>\ndesign. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These are the fundamental guides you should follow to achieve a perfect eCommerce product page design:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Clarity and sharpness<\/strong>: The design should be created for sight and touch, with easy-to distinguish elements that are easy to interact with on mobile screens.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Wallpapers<\/strong>: The most effective ones in eCommerce are generally neutral or pure white.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Key colors<\/strong>: You can follow a corporate palette, but the colors must always be uniform and eye-catching, without being garish, and used in key visual zones.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Elements disposition<\/strong>: The most important content elements for the user should always be located at the top of the page: the title, the highlighted image, the price, the \u2018Buy\u2019 button, shipping costs and delivery times.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Data classification<\/strong>: You have to separate the general descriptions from the pure technical specifications (more suitable in bullets). This task is very easy if product content management has already been carried out previously. In addition, it is important to highlight different information according to the product: for example, it\u2019s very important that you include size charts for clothes, assembly instructions for pieces of furniture or video tutorials for cosmetics.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Harmony between product pages<\/strong>: Both the product information and the design elements must be uniform among different pages and channels \u2014 that\u2019s why the synchronization and automation of content management is vital for eCommerce design.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Photo gallery<\/strong>: Image galleries must have high quality and standardized pics, with the same image formats and aesthetic line used in all product pages. A really attractive trend consists in integrating the main product\u2019s photograph with the background \u2014 it would look like if the product is floating on the page.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Interactive elements<\/strong>: Visual support is essential to present and explain products through animations, unique comparisons, an inspiring banner or by giving the user the option to play with the product, such as changing the color of a car, the strap of a watch, the floor of a room...<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Zero distractions<\/strong>: Make sure that pop-up windows with promotions, requests or announcements do not appear on the product pages, since they can distract from the main focus of getting the sale of that product.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Secondary buttons<\/strong>: Options to add the product to a wish list and share it on social media are not that important, but they can be useful. Try to encourage its use through original strategies, such as proposing a specific hashtag for your product.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Simple reviews<\/strong>: It is better to let users score your products with stars and brief opinions than long texts that usually turn to be rants. Your product pages will gain in visual uniformity and users will have to be more concise.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Seasonal design<\/strong>: Take advantage of any occasion to give a boost of personality to your product pages. Christmas, Halloween, Easter, Summer Sales... Any occasion is a unique opportunity to readapt your design, show that you pay attention and make constant updates, and include promotions that encourage visits and purchases.<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Wrap up<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Content and design should always go hand in hand in any eCommerce product page. The type of information highlighted and the resources used may vary according to your product niche, but the fundamental pieces should never be overlooked.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Design never goes to sleep: be innovative and don\u2019t be afraid of being bold or of the latest technical innovations.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And remember that design never goes to sleep: be innovative and don\u2019t be afraid of being bold or of the latest technical innovations. That is the correct attitude if you want to keep your product pages in a constant state of revision and improvement that convinces a spectrum of users that\u2019s becoming more and more demanding every day.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lots of product marketers feel that their hands are tied when it comes to selling a product. There is probably already a visual style defined for the product itself and for the online shop website, which makes you think the idea that there\u2019s no additional effort required for an online product presentation. Wrong! First impressions are everything when it comes&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":200,"featured_media":14125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-14117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Product Content: The Key to eCommerce Page Design | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Lots of product marketers feel that their hands are tied when it comes to selling a product. There is probably already a visual style defined for the product itself and for the online shop website, which makes you think the idea that there\u2019s no additional effort required for an online product presentation. Wrong! First impressions are everything when it comes... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-11T14:40:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-11T14:53:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/01\/Group-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1220\" \/>\n\t<meta property=\"og:image:height\" content=\"560\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/01\/Group-1.png\",\"width\":1220,\"height\":560},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/\",\"name\":\"Product Content: The Key to eCommerce Page Design | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/#primaryimage\"},\"datePublished\":\"2018-01-11T14:40:57+00:00\",\"dateModified\":\"2018-01-11T14:53:12+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/d713bffe9adbe9ba0a44d3a06a7cc44e\"},\"headline\":\"Product Content: The Key to eCommerce Page Design\",\"datePublished\":\"2018-01-11T14:40:57+00:00\",\"dateModified\":\"2018-01-11T14:53:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/product-content-key-ecommerce-page-design\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/d713bffe9adbe9ba0a44d3a06a7cc44e\",\"name\":\"Alvaro Verdoy\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abcf92bb46698556d2521e9b2bf7107d61c946dd13d2cc0dfa636bc7ceeee952?s=96&d=mm&r=g\",\"caption\":\"Alvaro Verdoy\"},\"description\":\"CEO and co-founder of saleslayer.com, the solution that helps companies to curate their product content.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/14117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/200"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=14117"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/14117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/14125"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=14117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=14117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=14117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}