{"id":3344,"date":"2020-01-20T10:14:15","date_gmt":"2020-01-20T09:14:15","guid":{"rendered":"https:\/\/capturly.com\/blog\/?p=3344"},"modified":"2023-06-08T12:05:16","modified_gmt":"2023-06-08T10:05:16","slug":"product-page-design-that-sells","status":"publish","type":"post","link":"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/","title":{"rendered":"Product Page Design That Sells"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Designing a website that attracts new customers is not easy. Of course, you need to have great content and also having a good inventory on your site is a must. But one of the most important things to a successful and attractive website is the page design. This is, arguably, the most challenging thing to do. Many people have been trying to strike the balance between these three aspects, but not many have got it completely right.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Many big and small businesses have done product page design very well, and they have been rewarded richly for it. Some companies try to be a bit more direct in the sense that they display their items directly to the customers, while others try to create a unique and authentic experience with a design that is seen nowhere else.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium\" src=\"https:\/\/media.giphy.com\/media\/l0MYEqEzwMWFCg8rm\/giphy.gif\" alt=\"unique user experience reaction\" width=\"480\" height=\"270\" \/><\/p>\n<p><span style=\"font-weight: 400;\">For this reason, we have scouted and found some of the <a href=\"https:\/\/blog.elink.io\/tips-on-creating-and-marketing-product-page\/\">best product page design<\/a> layouts that have been used by big and small companies and have been very successful, and ones that you can incorporate in your business right now, even if you are a small business. We will take a look at some of the best layouts and analyze just why they have been so successful.<\/span><\/p>\n<h2><b>What makes a good product layout?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">In addition to a good graphical design and a good layout of things, there are some other considerations that you need to keep in mind in order to impress customers. For starts, you need to keep in mind the <\/span><b>positioning of elements<\/b><span style=\"font-weight: 400;\"> on your product page. Firstly, you need to identify what you want to stick out on the product page; whether it is the image, the features of the product or both. Then you need to design the page accordingly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When it comes to customers, they (we) are either attracted or turned off in a matter of seconds. This is why first impressions are so important for these types of pages. <\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">You need to pay close attention to your product page and what you put <\/span><b>above the fold<\/b><span style=\"font-weight: 400;\"> and the information that you put <\/span><b>under the fold.<\/b><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">The information and data above the fold should attract the user, as this is where most decisions are made (then you keep loosing visitor&#8217;s attention). Things like product images, price, customer ratings, variations of the product and the add-to-cart button should be. These elements are essential on any product page and should be above the fold. Under the fold should be additional information \u2013 quality, informative stuff like customer reviews, description and maybe a demonstration video.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1722 size-full\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2018\/08\/capturly-heatmap-2-e1574072716604.png\" alt=\"Capturly scroll heatmap\" width=\"760\" height=\"445\" \/><span style=\"font-weight: 400;\">Another thing to consider is to keep your layout <\/span><b>unique. <\/b>By providing a great <a href=\"https:\/\/capturly.com\/blog\/introduction-to-user-experience-design\/\">user experience<\/a> in e-commerce<span style=\"font-weight: 400;\">, customers will easily associate with your site and recognize you and your business much easier just by looking at the page design. This will not only make you unique but also you will create a lasting impression on the customer and they will want to come back for that experience.<\/span><\/p>\n<h2><b>Some of the best product layouts<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Now, we will take a look at some of the layouts that have been used and have worked wonders for bigger companies but can also be used by a smaller business right now. Not all of them have complex programming formulas behind them and you do not need to spend an awful lot of money on them. Instead, you can use these layouts as inspirations for your future layouts.<\/span><\/p>\n<h3><a href=\"https:\/\/www.vw.com\/en\/builder.html\"><b>Volkswagen<\/b><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">The Volkswagen product page design is a really interactive one and very unique because it lets customers customize their own car and the features of it. You might think: \u201cwhat could be so interesting about a car website and the products?\u201d, right. But this one actually nails the user interaction very well.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It lets you customize your own perfect car \u2013 it all starts with choosing the engine, the version of the car, the color and styling (you can even choose your seats and the choice between different colors) and all the features of the car. Here you will have a variety of choices that will make you interested in the car and might make you actually buy it.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3347 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-15-at-12.32.06-2-1024x518.png\" alt=\"personal ux in Ecommerce\" width=\"760\" height=\"384\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-15-at-12.32.06-2-1024x518.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-15-at-12.32.06-2-300x152.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-15-at-12.32.06-2-768x388.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-15-at-12.32.06-2.png 1902w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">It is quite a unique attempt to attract customers in car and Volkswagen was probably the first company to do so \u2013 others have followed suit since. Not only is it immersive, but it lets the users choose what they want to choose.<\/span><\/p>\n<h3><a href=\"https:\/\/bellroy.com\/explore\/slim-your-wallet\"><b>Bellroy<\/b><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Bellroy offers another <a href=\"https:\/\/muffingroup.com\/blog\/best-interactive-websites\/\">interactive layout<\/a> for customers to play with. The product page of the Bellroy wallets display all of the important features and actually focus on the main selling point of Bellroy wallets \u2013 they are thinner compared to other wallets out there, and they demonstrate this by giving you an interactive graphic where you will be able to see how the wallet would look like with cards in it.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium\" src=\"https:\/\/media.giphy.com\/media\/iF6QFA0MslsrBiFmeq\/giphy.gif\" alt=\"animated good user experience boost conversion\" width=\"480\" height=\"276\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Not only that but below the fold, there is much more information that describes the product in more detail. This is the closest thing to seeing the product live in online shopping that you will ever see. When you open a specific page of the product, you also get all the essential information on one page.<\/span><\/p>\n<h3><a href=\"https:\/\/www.daily-harvest.com\/app\/browse\/smoothies\"><b>Daily Harvest<\/b><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Daily Harvest is a company that focuses on delivering quality food products right to your doorstep. They make smoothies, soups and other healthy products that taste great. What impressed with this layout is the product description, which is very convincing and reading the description alone makes you want to try one of these smoothies.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you open a product page, you will be able to see the description, and also all the ingredients that were used to make the product. These ingredients will also be described in an interesting manner, that will attract your interest. Also, the landing page is very well designed too \u2013 very simple with a call-to-action button very clearly visible.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium\" src=\"https:\/\/media.giphy.com\/media\/mBwa0xJBQfr4qz4FlC\/giphy.gif\" alt=\"detailed product page Ecommerce\" width=\"480\" height=\"310\" \/><\/p>\n<h3><b><span style=\"color: #2f85dc;\"><span style=\"caret-color: #2f85dc;\">All-birds<\/span><\/span><\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The product page layout of this company has absolutely all the essential ingredients that are required for a good product page. As we have identified above, it is very important to display quality information above the fold. We can see all of these ingredients on this product page \u2013 price, sizes, colors, a brief description of the product and a call-to-action button (select a size).<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3346 size-full\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-15-at-12.13.25-2-e1573816486986.png\" alt=\"product page that sells Ecommerce\" width=\"760\" height=\"332\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Below the fold, we find some very informative and rich information; from material description to benefits of the materials and the products and positive customer reviews. Overall, this product page offers absolutely everything that is needed on a product page for a successful marketing campaign.<\/span><\/p>\n<h3><a href=\"https:\/\/www.fitbit.com\/store\"><b>Fitbit<\/b><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Fitbit is a company that sells smartwatches for health and fitness. Instead of product description on the product page above the fold, we get a very convincing and brief description of the product and its features. We also get a good quality image and also we can choose the colors of the product, the size and choose the edition.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If we scroll further down, we will see absolutely everything we need to know about the product. We will learn about the features and see the descriptions of them, we will be able to see pictures of the product, clear and concise information about the sizes and also a very comprehensive check of specs. We get everything we need from a single page that is organized very well.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium\" src=\"https:\/\/media.giphy.com\/media\/kBfiBOLd6qg3MAq9SH\/giphy.gif\" alt=\"detailed product description ux\" width=\"480\" height=\"254\" \/><\/p>\n<h3><a href=\"http:\/\/orangina.eu\/products\"><b>Orangina<\/b><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">Orangina is a company that produces citrus beverages and has a lot of tradition. But the product page is something very unique. When we enter the home page of the products, we are able to see all the products they offer. If we hover over the products with our mouse, the products will produce an effect and will shake around like they are dancing. Very interesting and also manages to get attention. The colors are also very bright, which actually fits in well with the product.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" src=\"https:\/\/media.giphy.com\/media\/XGOpzj8Z9VwkjKJyB0\/giphy.gif\" alt=\"unique user experience product page\" width=\"480\" height=\"254\" \/><\/p>\n<p><span style=\"font-weight: 400;\">If we click on a certain product, we then get a full description of it. It is brief but contains all the information that we need \u2013 a photo, the contents of the beverage and taste description. We also get an option to see the full nutrition info about the beverage. All in all, a very attractive and unique design.<\/span><\/p>\n<h3><a href=\"https:\/\/www.awaytravel.com\/eu\/en\/suitcases\/bigger-carry-on\/navy\"><b>Away<\/b><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">What do we think about when we are buying suitcases? We think about the size of the suitcase and the uses of the suitcase and how it will fit our needs. Well with Away product page layout, you get all this information. On the right-hand side of the page, you get product reviews, which are very important, but also the description of the product and some personalization options for it. A very clear product page that explains exactly what the product is meant for.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3345 size-full\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-15-at-11.27.20-e1573814317876.png\" alt=\"personalised user experience\" width=\"760\" height=\"542\" \/><\/p>\n<h2><b>Conclusion<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">The <a href=\"https:\/\/capturly.com\/blog\/psychology-proven-cro-best-practices-of-your-product-page\/\">importance of having a good product page is big<\/a>. It plays a role in promoting your product and making it more attractive to the customers. In this post, we have looked at some of the best product page layouts that have been used by large companies. You can incorporate some of these layouts into your business, and hopefully, you will see improvement in sales in no time.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Designing a website that attracts new customers is not easy. Of course, you need to have great content and also having a good inventory on your site is a must. But one of the most important things to a successful and attractive website is the page design. This is, arguably, the most challenging thing to<\/p>\n","protected":false},"author":28,"featured_media":3350,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Product Page Design That Sells - Capturly Blog<\/title>\n<meta name=\"description\" content=\"The importance of a good product page is big. It plays a role in promoting your product and making it attractive to the customers. The best product page layouts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Product Page Design That Sells - Capturly Blog\" \/>\n<meta property=\"og:description\" content=\"The importance of a good product page is big. It plays a role in promoting your product and making it attractive to the customers. The best product page layouts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/\" \/>\n<meta property=\"og:site_name\" content=\"Capturly Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-20T09:14:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-08T10:05:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/11\/product-page-design-that-sells-e1574069075327.png\" \/>\n\t<meta property=\"og:image:width\" content=\"760\" \/>\n\t<meta property=\"og:image:height\" content=\"498\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Gabriella\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gabriella\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/\",\"url\":\"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/\",\"name\":\"Product Page Design That Sells - Capturly Blog\",\"isPartOf\":{\"@id\":\"https:\/\/capturly.com\/blog\/#website\"},\"datePublished\":\"2020-01-20T09:14:15+00:00\",\"dateModified\":\"2023-06-08T10:05:16+00:00\",\"author\":{\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c\"},\"description\":\"The importance of a good product page is big. It plays a role in promoting your product and making it attractive to the customers. The best product page layouts.\",\"breadcrumb\":{\"@id\":\"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/capturly.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Product Page Design That Sells\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/capturly.com\/blog\/#website\",\"url\":\"https:\/\/capturly.com\/blog\/\",\"name\":\"Capturly Blog\",\"description\":\"Optimize your website\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/capturly.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c\",\"name\":\"Gabriella\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g\",\"caption\":\"Gabriella\"},\"url\":\"https:\/\/capturly.com\/blog\/author\/gabriella\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Product Page Design That Sells - Capturly Blog","description":"The importance of a good product page is big. It plays a role in promoting your product and making it attractive to the customers. The best product page layouts.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/","og_locale":"en_US","og_type":"article","og_title":"Product Page Design That Sells - Capturly Blog","og_description":"The importance of a good product page is big. It plays a role in promoting your product and making it attractive to the customers. The best product page layouts.","og_url":"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/","og_site_name":"Capturly Blog","article_published_time":"2020-01-20T09:14:15+00:00","article_modified_time":"2023-06-08T10:05:16+00:00","og_image":[{"width":760,"height":498,"url":"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/11\/product-page-design-that-sells-e1574069075327.png","type":"image\/png"}],"author":"Gabriella","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gabriella","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/","url":"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/","name":"Product Page Design That Sells - Capturly Blog","isPartOf":{"@id":"https:\/\/capturly.com\/blog\/#website"},"datePublished":"2020-01-20T09:14:15+00:00","dateModified":"2023-06-08T10:05:16+00:00","author":{"@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c"},"description":"The importance of a good product page is big. It plays a role in promoting your product and making it attractive to the customers. The best product page layouts.","breadcrumb":{"@id":"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/capturly.com\/blog\/product-page-design-that-sells\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/capturly.com\/blog\/product-page-design-that-sells\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/capturly.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Product Page Design That Sells"}]},{"@type":"WebSite","@id":"https:\/\/capturly.com\/blog\/#website","url":"https:\/\/capturly.com\/blog\/","name":"Capturly Blog","description":"Optimize your website","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/capturly.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c","name":"Gabriella","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g","caption":"Gabriella"},"url":"https:\/\/capturly.com\/blog\/author\/gabriella\/"}]}},"_links":{"self":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/3344"}],"collection":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/comments?post=3344"}],"version-history":[{"count":11,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/3344\/revisions"}],"predecessor-version":[{"id":7538,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/3344\/revisions\/7538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/media\/3350"}],"wp:attachment":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/media?parent=3344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/categories?post=3344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/tags?post=3344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}