如何使用 Shopify 去无头

大多数电子商务网站都建立在同时为后端和前端提供支持的平台上。 这是一个简单的解决方案，可实现经济高效且省时的网站维护，以及轻松更新。

但是，越来越多的电子商务企业需要出色的性能并选择无头方法。 无头意味着将平台的前端与后端解耦。 也就是说，前端负责用户体验、内容和设计。 无头方式不仅解放了设计团队，也解放了营销团队，不再受平台能力的束缚。

如果您拥有 Shopify 商店，您不能失去 Shopify 强大的电子商务功能（支付处理、库存管理、PCI 合规性等），但您可能希望采用能够显着提高网站速度的技术，或者您可以具有高级内容管理要求、复杂的产品目录，或者只是希望摆脱主题的限制并创建高度独特的站点体验。

在这篇关于如何使用 Shopify 实现 Headless 的文章中，我们将了解 Shopify 以及有效做到这一点的品牌的方式和原因，他们是如何做到的，以及他们看到的好处。

什么是无头 Shopify？

Shopify 默认管理网站的前端和后端。 对于只需要商店最基本功能的企业来说，这是一个绝佳的选择。

由于 Headless Commerce 将商店的前端（或“头部”）与其后端功能（例如库存管理、内容管理和履行功能）分离，Shopify 可以与各种不同的内容管理系统 (CMS) 结合使用，为商店的内容。

随着业务的增长，您可能会发现某些功能或设计可能性变得越来越不灵活。 一刀切的策略在一定程度上可以发挥作用，但随着业务的增长，您可能会发现您需要 Shopify 店面提供的功能之外的其他功能。 通常，品牌选择 Shopify headless 是为了完成以下任务：

• 通过快速的页面到页面加载构建一个加载速度更快的网站。
• 增加对产品视觉呈现的控制。
• 创建更灵活、更直接的内容管理。
• 具有完全可定制的 URL 结构。

幸运的是，您无需进行全面改造或从头开始构建新的电子商务平台。 Shopify 的设计考虑到了分离，随着您的业务增长，它可以轻松地调整前端以更好地满足您公司的需求。 这就是他们的店面 API 派上用场的地方。

Shopify 是无头 CMS 吗？

​​​值得注意的是，Shopify 有一个无头 CMS。 Shopify 的集成服务使其成为电子商务品牌如此强大的工具。 Shopify 的内置内容管理系统、主题层和编辑器，您可能已经熟悉，它与其他电子商务功能无缝集成。

但是，这些功能被设计为在必要时相互独立工作。 因此，如果您需要更灵活地组织 CMS 中的内容（Shopify 仅支持四种预定义的内容类型），您可以使用更通用的第三方 CMS，例如 Contentful 或 Prismic，根据需要定义数据，然后使用 headless 通过 API 将其连接到 Shopify。

Shopify 和其他供应商开发了一个强大的工具包，它比您想象的更简化了流程。 如果您是小型在线零售商，Shopify 的 CMS 可能就足够了，但如果您正在扩展或拥有优先考虑速度、客户体验和演示的移动优先业务模式，Shopify 无头商务的相对简单性和更强大的CMS 选项很可能证明追求 PWA 构建是合理的。 您可以通过包含与 Shopify 兼容的 CMS 的体验平台或前端即服务提供商来寻求此选项。

使用 Shopify 去无头的利弊

无头 Shopify 的优点

• 对消费者体验的更大程度的控制：与即插即用 Shopify 相比，无头架构的定制和个性化可能性要大得多。 您可以克服 Shopify 原生功能和主题的限制，创造独特的视觉营销体验。 此外，您将获得对站点管理的更大控制权，而无需额外编码或牺牲自定义。
• 更快的速度：速度意味着更多的销售，尤其是在移动设备上，所以无论你做什么来简化你的代码库都会帮助你转化。 通过无头，您可以使用更有效的前端交付技术。 通过使用无头 PWA 设计，您的浏览器可以加载静态创建的站点，而无需发出任何动态数据库请求，这通常很慢。
• 用于改进 SEO 的可定制 URL ：URL 的结构对于将客户引导至您的网站至关重要。 Shopify 在 URL 修改方面实际上非常严格。 使用无头架构来构建您的网页可以让您完全控制您的 URL 结构，从而最大限度地提高您的 SEO 结果。
• 缩短上市时间：通过连接到 Shopify 商店的定制前端，您的营销团队可以更快地构思和设计活动，在不影响后端程序的情况下试验网站样式和产品放置，从而缩短从概念到执行的时间。 此外，您还可以精确控制品牌的外观和感觉。

无头 Shopify 的缺点

• 应用程序/服务支持的终止：当您停止使用 Shopify 的内置主题时，某些应用程序将停止运行。 如果您选择前端即服务提供商，他们将提供您可以选择并重新集成的集成。 但是，假设您的企业正在通过代理定制 Shopify 商店的前端（或选择架构的特定组件）。 在这种情况下，您需要实施一些独特的代码来启用 Shopify 的 API 来识别您的第三方应用程序。
• 增加的复杂性：通过向您的电子商务堆栈添加另一层，您会自动增加操作的复杂性。 如果您选择专用的前端，您将负责管理（至少）两个平台，以保持您的网站运行良好。 如果你想扩展，你要么需要一个熟悉 React 的内部开发团队，要么你需要与前端即服务提供商和/或代理机构合作。
• 实施合作伙伴的注意事项：拥有能够处理无头技术要求的合作伙伴，让您和您的电子商务员工能够专注于销售和营销，这是一个积极的发展。 但是，在这种情况下您必须谨慎行事。

如何使用 Shopify 去无头

第 1 步：为您的店面选择合适的技术

在为您的用户界面选择技术时，必须考虑许多因素。 至少，您必须考虑您的开发团队的技能组合以及该特定技术的能力，以匹配您项目的技术和设计目标。

• Shopify 团队开发了利用 Shopify Storefront API 的演示自定义店面应用程序。 由于大多数示例都是使用 React.js 和 Ember 构建的，因此您应该考虑采用其中一种技术。
• 您应该考虑使用静态站点生成器框架，例如 GatsbyJS 或 Next.js。 服务器端渲染 (SSR) 可以帮助您改进搜索引擎优化并减少 TTI（交互时间）。
• 此外，考虑使用 Prismic 或 Contentful 等无头 CMS 来减少开发时间并提高性能。

第 2 步：生成访问令牌

导航到 Shopify 管理员的应用区域，然后选择管理私有应用。

选择创建新的私有应用程序。 输入姓名和电子邮件地址。

在店面 API 部分中选择允许此应用使用店面 API 访问您的店面数据。 定义您希望为您的应用程序提供的数据类型。 单击保存按钮。

保存应用程序后，可以在页面底部的 Storefront API 区域找到生成的店面访问令牌。

第 3 步：创建独一无二的店面

最好先熟悉 Shopify 的自定义店面演示应用程序之一。 如果您决定为您的项目使用 React.js，您可以浏览 react-js-buy 存储库。

以下步骤是开始开发您的自定义店面。 要将 React.js 应用程序与 Shopify Storefront API 集成，请执行以下步骤：

• 使用 NPM 安装 Javascript Buy SDK 模块： npm install --save shopify-buy或者如果你喜欢 Yarn 然后选择yarn add shopify-buy 。

• 从Javascript Buy SDK导入客户端，以包含在来自“shopify-buy”的客户端中； 并为您的应用程序提供以下客户端对象：

• 建立客户端后，您可以开始向Storefront API发出请求。

您可以选择哪些无头选项？

如果您确定您的 Shopify 店面需要新的和改进的前端，则可以使用三种主要方法。 无论您采取哪种选择，都将取决于您独特的业务需求：

1.自己动手

通过在 Shopify Plus 之上开发自己的无头架构，您可以获得所有电子商务功能的所有权，从而可能提高您的灵活性。 这意味着您不受其他任何人的系统的约束，可以带头进行开发和编码。

但是，从一开始就构建无头架构需要大量的开发和编码工作。 例如，Shopify 主题使用 Liquid 模板语言。 由于无法无头使用 Liquid，因此如果您希望创建可通过 Shopify Storefront API 访问的定制店面，您需要一个熟悉 React.js 和 Ember 等框架的团队。 或者，如果您正在构建一个静态站点，他们需要熟悉 Next.js 或 Gatsby 等框架。

2. 与代理一起开发

如果您选择正确的代理机构，您将与在开发与 Shopify 后端接口的无头网站具有丰富经验的人合作，并且精通所有潜在危险 - 以及如何预防它们！ 此外，代理商可以通过定制（如果这是您的最佳选择）或与前端即服务提供商合作来完成您的软件开发来帮助您在商店中无头无脑。

代理商将能够在设计阶段为您提供帮助和建议，并将拥有将您的伟大新愿景变为现实所需的知识。 他们将能够提供有关哪些功能、布局和导航最适合 Shopify 后端的建议，从而帮助您优化您的网站。

另一方面，您仍将负责自行管理无头商店。 初始设计和构建完成后，您和您的技术人员就可以确保整个操作顺利运行，这在处理技术堆栈的众多移动部件时是不小的壮举。 这可以通过与您的合作伙伴机构签订的聘用协议来实现。

3. 使用前端即服务提供商

如果您对研究、设计、开发、测试和部署平台和自定义 API 的拼凑不感兴趣，前端提供商可以为您处理。 您得到的是一个完美的解决方案，其中包括运营店面所需的一切，同时完全可根据您的特定需求进行定制。

您的团队将能够通过直观的体验管理器管理所有电子商务和营销问题，而不是导航技术堆栈的多个层，从而消除与日常站点管理相关的大量技术难题。

使用体验平台并不排除您与网页设计工作室合作重建您的网站。 许多前端供应商都有专门的网站建设者合作伙伴公司，这意味着您不仅会在商店的高效运营方面获得熟练的帮助，而且您还将获得一个全新的网站！

尽管如此，您将失去对某些技术堆栈的更多内部组件的直接控制。 您将无法简单地进入代码并随时进行一些更改； 您需要与您的前端提供商讨论某些技术的、幕后的变化。

Shopify 无头商店示例

1. 饲料

thefeed.com 的合伙人 Ben Kennedy 最初对通过使用他们的 Shopify 网站而获得的速度和用户体验改进持怀疑态度，因此他决定进行一些实验。 在开发了两个相同版本的网站后，一个无头版本，一个使用 Shopify Liquid，他们发现无头版本的性能优于 Shopify Liquid 版本，转化率提高了 5.24% ，每位访问者的收入提高了 10.28% 。

除了原始数据，Ben 对 Shogun Frontend 的轻松实施印象深刻，无需他的团队参与底层代码。

2.Faye.co

这家德国珠宝业务是 We Make Websites 的另一个无头 Shopify 项目。 Alex 概述了此类网站可以为品牌带来的好处：“Shopify Checkout 一直是一款出色的产品，它结合了一流的用户体验（移动设备友好、支持 Apple Pay 等替代支付方式以及简洁的用户界面）和安全且可扩展的平台。” 您保留了它的好处，以及在 Shopify 中维护您的产品目录的能力。”

此外，他表示“使用像 Shogun 这样的产品是一个很好的步骤——它复制了 Shopify 的一些即插即用元素，同时避免了与构建 JAMstack 应用程序相关的大量开发工作，但具有无头（即关注点分离和每个组件都是专门的架构）”，并且这些站点“由于静态构建而安全且更快”。

3.保罗瓦伦丁

这位魅力四射的珠宝商和制表商与 We Make Websites 代理机构合作，为无头用户改造其网站。 像许多其他考虑转移的公司一样，Paul Valentine 担心从纯粹的“即插即用”Shopify 迁移可能会导致网站维护变得不方便和缺乏控制。

然而，根据 We Make Websites 的 Alex O'Byrne 的说法，这种权衡是非常值得的。 “对于 headless，您将需要更多的开发人员，至少在整个网站构建过程中是这样。”

结论

无头是让在线商家夜不能寐的原因。 您花了数年时间在信誉良好的电子商务平台上发展您的业务，却发现当您的公司扩大规模时，您已经超出了其原有的能力。

通过创建 Shopify 无头电子商务店面，用户无需访问您的 Shopify 商店即可浏览、搜索和选择产品。 除此之外，它还使您能够维护自己的代码库和模板。

如果您是一个使用 Shopify 的成长中的品牌，但相信获得自由的时刻已经到来，那么在您的 Shopify 网站上毫无头绪并不一定是主要的开发问题。