产品页面是购物者在购买之前看到的最后一个东西。
或者,如果事情没有按计划进行,他们在撞到出口前看到的最后一个东西。
让我们从六个不同的利基细分六个商店,每个都有令人惊叹的产品页面。我们将把他们的产品页面——所有这些都是用Shopify构建的——放在显微镜下,看看他们在做什么,你可以在你的商店复制。
标准产品页面
不管你为Shopify商店使用什么样的设计模板,产品页面后端很可能看起来像这样:
这或多或少就是产品页面打开的方式:左边的图片;描述和添加到购物车右侧按钮;可选的内容如社交按钮,数量选择器等。
当这样的页面被实时推送时,它们或多或少会像下面这个:
这没有错。所有的必需品都在那里。多个图像,颜色选项,当然还有添加到购物车按钮。
但是,让我们看看一些巧妙的商店是如何将标准的产品页面变成令人瞠目的产品页面的。
Allbirds
卖鞋的Allbirds创建了我们上面看到的产品页面。你知道,长相正常的那个。
但Allbirds的产品页面只有在你不向下滚动的情况下才正常。一旦你投入其中,你会发现一些最好的产品页面。
这里有很多值得讨好的地方。首先,Allbirds坚持“形式遵循功能”的古老格言。也就是说,他们有一个产品描述,在提供的空间,旁边的特色图像,而不破坏对称性的布局。
但这里并不缺少信息!因为当您单击“了解更多”时,您会被重定向到产品页面下方的锚点。
在那里,你会发现一个巨大的、色彩斑斓的部分,专门用于描述那些不能清晰地放在上面的细节:
没有规定说产品描述必须局限在购物车按钮上方的小角落里。向下移动这些细节让Allbirds获得了两全其美的效果:大量的细节和图片突出了产品,而且一个直观的布局。(这种布局也保证了添加到购物车纽扣保持在折叠上方。这才是它的归属。)
Allbirds产品页面的另一件令人惊叹的事情是它们会插入一些厚脸皮的视频:
当你点击这个“图片”时,你会看到一个视频,而不是另一个产品图片。视频很简单,只有几秒钟。这里没有艾美奖提名。但这种触控可以彻底改变你的产品页面。
Allbirds的产品页面还有几点需要指出。
想让你的产品页面令人难忘吗?一个奇怪动物的高清大图片怎么样?
此外,它还有一系列优点,从舒适、方便到环保,每个优点都有自己漂亮的图标:
产品页面上的社交媒体插头?是的,为什么不:
查看更多信息:Allbirds产品页面示例
哼哼
下一个是北欧家具品牌Hem。Hem采用了一些巧妙的策略,将产品页面变成了一种完全属于自己的体验。
好了,这是基本的产品页面-在上面的部分。如果有人已经决定购买,他们可以直接下单。
Hem有自己节省额外细节的方法。它们没有链接到产品页面的其他部分,而是利用了折叠功能。这个…
变成这样:
这种布局使你不必向下滚动来获取任何重要信息。当然,如果你做向下滚动,事情变得非常有趣。
这是你首先看到的两个图像:一个是视频,另一个是仙人掌。
我不记得在沙发上见过仙人掌。也就是说,自从我看到这个沙发仙人掌,我就没有忘记它。它只是…酷。一方面是一个昂贵的沙发——一个拥有你所期望的高端斯堪的纳维亚设计的所有档次的沙发——另一方面是一个小仙人掌。这种怪异成功地创造了一个令人难忘的怪异场景。
然后是视频。再说一次,这不是电影节级别的录像。但它是动态的图像,人们喜欢动态的图像。这段26秒的视频从多个角度展示了这款沙发,并说明了制作它是多么容易。
在那之后,更多的照片——又大又漂亮的照片——加上少许文字,给顾客提供他们可能遗漏的细节。
查看更多信息:Hem产品页面示例
纯粹的周期
自行车的创造者Pure Cycles在他们的产品页面中加入了很多漂亮的元素。
让我们把注意力集中在四个微妙而精彩的触点上。
1.这个小的心
这颗心可以让你在愿望清单上添加一些东西。这是一个很好的做法,原因有以下几点:首先,它使未来的购买更容易,这总是一件好事。其次,它吸引人们提供自己的联系方式,使Pure Cycles能够通过电子邮件和折扣码加速未来的购买。
2.这个信使选项
这对购物者来说非常方便。这可能也不会影响Pure Cycles公司让消费者在产品页面上与社交媒体平台进行互动的努力。
3.更多的内容!
Pure Cycles给您一个提示,在这个产品页面的折叠下面有额外的内容。以防有人误以为这个页面的开始和结束都是一次简单的购买。
4.可爱的视频
最后,视频嵌入到产品照片中。
点击它,你就会得到这个。50秒的时间里,两个漂亮的人骑着他们的纯自行车享受生活,这没什么不好的:
Pure Cycles产品页面的其余部分可以预见的很漂亮。Pure Cycles将客户评论、照片、社交媒体插头和运输细节加载到它上面——这些东西肯定不会放在旁边添加到购物车按钮。
对于那些渴望一些具体细节的人,Pure Cycles为你介绍了:
参见更多信息:Pure Cycles产品页面示例
关于产品页面视频的简短介绍
现在,如果你刚刚看了Pure Cycles的视频,你可能会想,“我怎么才能创造出这样的东西呢?”
毫无疑问,那个视频很巧妙。这种事不会凭空出现的。
但视频并不是不可能的!
不相信我吗?让我们假设一家小商店开始出售运动衫。运动衫就是这样一种商品,绝对可以在产品页面上放一个视频——所以商店应该制作一个!
当然,这个视频不会得到任何人起立鼓掌。如果你不是特别想买一件那样的运动衫,那也情有可原。但不要对制作视频的想法翻白眼!这不仅仅是大品牌的专利。进入门槛已经降低到只需要一杯浓咖啡和一部iPhone。
好了,去下一家店。
主和动态
Master & Dynamic销售高端音响配件。产品页面的顶部相对正常…
但当你环顾四周时,一切都变得非常优雅。
下面是Master & Dynamic产品页面-功能的准时间轴:
这是非常聪明的:使用实际产品的设计来推动布局。当然,耳机线特别完美。但即使你卖的是指尖陀螺、瑜伽垫或其他东西,围绕产品构建产品页面也能给你提供一个连贯的结构。
在底部,在你看过一系列迷人的照片后,你会看到技术规格。
参见更多信息:Master和Dynamic产品页面示例
周日供应
澳大利亚一家销售沙滩伞的商店Sunday Supply在产品页面上做得很大。喜欢,真的大了。
他们忽略了标准的“产品在左边,细节在右边”的布局,而是用大量的图片:
甚至礼品卡的产品页面都以一个巨大的图片开头:
你不用走很远就能找到添加到购物车按钮,它位于这张照片的正下方。(Sunday Supply的按钮上写着“添加到包中”,因为你知道,它是海滩主题的。)
然后你会看到一些产品细节,上面写着令人难以抗拒的迷人声音,赋予这把伞人类的特质,比如“一个喜欢在阳光下长时间晒太阳的人,一个好伴侣”。
其他细节,如“折叠到1.2米X 0.2米X 0.2米”或“~7.0公斤的重量”可以在页面下方找到,所以这是所有的。但为什么不先讲点有趣的呢?
就像任何一家出售海滩装备的商店一样,Sunday Supply也在野外展示了自己的产品。当你可以用海洋作为背景时,为什么不呢?
参见更多信息:Sunday Supply产品页面示例
工作室的
Studio Neat的设备存储和充电装置的产品页面和他们正在销售的时髦产品一样有档次。
页面的基础结构是标准的,但执行异常。两句文字的描述可以让你想象这个物品在你的地方会是什么样子——“在你的床头柜上或者在你的桌子上……”——像圆形图像这样的触点会让它显得更流行。
就在这之下,我们遇到了一个干净和完善的视频,但不需要好莱坞的专业技术。
然后,产品页面变成了一个视觉旅游的功能,你可以期待,如果你买了这个对接站。与此同时,还有一些随意的文字(“所以无论你怎么滚动,你都会有一个放置设备的位置”)。
最后,产品页面包含了一些手机底座在房子和办公室周围的照片。
Studio Neat的产品页面设计各不相同,但都很棒。例如,这里是触屏针产品页面上的几张照片。这节解剖学课不仅信息量大,而且视觉上引人入胜。
与此同时,这支钢笔的特写镜头真的让你想玩一把。
参见更多信息:Studio Neat产品页面示例
关于产品页面的结论
这些产品页面都有一些共同之处。让我们用tl;dr的方式来搭讪他们。
有很多空间——利用它
这些产品页面不会浪费像素,也不会回避让购物者滚动一点。产品版面诞生在杂志和报纸上,因为版面非常宝贵。但在网上,你不必在额外的图片和额外的详细信息之间做出选择。使用它。
视频和巨幅图片
我们已经谈到了视频。你应该做视频!当然,别忘了照片。这些页面有精美的图片。如果你是快递商,这意味着你不应该只使用供应商的照片。订购你的产品,然后拿走你自己的。你不需要卖自行车或高科技音频设备来让你的产品照片变得栩栩如生。
在页面顶部仍然可以进行转换
这些令人瞠目结舌的产品页面将帮助那些对购买持观望态度的人转变态度。这就是为什么我们看到照片、视频和花哨的布局。但是不要忘记那些已经用信用卡的人!如果有人准备购买,就像这些商店做的那样,让人们不需要滚动或搜索就可以购买商品。
想了解更多吗?
这里有一些其他的文章,将帮助您确定您的产品页面!