优质主页设计的目的
您的主页的设计或内容不必过于复杂。简而言之,您想要:
- 欢迎您的访客访问您的网站
- 清楚地告诉他们你希望他们做什么
- 为他们提供探索和了解更多信息的选择
但如何实现呢?有时,发现见解的最佳方法是提出正确的问题。考虑一下:
- 您到底希望访客做什么? (买东西、订阅电子邮件列表等)
- 你让他们变得足够容易吗?
- 从开始到结束涉及多少个步骤?
- 这些步骤中的任何一个都可以删除吗?
一般来说,我们主张保持主页简单。无需添加更多复杂性来迷惑读者。
考虑到一些潜在客户可能会在登陆您的 Shopify 主页时确切地知道他们想要什么。其他人则不会。始终牢记这一点并进行相应的设计。
使导航路径清晰。这有助于客户避免“决策疲劳”,这种现象会导致人们放弃花费太长时间的决策。
用分析术语来说,当用户点击离开时,这被称为“跳出”。我们不喜欢弹跳。
请注意这些提示,以帮助您的客户在您的主页上更快地做出决定。
充分利用“首屏”
首屏上方是客户向下滚动之前看到的屏幕区域。报纸多年来一直在使用这种技术,将诱人的标题放在“首屏”上,供顾客在下架之前查看。
对于您的主页,使用引人注目的英雄图像和号召性用语是值得的。还记得我说过有些顾客到达时已经知道他们想要什么吗?
Shopify Plus 公司MVMT很好地实现了这一点,为男性和女性提供了清晰的 CTA,再加上展示产品的清晰图像。他们还在顶部使用了横幅来激励免费送货的购买。
让导航变得简单
人们在互联网上快速地从一个网页滑动到另一个网页。因此,促进这一点并将您的网站设计得像黄油一样导航顺畅非常重要。
当您尝试吸引大量不同类型的访问者时,很容易通过链接和内容层使您的 Shopify 主页变得更加复杂。
但事实上,让事情变得简单总是更好。
为标题部分提供优先路径,其中包含您认为读者将从中受益最多的链接。辅助路径可以放置在其他地方 - 例如页面底部。
PageFly 网站就是这样做的,最重要和最相关的导航链接位于顶部。进一步感兴趣的部分可以在底部的页脚部分找到。
这使得整个网页更加干净、不那么混乱,并且在第一眼看到“首屏”时给人留下了深刻的印象。还要注意角落里的号召性用语。
由您来平衡您的优先事项。例如,如果客户支持是您品牌的重点,您可能希望在标题部分包含这些链接。
注意:包含这些导航链接对于Shopify 主页 SEO非常重要,可以让 Google 更好地了解您的品牌和网站。
令人信服的号召性用语
号召性用语是有影响力的网页设计的核心。当您在森林中迷路时,请将它们视为可以遵循的标志。它们告诉读者该去哪里以及到达那里后会发生什么。
您的号召性用语可以定向到产品页面、博客、“了解更多页面”或产品系列页面。确定您的目标并相应地应用 CTA 非常重要。
请记住,读者越难找到您的号召性用语,他们“跳出”的可能性就越大。
让它通过对比色清晰可见,并使用像灵魂循环这样简单的语言。首屏上没有任何分散注意力的东西可以偏离主要目标,但有导航链接供用户在需要时进一步探索。
使用 PageFly 创建的 10 个高转化率 Shopify 主页
#10 Notion
使用 PageFly 创建的Notion采用了全新的主页设计方法。最初的 CTA 是一个“观看视频”按钮,旨在帮助用户更多地了解该产品。
当轮播滑过并显示第二个英雄图像时,CTA 通过对比鲜明的“立即购买”按钮来促进购买。
#9 Caledonian Mobile Coolers
Caledonian Mobile Coolers 的主题一致、相关图像和简洁的号召性用语的一个很好的例子。没有什么会严重分散他们主要 CTA 的注意力,并且可以直接在主页上轻松找到更多信息。
#8 Monasita
在首屏上,Monasita 针对用户推出了“春季特惠”。Shopify 主页的此区域非常适合季节性促销,以获取更多销售额。
#5 Livroom
尽管我们不太确定 Livroom 到底是做什么的(看起来像家庭聚会送货服务),但我们还是很喜欢它的设计。
#6 Baby Bare Bubbles
给宝宝洗澡时,强调使用天然产品非常重要。 Baby Bare Bubbles 通过中性配色方案和成分透明度做到了这一点。他们的主页上清楚地说明了这些好处,并且在整个过程中都可以找到多个号召性用语。
#5 SJC Custom Drums
您可以在这个使用 PageFly 构建的自定义鼓网站上看到一些非常酷的动画和交互式移动元素。
当尝试创建看似超出应用程序范围的设计功能时,PageFly 的支持人员可能会根据需要帮助您应用自定义代码。您所要做的就是通过 PageFly 仪表板右上角的聊天框申请票证。
#4 Edward & Sons
Edward & Sons 主页设计的关键在于其简单性。每个图像实际上都是一个 CTA,当您将鼠标悬停在图像上时,可以看到它们移动。
#3 Zen Egg
Zen Egg 网站非常小,也许反映了寻找“禅”所需的空虚心态。这种极简主义与设计师的推荐和一句话相结合,激发了信任。
#2 Probi Solution
芬兰清洁公司 Probi 拥有一个具有视觉吸引力的主页,具有精美的英雄图像和简约的设计。
#1 A.H Apothecary
我们使用 PageFly 创建的Shopify 主页列表中的最后一个是 AH Apothecary,其设计既独特又有益健康。深色背景很养眼,主页从一开始就讲述了一个故事。
PageFly 的使用不限于任何特定的利基市场,正如您从上述品牌范围中看到的那样。有了 PageFly,设计的所有方面都回到了您的手中,而不是由有偏见的设计师负责。
移动响应式设计
我似乎在我写的每一篇文章中都这么说,但它值得重复。移动响应式设计应该是您的首要任务,全球一半以上的电子商务销售额来自手持设备。
使用 PageFly 创建商店时,您将有机会从移动角度查看和编辑它,就像这些商家为捕获尽可能多的销售额所做的那样。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Shopify 主题或 PageFly 模板?
一个完全有效的问题摆在你面前。但答案是明确的。
大多数商家加入 Shopify 并快速浏览主题商店,选择免费主题或支付额外费用。现在不要误会我的意思,很多 Shopify 主题都很棒,并且在很大程度上满足了用户的需求。
但是,它们在定制方面非常有限。 CSS 编辑器很难访问,即使您确实介入代码,也可能会导致问题。
另外,您还面临着您的商店看起来像成千上万使用相同主题的其他商店一样的风险。
另一方面,PageFly 拥有专 为所有行业的每种类型页面设计的Shopify 主页模板。它们经过 SEO 优化,并且可以使用简单的拖放技术进行完全自定义。如果您确实需要修改后端的某些代码,可以使用自定义 CSS 编辑器轻松完成。
别大惊小怪。
在 PageFly 仪表板中创建新页面时,系统会提示您“从空白开始”或选择模板。
此外,您将节省时间和金钱,并能够自定义模板以适应您品牌的外观和感觉。如本教程视频所示,将产品和产品系列添加到模板只需几分钟。
结论
数以千计的商家正在抓住 PageFly 强大的定制和客户支持的机会。
有些人称借口只是精心策划的谎言。我只知道你不能把你的借口存入银行。 PageFly 提供 14 天免费试用和顶级计划 - 无附加条件 - 因此您今天就可以开始开展业务。
如果这对你很重要,你就会找到办法。
如果没有,你就会找到借口。