是什么让电子商务商店，电子商务？嗯，你在网上卖的产品！那么，为什么我们忽略了我们网上商店中最神圣的页面——产品页面——而给予他们一种母亲般的待遇呢。我们拥有设计精美的主页、光滑的、可浏览的分类页面，但当我们点击这些产品页面时，我们就会受到枯燥乏味的产品描述、低分辨率的产品形象、甚至是更糟糕的行动呼吁的欢迎。一个常见的假设，也是一个摧毁目标的假设是: 已经达到产品页面的用户可能或将要进行购买。这样的假设可能会有效地推广网站的其他网页，但不是你的产品页面。我们确实需要开始对待产品页面多一点尊重，并几乎与(至少在设计方面)所有其他重要的网站登陆页面。实际上，仔细想想，产品页面是最重要的页面，因为所有流量都是在那里指向的。

我们需要什么样的产品页面? a 范式。转变。

我们花费时间、精力和金钱对产品页面进行彻底的改造是非常重要的。最近，产品页面也出现了单页面设计的趋势(参见 fitbit. com- https://www.fitbit.com/charge#i.14kq4nl15ohdzv ) ，尽管它为设计师提供了最大的区域，以适应所有的元素来制作一个理想的产品页面，但对于大型电子商务商店的产品和库存达数十万的产品是不可行的。因此，如果你也不确定你的产品页面的单页设计，并且更愿意重新审视你现有的页面，那么这个清单对你实现千禧一代产品页面是一个可靠的指南。

我们的列表包括了所有的东西，从产品图片到“添加到购物车”或“立即购买”按钮的放置。这个列表包括了你绝对应该在你的产品页面上使用的特性，以及一些其他不太常见的实践，你可以遵循这些实践来成倍增加你的产品页面上的转化率。

因此，让我们来看看对于产品页面性能至关重要的因素。但是在我们开始之前，我们想要通知您，没有什么是万能的解决方案，这些最佳实践与其他检查表一样，在很大程度上依赖于测试和实时结果。这份因素清单充其量只是一份指南，在接近你的产品页面时要牢记在心。在最坏的情况下，你可能会误以为这是 CRO 的福音。

1. 更好的产品图像/视频和显示

一个清晰的，可缩放的产品图像以一种迷人的方式呈现，可以从字面上让用户着迷。因此，与其使用低分辨率的产品形象，不如从尽可能多的角度拍摄高分辨率、迷人的产品形象，这将是一个更符合逻辑的选择。作为一个商店老板，你应该意识到用户需要更清楚更密切地看产品图像，他们不是在实体商店购物，在那里产品可以拿起来看。因此，产品展示在分类页面，尤其是产品页面，是必不可少的，是诱人的和清楚的。看看巴宝莉是如何做到的。

一个更有效的产品展示方式是展示正在使用的产品或者播放正在展示的产品的高质量视频。有很多这样的产品视频。这里显示的例子是太平洋安全 RFID 护照持有人随着产品图像。

图片1巴宝莉

图2巴宝莉

图3 Zappos

1.1产品名称和展示-一个次要但关键的领域，一个不能忽视。来到你店里的顾客，通常对他们要找的东西有一个基本的或者通用的概念。例如，如果有人正在寻找白色 t 恤，那么他们将在网站搜索中输入白色 t 恤。然而，你可能有一些其他的名称，甚至一个 SKU 的产品，客户可能无法找到所需的产品，从你的网站离开。让你的客户知道你所谓的“白 t 恤”总是很棒的，这种方式对他们来说是清晰可见的，并且与产品页面的设计主题有所不同。

网站甚至会在产品名称的同时显示星级评分，这样用户在第一眼看到产品的时候就能了解到宝贵的信息！图4: 在 nastygal 网站上显示的清晰明了的产品名称，以及用心形图标突出显示的产品点赞数。图3(上图)和图5展示了 Zappos 是如何做到的。

图片4

图5

1.2产品可用性-认为它神圣！没有什么比让客户首先知道产品的可用性更好的服务了！看看 otteny 的网站和 net-a-porter.com 是如何做到的。(图6)

图6-Otte NY

图7-netaporter. com

2. 有说服力的产品描述

好吧，那么你是一个商店老板，有成千上万的产品需要管理和储存。你不会被产品说明打扰。我们明白。但是制造商的描述也不能满足你的要求。产品说明需要信息丰富，详细，易于阅读，吸引人，不应该在类似的产品范围重复。自定义产品描述将帮助您摆脱惩罚性的重复内容。

您可以使用不同的结构来表示产品信息的不同部分，例如指针、子标题等等。使用不同的方式展示统计数据或突出产品 USPs ——使用诸如“这将是一个你会感谢自己，即使多年后”或“没有什么比它的完美”等短语，这取决于产品的类型或特点。所有这些都必须牢记产品页面的设计和概念。您甚至可以使用“阅读/显示更多”选项(图10) ，这样您就可以为客户提供长或短描述的选择。没有绝对正确或错误的方式写的说明，但是是的，保留你的产品的制造商说明，不投入任何时间或精力在改善他们将花费你。保持真实，与你的商店的个性同步，让读者感兴趣。

请看下面的图片，了解不同的商店如何使用产品描述作为一个伟大的电子商务接触点。

简短的描述

图片 -8莎拉 · 弗林特

短小分类描述

图片 -9 Jon buscemi

短小分类描述

这里的描述被分为产品简介、 usp 和重要信息。

带有可扩展的长描述选项的简短描述: 在这里，客户可以看到简短描述，但也可以通过点击突出显示的标签显示更多信息来查看产品的更多详细信息。

这将导致一个下拉菜单，提供更多的产品信息

Image -10 Zappos

图片 -10 Zappos

图片 -11玛莎百货

图片 -12

在上面的图片中你会注意到，当点击查看更多细节按钮时，Marks and Spenser 产品页面会出现一个带有详细描述的新窗口，而不是下拉菜单。这也是一个节省页面空间的好方法。

长篇大论:

长的描述不应该被完全禁止，仅仅因为简洁可以在网页上节省一些空间。如果表现良好，就像下面的图片一样，使用标题、小节、指针和标记，长描述也能很好地工作。

图片 -13亲爱的凯茨

图片-14树枝和蜂蜜

另一种写产品描述的方法是在内容框中包含所有重要的标签

图片 -15道路单车出口

你可以决定以任何方式撰写和展示你的产品说明，但请确保:

1. 这并不是对重量、尺寸和其他特征的懒散提及，而是一本有趣的读物。换句话说，不是制造商的描述
2. 它应该易于阅读，呈现良好，并对购买的客户有用
3. 它应该与你的网站设计和整体主题同步。如果你想要干净、简洁、无噪音，那么也让你的内容保持同样的精神

3. 强调产品的尺寸/颜色和价格显示

产品的所有重要特征和尺寸都应该清楚地突出/突出。用户应该能够很容易地选择大小和颜色，而不必搜索这些细节。你可以把它和产品描述区分开来，把它们放在一个盒子里，或者以一种不会显得太惹人讨厌的方式来展示。你对内容的每一处修改都必须与页面的设计和主题保持一致。另一个需要注意的重要事项是，提供一个关于所选大小不可用的通知(参见图18) * 。

图片 -16莎拉 · 弗林特

图片 -17《劲爆女孩》

* 如你注意到下面划线的短语:

你的尺寸卖完了吗？

大小列表是可点击的，将用户带到:

图片 -18《劲爆女孩》

这是一个很好的方法，可以预先解决用户在做出购买决策和主动提供解决方案时可能遇到的问题。

另一个很好的做法是提到被作为尺寸标准的国家。请参考下面的图片

图片 -19《淫荡的女孩》

一些商店提到了它和他们提供的尺寸一起，比如:

图片 -20 Jon Buscemi

对于一家提供国际购物和运输服务的美国或欧洲商店，你必须对来访客户的思维流程有直观的了解。看看莎拉 · 弗林特商店提供的尺寸指南:

图片 -21莎拉 · 弗林特

同样，您必须向国际客户提供查看其所属国家货币定价的选择权。当我们谈到产品定价和详细说明时，我们就会谈到这一点。

下降

另一种显示尺寸和颜色的方法是引入下拉框。下拉菜单很常见，但是当然不如水平菜单显示那么面向用户和友好，水平菜单显示提供了一种快速简单的方式来选择大小。然而，如果大小超过 s，m，XL，或 XXL，那么你必须考虑下降，而不是过度拥挤你的产品页面房地产。

图片 -22 Job Buscemi

图片 -23 Zappo

如果你想尝试一种全新的设计和功能，看看 Fitbit 是如何做到的。Fitbit 的产品描述跨越了整个页面，包含了详细的功能和尺寸。大小和颜色显示在一个窗口中，用户一点击“立即购买”按钮就会出现。

图片 -24 Fitbit 充电器

由于尺寸是任何网上购物者最关心的问题之一，商店现在尽可能多地提供关于尺寸的有用信息。从模特统计数据到标准尺寸指南，商店为用户提供所有的工具，他们可以使用这些工具来接近适合他们的尺寸，比如说，几年前他们可以更有效地适应这些尺寸。请看下面的例子:

图片: 25 Nasty Gal

4. 注意添加到购物车按钮

简单地说，让它在周围的元素中显得突出和显眼！

一种方法是，你可以有“添加到购物车”按钮的权利，你提到的细节或有它出现在别处所有的时间。有些商店甚至有购物车按钮出现只有当用户选择的大小或颜色。这可能不是最好的做法，因为用户有强烈的意图购买，可能会生气，没有找到“添加到购物车”按钮。

不要让“添加到购物车”按钮得到周围的设计或主题元素伪装。以下是正确和错误方法的例子:

图片 -26《劲爆女孩》

图片-27嫩枝和蜂蜜

图片 -28 Fitbit

加入购物车

这里的“添加到购物车”按钮是与周围环境合并，可能会错过，如果用户没有注意到。虽然一个人可能不会完全错过它，但一个按钮，更好地提出肯定会赢得点，从一个 CRO 专家。

5. 突出产品价格/成本

清楚而明确地显示产品的成本。用户应该能够注意到它，而不需要寻找它。您可以选择突出显示它(即使它是过分的) ，或者让它采用与产品名称和其余内容相同的基调和主题。

图片 -30 Zappos

(当价格突出显示)

图片-31树枝和蜂蜜

(价格不会突出，但也不会丢失!)

这里的定价并不像应该的那样可以区分。字体和字体大小几乎是相似的，它可能会丢失。这里看起来可以原谅的唯一原因是页面的设计是无噪音的。

图片 -32莎拉 · 弗林特

5.1折扣和削减价格:-还要注意的是，比强调价格更重要的是，在产品上用明确的语言，突出显示任何折扣或销售价格。

图片 -33买鞋

The thing, that Shoebuy.com is doing right here, is that they’re not only showing the regular pricing but distinctly mentioning what the user has to pay under “You Pay”. You can even strike out the original price and show the discounted price in a different color as shown below:

Shoebuy 网站在这里做的事情是，他们不仅展示了常规价格，而且清楚地提到了用户在“ You Pay”下需要支付的费用。您甚至可以删除原始价格，并显示不同颜色的折扣价格如下所示:

图片来源: Nasty Gal

这并没有给客户留下任何不可理解的困惑空间:

在下面的例子中，给出了三个价格，而且给出的方式乍一看可能会令人困惑。原来的价格被剔除了，这是应该的。然后销售价格用另一种颜色突出显示，这也是正确的，但是造成价格混淆的是用户在50% 折扣下节省的金额。因为它没有被很好地呈现出来，所以它更多的是分散注意力而不是提供信息。

图片-35 Fab Furnish

5.2)在产品页面上显示外币价格:-如果你的商店提供国际运输，那么你的商店必须具备允许用户以自己的本币查看价格的功能。即使您没有在您的电子商店中使用“翻译成其他语言”的功能，您也必须提供以多种货币显示的价格——主页和产品页面。看看 Nasty Gal 是如何使用这个功能的:

图片 -36《劲爆女孩》

图片 -37劲爆女孩

6)强调产品评论: 响亮而清晰

产品评论现在就像优化过的产品描述一样重要！如果没有产品评论或者产品页面上的标签，你就没有利用一个对顾客购买决策有直接影响的关键 CRO 因素。产品评论不仅仅是为了增加产品页面上独特的内容流量，而且还可以作为实用的帮助指南，帮助客户到达你的页面并考虑购买你的产品。这是一个很好的方式来传达你的产品的可信度，从你的其他客户的证词将比你说的任何话和你自己怎么说更重要。来访的客户总是更多地依赖于客户的体验和评论，以获得产品的实用性和在商店的整体购物体验。

所以，当在你的产品页面上包含评论时，确保它们是突出的、引人注目的，而不仅仅是充满赞扬。永远保持真实。查看一位客户在 dearkates 网站上发布的关于退货的评论，图片如下:

图片 -38亲爱的凯茨

以产品评论为特色的商店对于那些已经习惯于网上购物的用户来说自动变得更值得信赖。一个聪明的用户是不会忽视这样一个事实的，那就是一个商店不会提供任何评论，除非它是一个非常受欢迎和知名的品牌。

许多商店已经开始使用产品调查来辅助复杂的评论，这样用户就不必花费关键的时间来阅读一个相当长的客户叙述。

图片 -39 zappos. com

图片 -40 zappos. com

创建像 Shoe Buy 这样的针对特定产品的调查反映了商店方面伟大的直觉思维。

图片 -41买鞋

你也可以通过为基于 Magento 1的商店安装一个扩展来使这些产品评论对 seo 友好。

另一个提高客户评论可信度的好方法是让他们发布使用该产品的图片，比如 Think Geek (图片 -42)和 Modern Line Furniture (图片43)。许多商店现在已经开始邀请用户发送他们销售的产品的图片，而他们正在实际使用。你甚至可以通过向发布产品图片、有价值的折扣或在你的社交页面/博客上发布功能等评论的客户提供奖励来激励这种做法。

现代家具有一个独立的页面完全致力于评论和客户的照片。考虑到图片的范围和质量，评论的数量和这个网页提供的机构规模，这似乎是合乎逻辑的事情。

Image-42 Think Geek

图片 -43现代线条家具

7)展示相关产品

让你的客户知道什么能够补充选择的产品，这样客户就可以继续从产品页面添加到他们的购物车中，而不必返回到不同的类别页面。展示一个相关的产品标签或一个展示产品的窗口，用户可以购买补充他或她的原始购买，而不是疯狂地搜索他们在这么多的产品和类别的网络。

下面的图片不仅显示了其他相关产品，但也可以购买的产品，以完成的外观-从化妆鞋为跳伞服！

你可以主题化、自主化地选择相关产品，也可以选择那些被其他客户查看/购买次数最多的产品。

8. 清楚地显示航运信息和退货政策

在产品页面上向客户提供所有关于运输和退货的信息。如果有免费送货的产品，然后提到它可以增加机会的用户点击购买现在按钮。

图片 -45买鞋

图片 -46 zappos. com

图片 -47劲爆女孩

图片-48 net-a-porter.com

图片来源: 49 singer22. com

图片: 50 Nasty Gal

8.1)附加必备内容-一旦页面的基本结构被排序，你就可以准备一个很棒的产品页面了。不要忘记包含按钮，例如添加到收藏夹/愿望列表、客户帮助和其他与产品相关的项目。如果有条款规定顾客可以在手机上订购产品，那么就把它放在显眼的地方。

Image-51 Shoptiques.com

Image-52 Shoptiques.com

图片 -53 Otteny.com

您也可以给予客户，自由购物后，当新款式的库存。这样，他们不仅会感觉到自己的压抑得到了认可，而且还会保持对回归的兴趣。

图片 -54 zappos. com

8.2)向客户展示有多少人将产品添加到他们的最爱或愿望列表中—— t 可以帮助客户知道他或她的选择实际上是受欢迎的和首选的。

图片: 55 Nasty Gal

Image-56 Shoptiques.com

8.3)社交分享和喜欢-允许客户分享和查看特定产品的社交分享对于你的在线商店和那些可能出现在大多数社交媒体上的客户来说都是一个巨大的优势。即使用户没有购买你的产品，但是在任何一个流行的社交分享网站上分享了它，这个产品也会得到所有的关注，而这些关注是在你的商店里作为网页之一存在的。如果你还没有，在你所有的产品页面上启用这个功能。还有一个 Magento 扩展，允许用户和访问者在 Whatsapp 上分享产品页面的网址，除了通常的 Facebook、 Twitter 或 instagram 股票。你可在此下载扩展程式。只有在移动网站上才能看到 Whatsapp 的分享按钮。所以现在又多了一个理由，为什么你有响应式的产品页面设计。

请注意-所有这些额外的必须拥有和社会份额的地位是极其重要的。很少有客户会滚动到产品页面的底部，仔细检查每一个方面。即使他们这样做，也不能保证客户不会忽略这些。在下面的 Nasty Gal 跳伞服的例子中，社交分享图标是一种通向页面底部的方式，这可能会导致在第一时间启用功能的努力完全徒劳。

60 Nasty Gal

社交分享按钮的位置太低了，但设计师在产品页面设计中引入了一个明智的做法，那就是向上滚动的“ Top”按钮，它可以抵消向下滚动查看社交分享的不那么好的感觉。

8.4)客户支援-在最后决定完成购买前，可能会有一些问题和顾虑。有了诸如在线聊天这样的工具，客户援助细节对于想要询问他或她选择的产品或者对付款或运输有其他一般性疑问的用户来说是非常有帮助和有用的。

Image -61 Nasty Gal

图片 -61劲爆女孩

Image-62 Shoptiques.com

微小的变化可能会导致分析数据的大幅飙升

在您做出这些更改之后，请跟踪流量图，以便与标准页面的数据进行比较。

Touchpoint 优化并不是简单地将产品放在网站上，而是以一种减少用户迷路(或者眯着眼睛寻找有用信息)的方式展示产品。这是一个更好的店内体验的提醒，但最重要的是导致转换的可能性。

但是，为了包含所有这些元素，您不能在页面加载速度上妥协。与您的开发团队交谈，看看您如何能够拥有一个“优化良好”的产品页面，而不会丧失在线购物最基本的方面——快速和快速的过程——在交易中。