23个美丽的电子商务登陆页面示例(2017)

为你的电子商务商店寻找一点登陆页面的灵感?

如何为你的下一个转化率优化测试提供一些例子?

不管你的理由是什么，你来对地方了。改善你网站的最好方法着陆页就是向正确的人学习。优化过程是一个永无止境的追求，但它确实值得付出努力。

在本文中，我将向您展示23个美丽的电子商务着陆页面示例。我会告诉你每个例子，并讨论我们选择它的原因。

让我们开始吧。

电子商务登陆页面示例＃1：Abbott

香水制造商雅培(Abbott)利用这个电子商务登陆页面来推广它的地理灵感香水新系列。

为什么我们喜欢它:

• 产品、颜色和图像的组合。产品演示文稿在视觉上令人惊叹，设置在匹配照片前面。配色方案和背景使其成为几乎隔着屏风就能闻到香味。
• 沉重的对比。产品照片、照片和色彩都设置在白色背景前。强烈的对比使阅读变得容易。也就是说，没有什么能让你分心。

例2:Beats

Beats公司创建这个登陆页面是为了展示他们的彩色耳机系列。

为什么我们喜欢它:

• 大胆的和对比。节拍做得很好，以最好的光线显示他们的产品。每个部分都很清楚，颜色和鲜艳的摄影。文本很容易读取彩色背景。
• 视觉效果。摄影掌握着主动权。为了加快阅读速度，设计中使用了视频和照片，而不是大量的文字。通过使用更多的图像，访问者可以更容易地阅读和概念产品更快。
  
  
  

例#3:Bedowl

空气床垫电子商务店铺Bodowl使用此登陆页面来提供其产品系列。新利体育场

为什么我们喜欢它:

• 清洁和最小的设计。我们喜欢Bedowl采用的设计方法。页面上的内容优先。清晰的图形和简洁的设计使产品更容易理解。
• 恒星和评级。来自快乐顾客的社会认同增加了贝多品牌的信任和信誉。星级评级、客户感言以及类似的东西有助于增加你的产品的信任度。相信你销售的产品就是交付的产品。
  
  
  

例4:施工文件

Construction Papers使用这个登陆页面为他们的新一批设计指南接受预定。

为什么我们喜欢它:

• 的主题。除了我们喜欢这个着陆页的设计。美丽的图像，简约的图形和互补颜色使得这很乐趣。关于作者的部分，特别是将人为元素添加到构建信任的页面上。
• 排版。排版和对比的良好平衡便于阅读。不同的字体权重用于强调重要的区域。
  
  
  

例5:CPJ

冷榨果汁，CPJ，使用这个着陆页来推广和突出他们的CTRL1果汁的好处。

为什么我们喜欢它:

• 令人惊叹的平面设计。乍一看，您可以看到CPJ认真对待设计。互补的颜色，完美的图像和紧密副本都翻译成一个乐趣阅读的着陆页面。
• 营养信息。毫无疑问，CPJ的客户都有健康意识。包括营养信息表明CPJ非常了解他们的顾客。在设计登陆页面时，每个部分都应该解决客户在浏览时可能遇到的问题。
  
  
  

电子商务登陆页面示例＃6：etq

鞋类品牌ETQ使用此Ecommerce Landing页面展示其最新季节选择。

为什么我们喜欢它:

• 摄影。就像这个列表上的其他登陆页面的例子一样，惊人的摄影是重点。它讲述了一个故事，让访问者对他们正在探索的产品进行投资。
• 对比。白色的背景帮助页面上所有的照片和复制突出。这个设计没有遗漏任何东西。一切关于照片的外观和感觉的简约风格的复制工作在一起。
  
  
  

例7:Everlane

这是奢侈服装零售商Everlane的登陆页面。

为什么我们喜欢它:

• 摄影。产品是重新利体育场点，有很多机会发光发热。产品照片新利体育场绝对漂亮。造型和沉稳非常符合Everlane的品牌。
• 你们购物，我们发货。底部的小型销售计算器为这个组合增添了一点乐趣。它以好玩的方式展示最受欢迎的地点，是增加社会认同的聪明方式。
  
  
  

例子#8:农场

农田制造和销售天然纹身护肤品，这是他们的着陆页。新利体育场

为什么我们喜欢它:

• 排版。大而醒目，字体选择非常棒。它成功地代表了产品的“自然”一面，同时保持了纹身的大胆元素。
• 产品照片。产品摄影是一流的。不同的角度和位置，没有问题的产品不转。特别是木镶板的部分确实创造了人们对产品和创作过程的兴趣。
  
  
  

例9:FIET

这是豪华鞋履制造商Fiet的电子商务登陆页面。

为什么我们喜欢它:

• 图像。菲特的产品照片没有遗漏任何细节。广角和宏观图像专注于细节，使Fiet品牌伟大。照片让页面自己说话。
• 简单。你注意到这一页缺少副本了吗?这个登陆页面的目的是根据访客的购物偏好来区分他们。通过这种方式，访问者可以更有效地进入产品页面，更有可能转换。
  
  
  

例#10:无害收获

有机椰子水制造商无害收获使用这个登陆页面兜售其美味的有机饮料背后的好处和故事。

为什么我们喜欢它:

• 故事。数百家公司生产椰汁，这是事实。使无害收获有别于竞争对手的是他们的故事。他们把它放在中心前面是有原因的。我们喜欢故事的呈现方式，喜欢品牌的外观和感觉，以及一些令人惊叹的摄影。
• 设计。像素对色彩和摄影的完美运用简直是超凡脱俗。没有什么能挤占品牌故事或混淆页面的焦点。这一切都是为了解释无害收获产品和它背后的人。
  
  
  

例11:Helbak

家居用品零售商Helbak使用这个令人惊叹的登陆页面来突出他们的最新产品。

为什么我们喜欢它:

• 绿色，非常绿色。阴影和互补色调优越地亮起了产品。新利体育场选择类似砌体的布局的选择使得产品拍摄如此清晰。
• 对比。我曾经说过，我会再说一遍。对比对于明确的沟通至关重要。对比字体重量，颜色，副本和图像所有都可以为您的访客提供愉快的浏览体验。
  
  
  

电子商务登陆页面示例＃12：逻辑

这是LogoShop的一个看似简单的登录页面。

为什么我们喜欢它:

• 它是平的。设计保持平坦，就像他们出售的标志。没有什么能让你从产品或页面上的副本中分心。选择只使用两种颜色在这个登录页面上是完美的。
• 没有链接。电子商务登陆页面不像传统的登陆页面，因为它包含了多个转换目标。但在这个例子中，LogoShop没有分心，只坚持一个转换目标:销售。
  
  
  

电子商务登陆页面示例#13:MAAP

这是登陆页Maap用于炫耀其华丽的骑马装备。

为什么我们喜欢它:

• 的布局。虽然有点复杂(对比也不是很好)，但设计的布局是很难忽视的。动态摄影是这个登陆页面的明星。MAAP显然希望将产品放在最前面和中心位置，并相应地这样做。
• 鲜艳的颜色。与品牌的外观和感觉一致，登陆页面具有引人注目的亮度。在某种意义上，它创造了好奇心，并推动访问者探索更多的页面。
  
  
  

电子商务登陆页面例14:Bourn的更多内容

Bourn使用了这个着陆页来推广它是新的爱情更多的毛衣。

为什么我们喜欢它:

• 社会证明。为了建立信任，伯恩还提供了开心顾客的照片、实时的Instagram信息流和创作者的留言。像这样的小元素给你的客户信心和足够的信任去购买。
• 巨大的对比。可读性在登录页面的成功(或失败)中起着重要的作用。这就是为什么我们不断强调对比的好处。眼睛会被明亮的阅读区域吸引，黑色的文本使主体文本更容易阅读。
• 分享。在“预订”按钮下方有行动呼吁，人们可以在社交媒体上分享产品，获得10%的优惠。像这样的小奖励是增加登陆页面曝光率的聪明方法。
  
  
  

电子商务登陆页面示例#15:Neue

小工具和配件制造商Neue使用这个登陆页面来突出他们的当代产品系列。新利体育场

为什么我们喜欢它:

• 这是当代。符合其产品，Neue设计了他们的着陆页，同样对现代新利体育场设计的专注。图像和字体选择保持最小化和清洁。总体而言，该设计使购物体验愉快。
• 道。突出的品牌标志放置在页面的顶部，以建立信任。在建立社会认同方面，品牌标志提供了大量额外的帮助。
  
  
  

例16:伦敦派克大衣

Parka London使用这个登陆页面来推广他们的季节性销售。

为什么我们喜欢它:

• 视觉效果。在展示他们的产品方面，照片做得非常好。新利体育场每个部分都以不同的方式使用摄影来传达报价。
• 等级制度。每个部分都战略性地定位在着陆页上。当你向下滚动时，你可以看到部分是按照重要性顺序排列的。
  
  
  

电子商务登陆页面示例#17:重新选择

在Repick的着陆页面，产品是优先级。新利体育场

为什么我们喜欢它:

• 图片放在第一位。因为Repick依赖点击，所以产品首先是。新利体育场特别是在标题部分。游客很容易点击每个产品来了解更多信息。
• 明亮的商品交易顾问基金。当页面上充斥着大量的视觉效果时，你需要有一些突出的cta。亮蓝色的cta在吸引注意力和获得点击方面做得很好。
  
  

电子商务登陆页面示例#18:Seedlip

无酒精烈酒Seedlip使用这个登陆页面来提炼品牌的根源。

为什么我们喜欢它:

• 真漂亮。排版、照片和图形都结合在一起创建了一个漂亮的登录页面。探索它既是冒险，也是教育。
• 故事。对于市场上新出现的非酒精饮料，需要大量的解释。Seedlip确保包括他们的品牌故事，营养事实，食谱和库存。这样，他们就可以先发制人地回答新访客可能提出的任何问题或顾虑。
• 他们的口号。广告标语“不喝酒的时候喝什么”必须提到。这是天才!
  
  
  

例19:Shinola

基于底特律的制造商使用此登陆页面展示它是美丽的皮革产品。新利体育场

为什么我们喜欢它:

• 分离。Shinola生产大量的皮革产品，每一款都需要在登陆页面上展示。新利体育场他们出色地定义了每个部分，而不是压倒其他部分。
• 摄影。细节决定成败。Shinola近距离拍摄了他们的产品照片。这离把他们的精品拿在手里只有一步之遥。新利体育场是什么让他们成为世界上最好的奢侈品制造商之一的关键。
  
  
  

例20:星巴克

星巴克利用这个登陆页面来推广他们的店内商品，如verismo豆荚、糖浆和高质量咖啡。

为什么我们喜欢它:

• 的布局。页面的设计和布局保持了简洁，但仍具有典型的星巴克美学。每个部分被简单地划分，并包含在自己的区域中，以避免任何混乱。
• 的商品交易顾问基金。黑色的巧妙使用使得每个号召行动很难被忽略。在每个部分中，对比的cta清晰且容易找到，这对于任何高转化率的登录页面都是至关重要的。
  
  
  

例21:DogCollar.ca

DogCollar。Ca在网上卖狗项圈，这多少有点令人惊讶。

让我们看看他们的登陆页面:

我喜欢

基调:

• 我喜欢这个网站的摇滚风格。他们已经找到了一种适合自己的风格，并开始使用它。

• 很多电子商务营销都是关于找到你自己的利基和个性，并推动它。DogCollar。Ca在这方面做得很好。

简单的导航:

• 前四个链接（带大图像）真的很好地画眼睛。

• 他们清楚地告诉你如何导航到你想去的地方——无论是领子的选择，线索，或联系方式。

产品展示:

• 将他们的产品堆积起来并以大新利体育场图显示是吸引人们注意力的有效方法(尤其是在这样一个相对较小和较短的登录页面上)。如果有人看到了他们喜欢的东西，他们更有可能点击浏览。

我要改变或测试什么

字体:

• 有时候，最微小的事情却能对你产生最大的影响着陆页面的转换。

• 在这种情况下，我肯定会测试一种不同的字体——因为一些单词(参见顶部的“Collars”)有点难读——这可能会增加页面的跳出率。

一只狗的照片:

• Dogcollar.ca不包括在实际狗的衣领上的照片缺少严重的节拍。我猜测，抛出可爱的狗图像（或旋转专辑）可以通过15到25％的任何地方增加他们的页面转换。

2000年代中期的设计:

• 任何与登陆页日期相关的内容(比如底部的红色横幅)都会降低你页面的转化率。我推荐一个直哑光横幅在底部与链接更突出一点。

CTA:

• 我推荐的旋转专辑也适用于一些特定的呼叫动作（CTA）：

• 显示与他们最受欢迎的衣领之一的狗的图片将与CTA合作“查看我们今天的定制狗项圈”。

• 展示一张狗狗和它时尚的主人的照片，展示它们最受欢迎的宠物狗，将与CTA合作“现在可以从你的小狗的配件中获得10%的折扣!”

• 显示Dogcollar.CA工作人员的图片与自己的狗狗一起使用“对狗的热情”报价，并“立即联系我们”CTA。

登陆页面的访问者可能不知道他们登陆的目的。你得告诉他们。商品交易顾问基金(你页面上的“请求”)这样做。登陆页面是你的电子商务品牌在网上的形象吗?

电子商务登陆页面示例#22:XEROSHOES

Xeroshoes是一家电子商务公司，该公司开发了围绕最近赤脚运行潮流的鞋（和配件）。

让我们看看他们的登陆页面:

我喜欢

简单的导航:

• 这一页最显眼的部分是选择“男士专柜”或“女士专柜”。

-

这使得你可以很容易地快速和轻松地导航到你在网站上的目的，这将降低跳出率(没有什么比在电子商务网站上找不到你想要的东西更有价值的了)。

商品交易顾问基金:

• “店铺男子”和“店铺女性”实际上非常坚实的CTA's。

-

我也喜欢这种颜色对比。黄绿搭配的效果非常好，可以抓住网页网络流量的眼球。

客户感言:

• 客户推荐书在您的着陆页上非常有价值，特别是当您产品需要一些解释时（如Xeroshoes'）。

-

毫无疑问，人们并不信任你的公司。他们更加信任你的客户。

• 我也喜欢包括客户的头像给他们的证明书。这改善了页面的人性化基调。

我要改变或测试什么

更专注的页面:

• 下面(如果你不向下滚动页面就看不到)是这个页面上一个非常令人困惑的地方。

-

总共有13张不同的图片，这削弱了他们所有人的吸引力

• 我建议保持客户推荐和“赤脚走路”，“赤脚跑步”和“为什么赤脚？”并将其余部分移动到产品或资源页面。

底部段落：

• 下面的段落是大量的文本-这降低了效率，试图做太多的页面。

-

我建议不要一篇篇地写。没有人会在你的登录页面上阅读一篇文章。向他们推销与你的品牌互动的价值，并使转换变得容易。其他的一切都是分心。

配色方案:

• 这一页的上半部分非常干净和集中，有一个伟大的配色方案，我喜欢。

-

然而，下半部分不仅没有重点，而且也失去了配色方案，变得不那么令人兴奋和视觉吸引力。

• 我建议他们测试更少的图像(正如我上面提到的)，并将绿色和蓝色集成到下面的页面中。

另一个Lead-generating页面:

• 你可以有尽可能多的登陆页面，只要你认为是有用的-我建议复印鞋创建另一个页面完全为他们领导努力(“获得免费提示、优惠和免费7天网络课程”在底部)

-

就像我提到的狗项圈。ca以上，你应该把你的页面集中在尽可能少的cta。如果你将它们分开，你的主登录页面和潜在客户页面都会获得更多的转化率。

例23:Reed & Barton

芦苇和巴顿是一家高端家用商品。自1824年以来，他们已经存在，并像鱼类一样带给电子商务世界。

让我们看看他们的登陆页面:

我喜欢

有一个USP:

• 你的企业独特的卖点应该是你的页面的主要焦点之一。

-

无论是独特的产品线，还是针对知名产品的独特方法，抑或(如Reed & Barton)独特的哲学和视角。

• 正是这种独特性将鼓励人们更多地参与到你的品牌中，就像你的产品本身一样。新利体育场

USP本身:

• “现代的家居理念和风格”非常适合他们的高端目标受众

-

你的USP应该以个体的身份对你的目标受众说话——呼应他们自己的愿望

旋转相册:

• Reed＆Barton的着陆页有四个图像/ USP组合。

-

这对电子商务来说是非常有效的，因为它展示了你的产品，也钻了你的业务的独特性(有四个令人敬畏的usp)。新利体育场

配色方案:

• 我喜欢深蓝色，深灰色和白色配色方案。这些颜色很好地沟通了复杂性和质量。

-

你使用的颜色对页面的基调有很大的影响。深蓝色和深灰色可以体现优雅和文雅。绿色和米色是对环境友好的颜色，而明亮的颜色(紫色、橙色和蓝色)是孩子们喜欢的颜色。

CTA:

• 这是我批评的三页，具有响亮而明显的CTA - 一种大幅提高您的页面的转换率。

-

这个页面的颜色对比(橙色和灰色)非常吸引登陆页面访问者的眼球。我建议你测试你自己的CTA的颜色，看看你的市场反应最多(你可能会惊讶于这种小变化的影响力)。

图片:

• 我认为对于一个电子商务页面来说，三到四张图片是最理想的。

我要改变或测试什么

Reed＆Barton Landing页面靠近我理想的着陆页，以便他们的市场和部门。页面的音调非常匹配他们的目标受众。图像是干净的和吸引力，并且有有限的分心，可能会拉出访客。我也喜欢少量文本，没有段落和独家。

我认为唯一能提高转化率的小事情就是在顶部增加CTA的大小，并在底部附近重复它。

除此之外，这个页面对转换进行了优化。恭喜Reed & Barton(公平地说，他们从1824年起就一直在思考这个问题)。

最后的想法

希望这些例子能启发你测试自己的电子商务登陆页面。

这是一个假想的……

如果您的页面每周看到1000名访客，则目前将网站流量转换为15％，转换值（平均）您的业务达到35美元，您的页面每周拨打5,250美元。

如果你执行了我上面推荐的一些测试，那么你的页面将增加至少25%的转化率——将你的整体转化率提高到18.75%，这不是不可能的。

每周有1000名访问者，按18.75%折算，价值35美元，相当于6562美元——一周的收入增加了1300多美元。

改进的唯一方法就是不断地测试。测试快乐!