Shopify powers more than half a million 电子商务 businesses in 175 countries. 自2012年以来, Shopify平台上的商家数量平均每年增长74%, 这些商家已经实现了超过550亿美元的销售额，因为Shopify是其中之一 最著名的 和 最容易使用 今天的电子商务平台.

Shopify负责域名, 举办, 所有后端, 以及一些前端功能, 更多的时间, 钱, 和资源可以花在UX设计上. By 2021, 电子商务 sales worldwide are expected to reach a new high of $4.9万亿美元，而不合格的用户体验设计是最大的贡献者之一 废弃的签出，这是更明确的实施 电子商务最佳实践 会继续证明是非常有效的吗.

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

Shopify有什么功能?

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

• Integration with external payment gateways, such as Stripe 和 PayPal
• 访问 Shopify支付，与外部选择相比，费用为零
• The ability to allow payment by gift card or store credit
• 可自定义的结帐页面(仅适用于 Shopify + 客户)
• 用户帐户或来宾结帐的选项
• 静态页面(e).g., 隐私政策 or 条款与条件)
• 包含促销内容的登陆页
• 用于开发中的商店的密码访问
• 产品 variants with a range of customizable options
• Smart Collections to automate the categorization of products
• 搜索 和 标签 functionality to aid product discovery
• 博客 functionality with the ability to embed products into posts
• An API to help developers build dynamic websites 和 mobile apps

促进电子商务产品发现

类似于实体店按部门组织的方式，这样顾客可以通过询问工作人员来定位特定的商品, 网上购物者需要浏览的能力, 过滤器, search so they can find what they’re looking for 很容易 和 很快.

40%的电子商务客户 ab和on websites that take longer than 3 seconds to load, 哪一个。 suggests how impatient they are when it comes to product discovery. 幸运的是, Shopify has a number of features that make it easy to build custom navigation, 组织产品和类别, 实现搜索功能.

自定义导航

Presenting the customer with too many options may cause 分析瘫痪 (当有太多可用的选择而无法有效地做出决定时，会导致沮丧和放弃). 通过设计自定义导航，我们可以 优先考虑 products 和 “Collections” that convert most effectively—for example, 如果桌面产品是最受欢迎的，可以明显地展示“Desk”系列. 这些自定义导航也可以在Shopify CMS中进行编辑，以便进行临时A/B测试.

视觉上来说, 最好的转换Shopify主题清楚地显示Collections的标题，并使用足够的空白来帮助用户轻松地识别他们在所有产品中寻找的东西, Collections, 提供的页数.

Collections

A collection is an organized group of similar products. 产品s can be sorted into Collections manually, or they can be automatically sorted based on matched criteria (for example, if the product title contains a certain keyword, 已经分配了一定的 标签，或在特定价格范围内). Collections也可以是临时的(例如.e., 季节性或限时销售)确保Shopify网站设计始终相关, 及时的,, 最重要的是, 高转换.

While these Collections are defined behind the scenes, it’s useful for 电子商务设计师 to be aware of this functionality when designing for a Shopify website.

产品标签

Displayed/visible 标签s help customers find similar products, 如上所述, they can also be used internally to create Collections. 然而，标签的最大好处在于，它们可以用来创建一个 面向方面的搜索，允许客户根据标记的定义属性(如“黄色”)过滤产品.”

记住这些Shopify的设计技巧:

• For added clarification, show 哪一个。 过滤器s are applied.
• Allow customers to remove 过滤器s in order to widen their search.
• 截断过滤器 只展示最受欢迎的第一眼.

搜索

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

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

• 从来没有 hide the search box; reduce friction by making it immediately available.
• Place the search where customers expect it to be (i.e.，右上或中央).
• Show the entire input box, not just the search icon.
• Incorporate autocomplete functionality to help users search faster.
• 设计 for human error by using suggested results 和 autocorrect.
• Save user searches 和 send follow-up emails if no sale was made.

Shopify产品页面最佳实践

Shopify提供了所有需要的功能 吸引电子商务购物者 和 fluently guide users straight to the checkout. 如果我们把这些特征和 电子商务最佳实践, we can push the number of 废弃的签出 below the average statistic.

使用吸引人的产品图像

What makes a good 电子商务 website is imagery that 在情感上吸引用户. 为此，Shopify允许上传多个图像和产品变体. 从来没有theless, as a Shopify best practice, display 至少一个 这些产品图像的比例(i.e.(被其他物体包围，以说明产品有多大)来设定期望.

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

显示清晰的产品信息

由于缺乏有关实际成本的信息，数量惊人(但并不令人惊讶)的电子商务客户放弃了购物车. 60%的客户 列出意外费用(如.g., 航运, 税, 费用)作为他们放弃购物车的原因, 23% are unable to calculate the total cost up front. 缺乏透明度无疑会降低电子商务网站的转化率, so keep these Shopify tips 和 tricks in mind:

• 使用 渐进式披露技术 清晰地组织信息.
• Display a full breakdown of the costs up front.
• 明确地传达价值主张.
• Make the buy now/add to cart button visually distinctive.

建立信任和保证

根据 Baymard研究所, lack of trust is cited as the reason why 19%的客户 在结帐时抛弃. 幸运的是, all Shopify stores ship with SSL (secure checkout) by default, but they also allow customers to leave reviews as social proof.

社会认同是一种不可否认的方式，通过赋予信任来飙升转换 电子商务网站. 根据BrightLocal， 88%的消费者 trust online reviews as much as a personal recommendation, 所以有必要推动之前的客户留下评论，并在客户旅程中指出这一点. 大多数Shopify主题也利用 模式标记 to integrate these ratings directly into search results.

除了社会认可, 考虑通过实现实时聊天解决方案来建立客户信心，例如 对讲机, Zendesk, 漂移, or Kayako. Shopify allows for integration with third-party services through their 应用程序商店 通过手动安装.

展示相关产品推荐

所有领先的电子商务企业都利用交叉销售和追加销售策略. 标签, combined with analytics 和 A/B testing integrations such as 优化的网络推荐，可以帮助设计师授权企业通过展示来提高转化率 可选或附加 顾客可能感兴趣的物品.

Integrate Shopping Experience 个性化

集成如下 网页个性化由Optimizely, in combination with Shopify Collections 和 标签s, 允许数据驱动的企业根据他们的兴趣和以前的购买历史来划分受众，并相应地改变页面内容.

与 预期设计 技术, Shopify stores can display more relevant content, 让观众参与的时间更长, 因此更有可能转化为销售. 个性化 is key to boosting the financial bottom line of any 电子商务 business.

检验优化

客人结账vs. 客户账户

根据 Baymard研究所, “网站想让我创建一个账户”是客户在没有购买任何东西的情况下放弃结账的第二大常见原因(占35%). Shopify建议允许客人结账(尤其是在手机上)，为此，禁用客户帐户是默认选项.

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

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

Shopify设计师可以 连接Google Analytics和Shopify 建立一个 目标漏斗, 哪一个。, 在收集了足够的数据之后, 能够准确地说明客户在哪些方面决定不再继续购买.

For best results, integrate Shopify with tools like 疯狂的蛋, Hotjar, FullStory 使用热图和访客记录更详细地观察这些问题区域.

结论

让设计师能够更好地沟通Shopify平台的好处和功能，并了解它可以为客户提供什么解决方案，不能提供什么解决方案, 最好是开一家免费的演示店. 此外,前 电子商务设计师 可以注册 Shopify专家, adding more credibility to their resume as a Shopify网站设计师.