Shopify 为175个国家的50多万家电子商务企业提供支持. 自2012年以来, the number of merchants on the Shopify platform has grown an average of 74% annually, these merchants have achieved more than $55 billion in sales as a result of Shopify being one of the 最著名的 和 最容易使用 今天的电子商务平台.

Shopify负责域名, 举办, 所有后端, 以及一些前端功能, 更多的时间, 钱, 和资源可以花在UX设计上. 到2021年，全球电子商务销售额预计将达到4美元的新高.9 trillion, with subst和ard UX design being one of the biggest contributors to 废弃的签出，这是更明确的实施 电子商务最佳实践 会继续证明是非常有效的吗.

In this article, we’ll explore how to design a Shopify website with Shopify design tips.

Shopify有什么功能?

Shopify ships with all of the features you’d expect from a top 电子商务 platform:

• 与外部支付网关集成，如Stripe和PayPal
• 访问 Shopify支付，与外部选择相比，费用为零
• 允许用礼品卡或商店积分付款的能力
• 可自定义的结帐页面(仅适用于 Shopify + 客户)
• 用户帐户或来宾结帐的选项
• 静态页面(e).g., 隐私政策 or 条款与条件)
• 包含促销内容的登陆页
• 用于开发中的商店的密码访问
• 具有一系列可定制选项的产品变体
• 智能收藏，自动分类产品
• 搜索和标记功能，以帮助产品发现
• 博客功能，能够将产品嵌入到帖子中
• 帮助开发人员构建动态网站和移动应用程序的API

促进电子商务产品发现

Similar to the way brick-和-mortar stores are organized by department so customers can locate specific items by asking a staff member, 网上购物者需要浏览的能力, 过滤器, 然后搜索，这样他们就能找到他们要找的东西 很容易 和 很快.

40%的电子商务客户 放弃加载时间超过3秒的网站, 这表明，在产品发现方面，他们是多么没有耐心. 幸运的是, Shopify有许多功能，可以很容易地建立自定义导航, 组织产品和类别, 实现搜索功能.

自定义导航

向客户提供太多的选择可能会导致 分析瘫痪 (when there are too many available options to effectively make a decision results in frustration 和 ab和onment). 通过设计自定义导航，我们可以 优先考虑 例如，转化率最高的产品和“收藏品”, visibly displaying the “Desk” collection if desk products are the most popular. These custom navigations can also be edited in the Shopify CMS to enable casual A/B testing.

视觉上来说, the best-converting Shopify themes display the title of the collection clearly 和 use enough whitespace to help the user 很容易 identify what they’re looking for among all the products, Collections, 提供的页数.

Collections

Collections是一组有组织的相似产品. 产品可以手动分类到Collections中, 或者它们可以根据匹配的标准(例如, 如果产品标题包含某个关键字, 已经分配了一定的 标签，或在特定价格范围内). Collections也可以是临时的(例如.e., seasonal or for a limited-time sale) ensuring that Shopify website designs are always relevant, 及时的,, 最重要的是, 高转换.

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

产品标签

显示/可见的标签帮助客户找到类似的产品, 如上所述, 它们也可以在内部用于创建Collections. However, the greatest benefit of 标签s lies in the fact that they can be used to create a 面向方面的搜索, allowing customers to 过滤器 products based on a 标签ged defining attribute such as “Yellow.”

记住这些Shopify的设计技巧:

• 为了进一步澄清，请显示应用了哪些过滤器.
• 允许客户删除过滤器，以扩大他们的搜索.
• 截断过滤器 只展示最受欢迎的第一眼.

搜索

搜索 functionality is useful for customers who know exactly what they’re looking for 和 is especially important for mobile shoppers who find browsing 和 过滤器ing frustrating due to the natural awkwardness of interacting on a mobile device.

These are the Shopify best practices to consider when designing search experiences:

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

Shopify产品页面最佳实践

Shopify提供了所有需要的功能 吸引电子商务购物者 并流畅地引导用户直接结账. 如果我们把这些特征和 电子商务最佳实践，我们可以将放弃的结帐次数推到平均统计值以下.

使用吸引人的产品图像

什么是一个好的电子商务网站是图像 在情感上吸引用户. To that end, Shopify allows for multiple images 和 product variants to be uploaded. 然而，作为Shopify的最佳实践，展示 至少一个 这些产品图像的比例(i.e., surrounded by other objects to illustrate how large the product is) to set expectations.

Customers want to conduct a thorough investigation of the product before they commit to buying it to ensure that all product images are vivid, 高质量的, 和缩放的.

显示清晰的产品信息

A shocking (but not surprising) number of 电子商务 customers ab和on their shopping carts due to a lack of information about the actual cost. 60%的客户 列出意外费用(如.g., 航运, 税, 费用)作为他们放弃购物车的原因, 23%的人无法预先计算总成本. Lack of transparency is a surefire way to tank conversions on 电子商务网站, 所以请记住这些Shopify提示和技巧:

• 使用 渐进式披露技术 清晰地组织信息.
• 在前面显示一个完整的成本细目.
• 明确地传达价值主张.
• 让“立即购买/添加到购物车”按钮在视觉上与众不同.

建立信任和保证

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

Social proof is an undeniable way to skyrocket conversions by empowering trust on 电子商务网站. 根据BrightLocal， 88%的消费者 相信网上评论和个人推荐一样重要, so it’s essential to nudge previous customers to leave reviews 和 indicate this within the customer journey. 大多数Shopify主题也利用 模式标记 将这些评分直接整合到搜索结果中.

除了社会认可, consider building customer confidence by implementing a live chat solution such as 对讲机, Zendesk, 漂移, or Kayako. Shopify允许通过他们的 应用程序商店 通过手动安装.

展示相关产品推荐

All leading 电子商务 businesses take advan标签e of cross-sell 和 upsell strategies. 标签，结合分析和A/B测试集成，如 优化的网络推荐, can help designers empower businesses to improve conversion rates by displaying 可选或附加 顾客可能感兴趣的物品.

整合购物体验个性化

集成如下 网页个性化由Optimizely, 结合Shopify的收藏和标签, allow data-driven businesses to segment audiences based on their interests 和 previous purchase history 和 change the page content accordingly.

与 预期设计 技术, Shopify商店可以展示更多相关的内容, 让观众参与的时间更长, 因此更有可能转化为销售. 个性化 是提高任何电子商务企业财务底线的关键.

检验优化

客人结账vs. 客户账户

根据 Baymard研究所, “the site wanted me to create an account” is the second most common reason (st和ing at 35%) why customers ab和on their checkout without purchasing anything. Shopify建议允许客人结账(尤其是在手机上), to that end, it’s the default option to have customer accounts disabled.

精确定位用户体验缺陷并减少流失

Attempting to solve 废弃的签出 without robust analytics is as effective as looking for a black cat in a dark room. Optimizing Shopify user experiences 和 checkout flows works best when it’s a data-driven process.

Shopify设计师可以 连接Google Analytics和Shopify 建立一个 目标漏斗, 哪一个。, 在收集了足够的数据之后, will illustrate exactly where customers are deciding they don’t want to continue with their purchase.

为了获得最佳效果，将Shopify与诸如 疯狂的蛋, Hotjar, FullStory to observe these problem areas in more detail using heatmaps 和 visitor recordings.

结论

For designers to be able to better communicate the benefits 和 capabilities of the Shopify platform 和 learn what solutions it can 和 can’t provide to clients, 最好是开一家免费的演示店. 此外,前 电子商务设计师 可以注册 Shopify专家，为他们的简历增加可信度 Shopify网站设计师.