Shopify 为175个国家的50多万家电子商务企业提供支持. 自2012年以来, Shopify平台上的商家数量平均每年增长74%, 这些商家已经实现了超过550亿美元的销售额，因为Shopify是其中之一 最著名的 和 最容易使用 电子商务 platforms today.

与 Shopify taking care of domains, 举办, 所有后端, some front-end functionality, 更多的时间, 钱, resources can be spent on UX design. 到2021年，全球电子商务销售额预计将达到4美元的新高.9万亿美元，而不合格的用户体验设计是最大的贡献者之一 ab和oned checkouts, it’s more than clear the implementation of 电子商务 best practices will continue to prove highly effective.

在这篇文章中，我们将探讨如何设计一个Shopify网站与Shopify设计技巧.

What Features Does Shopify Have?

Shopify提供了你所期望的顶级电子商务平台的所有功能:

• 与外部支付网关集成，如Stripe和PayPal
• 访问 Shopify Payments, with zero fees compared to external options
• 允许用礼品卡或商店积分付款的能力
• A customizable checkout page (only for Shopify + 客户)
• The option of user accounts or guest checkout
• Static pages (e.g., 隐私政策 or Terms 和 Conditions)
• L和ing pages with promotional content
• Password access for stores in development
• 具有一系列可定制选项的产品变体
• 智能收藏，自动分类产品
• 搜索和标记功能，以帮助产品发现
• 博客功能，能够将产品嵌入到帖子中
• 帮助开发人员构建动态网站和移动应用程序的API

Boosting 电子商务 产品 Discovery

类似于实体店按部门组织的方式，这样顾客可以通过询问工作人员来定位特定的商品, online shoppers need the ability to browse, 过滤器, 然后搜索，这样他们就能找到他们要找的东西 很容易 和 很快.

40% of 电子商务 customers 放弃加载时间超过3秒的网站, 这表明，在产品发现方面，他们是多么没有耐心. 幸运的是, Shopify有许多功能，可以很容易地建立自定义导航, organize products 和 categories, implement search functionality.

Custom Navigation

向客户提供太多的选择可能会导致 analysis paralysis (当有太多可用的选择而无法有效地做出决定时，会导致沮丧和放弃). By designing a custom navigation, we can 优先考虑 例如，转化率最高的产品和“收藏品”, 如果桌面产品是最受欢迎的，可以明显地展示“Desk”系列. 这些自定义导航也可以在Shopify CMS中进行编辑，以便进行临时A/B测试.

Visually speaking, 最好的转换Shopify主题清楚地显示Collections的标题，并使用足够的空白来帮助用户轻松地识别他们在所有产品中寻找的东西, Collections, pages being offered.

Collections

Collections是一组有组织的相似产品. 产品可以手动分类到Collections中, 或者它们可以根据匹配的标准(例如, 如果产品标题包含某个关键字, has been assigned a certain 标签, or falls within a particular price range). Collections can also be temporary (i.e., 季节性或限时销售)确保Shopify网站设计始终相关, 及时的,, 最重要的是, highly converting.

虽然这些Collections是在后台定义的，但对于 电子商务 designers 在设计Shopify网站时要注意这个功能.

产品标签

显示/可见的标签帮助客户找到类似的产品, as mentioned above, 它们也可以在内部用于创建Collections. 然而，标签的最大好处在于，它们可以用来创建一个 面向方面的搜索，允许客户根据标记的定义属性(如“黄色”)过滤产品.”

Keep these Shopify design tips in mind:

• 为了进一步澄清，请显示应用了哪些过滤器.
• 允许客户删除过滤器，以扩大他们的搜索.
• Truncate 过滤器s to show only the most popular at first glance.

搜索

搜索功能对于那些知道自己想要什么东西的顾客来说非常有用，对于那些因为在移动设备上进行交互而发现浏览和过滤令人沮丧的移动购物者来说尤其重要.

以下是Shopify在设计搜索体验时需要考虑的最佳实践:

• 从来没有 hide the search box; reduce friction by making it immediately available.
• 将搜索放在客户期望的位置(1).e., top right or centralized).
• 显示整个输入框，而不仅仅是搜索图标.
• 加入自动补全功能，帮助用户更快地搜索.
• 通过使用建议的结果和自动更正来设计人为错误.
• 保存用户搜索并发送后续邮件，如果没有销售.

Shopify Best Practices for 产品s Pages

Shopify offers all the features needed to hook 电子商务 shoppers 并流畅地引导用户直接结账. If we combine these features with 电子商务 best practices，我们可以将放弃的结帐次数推到平均统计值以下.

使用 Captivating 产品 Images

什么是一个好的电子商务网站是图像 captivates users emotionally. 为此，Shopify允许上传多个图像和产品变体. 然而，作为Shopify的最佳实践，展示 至少一个 of these product images in-scale (i.e.(被其他物体包围，以说明产品有多大)来设定期望.

顾客希望在购买之前对产品进行彻底的调查，以确保所有的产品形象都是生动的, 高质量的, 和缩放的.

Display Clear 产品 Information

由于缺乏有关实际成本的信息，数量惊人(但并不令人惊讶)的电子商务客户放弃了购物车. 60% of customers cite unexpected costs (e.g., 航运, 税, fees) as their reason for cart ab和onment, 23%的人无法预先计算总成本. 缺乏透明度无疑会降低电子商务网站的转化率, 所以请记住这些Shopify提示和技巧:

• 使用 progressive disclosure 技术 to structure information clearly.
• 在前面显示一个完整的成本细目.
• Communicate the value proposition explicitly.
• 让“立即购买/添加到购物车”按钮在视觉上与众不同.

Build Trust 和 Reassurance

据贝马德研究所称，缺乏信任被认为是原因之一 19% of customers ab和on at checkout. 幸运的是, 所有Shopify商店都默认使用SSL(安全结帐), 但他们也允许顾客留下评论作为社会证明.

社会认同是一种不可否认的方式，通过赋予信任来飙升转换 电子商务 websites. 根据 BrightLocal, 88% of consumers 相信网上评论和个人推荐一样重要, 所以有必要推动之前的客户留下评论，并在客户旅程中指出这一点. Most Shopify themes also take advan标签e of 模式标记 将这些评分直接整合到搜索结果中.

Besides social validation, 考虑通过实现实时聊天解决方案来建立客户信心，例如 对讲机, Zendesk, 漂移, or Kayako. Shopify允许通过他们的 应用程序商店 和 via manual installation.

Show Related 产品 Recommendations

所有领先的电子商务企业都利用交叉销售和追加销售策略. 标签，结合分析和A/B测试集成，如 Optimizely’s Web Recommendations，可以帮助设计师授权企业通过展示来提高转化率 alternative or additional items that customers may be interested in.

Integrate Shopping Experience 个性化

Integrations such as Web 个性化s by Optimizely, 结合Shopify的收藏和标签, 允许数据驱动的企业根据他们的兴趣和以前的购买历史来划分受众，并相应地改变页面内容.

与 anticipatory design 技术, Shopify商店可以展示更多相关的内容, keeping audiences engaged for longer, thus more likely to convert to a sale. 个性化 是提高任何电子商务企业财务底线的关键.

Checkout Optimization

Guest Checkout vs. Customer Accounts

根据 Baymard Institute, “网站想让我创建一个账户”是客户在没有购买任何东西的情况下放弃结账的第二大常见原因(占35%). Shopify recommends allowing guest checkout (especially on mobile)，为此，禁用客户帐户是默认选项.

Pinpointing UX Flaws 和 Reducing Drop-offs

试图在没有可靠分析的情况下解决被遗弃的结帐问题，就像在黑暗的房间里找一只黑猫一样有效. 当它是一个数据驱动的过程时，优化Shopify用户体验和结帐流程效果最好.

Shopify designers can connect Google Analytics to Shopify 建立一个 目标漏斗, 哪一个, after enough data has been collected, 能够准确地说明客户在哪些方面决定不再继续购买.

为了获得最佳效果，将Shopify与诸如 疯狂的蛋, Hotjar, FullStory 使用热图和访客记录更详细地观察这些问题区域.

结论

让设计师能够更好地沟通Shopify平台的好处和功能，并了解它可以为客户提供什么解决方案，不能提供什么解决方案, it’s best to open up a free demo store. Additionally, top 电子商务 designers can become registered Shopify Experts，为他们的简历增加可信度 Shopify website designer.