Headless Shopify 综合指南：您需要知道的一切

Shopify 是前五名领先的电子商务平台之一，截至 2021 年 4 月，其市场份额为 3.69%。它是不断推出新功能的平台之一。 这就是 Shopify 首先如此受欢迎的原因。

但是电子商务领域比以往任何时候都更加充满活力。 客户越来越精通技术，获客成本不断上升，打造个性化购物体验变得越来越必要。

尽管您的 Shopify 商店可以处理大部分这些事情，但如果您的品牌快速扩张，这还不够。 原生 Shopify 功能可能无法帮助您扩大覆盖面、增加转化率以及不断吸引新的数字接触点。 这就是无头商务（或无头 Shopify）的用武之地。

在本无头 Shopify 指南中，您将了解：

A. 什么是无头 Shopify？

这是一个无头商务设置，其中后端（Shopify plus）与前端（表示层）是分开的。 API 形成了两者之间的连接链接。 但是，在传统的 Shopify 平台中，前端和后端都是捆绑在一起的。

在 headless Shopify 中，您可以选择自己喜欢的技术或框架从头开始构建前端。 后端通常是 Shopify。 因此，您可以获得 Shopify Plus 的敏捷性、安全性和用户友好性，以及远远超出 Shopify 开发的创作自由。

问题是，为什么要把前端和后端分开呢？

• 首先，它为您提供了创建高度个性化数字体验的自由，这是建立品牌忠诚度的必要条件。
• 其次，您在编程语言、技术或内容渠道方面没有限制。
• 无论是智能手表还是电视屏幕，您都可以轻松快速地接触到目标受众。

这就是电子商务商店在日益多样化的数字世界中想要的那种自由。

B. 无头 Shopify 如何工作？

如前所述，无头 Shopify 由两个独立的部分组成，前端和后端。 将这两个部分（头部和身体）粘合在一起的粘合剂是 API，或应用程序接口。 它本质上是在表示层（前端）和数​​据库或后端之间交换信息。

您可以使用以下任何系统来构建您的后端，该后端包含和管理您想要与客户共享的内容。

• 内容管理系统 (CMS)
• 客户关系管理 (CRM)
• 数字体验平台（DXP）
• 渐进式 Web 应用程序 (PWA)

好消息是 Shopify 在构建时考虑了无头商务功能。 因此，将 Shopify 支持的网站转变为更灵活的无头商业商店可以是无缝的。

C. 将 Shopify 理解为无头结构

虽然无头商务听起来是一笔不错的交易，但并不全是玫瑰。 所以，在你开枪之前，你必须彻底了解无头 Shopify 结构。 在迁移到无头 Shopify 之前，您需要考虑以下几点。

1. 主题和富文本编辑器

我们都知道 Shopify 主题编辑器如何让我们的生活变得轻松。 主题定制感觉就像轻而易举。 不幸的是，在无头商务环境中将缺少这个漂亮的功能。

同样，富文本编辑器也是 Shopify 平台不可或缺的一部分。 但是，当您转向无头商务时，这也会丢失。 这意味着文本的格式和样式将是古老的历史。 想想产品描述、博客、CTA 等。

您必须牢记这一点，特别是如果您的在线商店无法取消这两个功能。

2. 原生功能

与主题和富文本编辑器一样，在无头模式下您将失去其他几个本机功能。 例如，您将丢失 Shopify 分析和 Shopify 脚本。 相反，您将不得不依赖谷歌分析等第三方工具。 如果您严重依赖 Shopify 分析，它可能会影响您的工作效率。

同样，您将无法使用特定 Shopify 应用复制您以前的店面。 您可以借助 API 获得相关功能。 然而，这可能并不总是可能的。

3. Shopify 应用商店

没有人可以想象没有应用商店的 Shopify 平台。 有如此多的应用程序和插件可供选择，您的 Shopify 开发变得更加顺畅和快捷。 不幸的是，你无法使用应用程序和插件在无头后向前端添加新功能。

您也许可以使用一些插件和应用程序与其他集成。 但是，如果您不能，请准备好与多个应用程序/插件说再见。 唯一的一线希望是您可以继续使用在后端运行的应用程序/插件。 请记住，您的后端仍然是 Shopify Plus。

4. 客户账户

您需要了解的另一个关键点是客户帐户的丢失。 Shopify 的客户帐户将无法在无头商务中使用。 如果没有帐户，您的客户只能以访客客户的身份结账。

但是，您可以在 Shopify Admin API 的帮助下创建自定义解决方案。 在这里，您的客户将能够手动添加他们的详细信息。 如有必要，您可以使用 cookie 保存消费者详细信息。

D. 如何使用 Shopify 去无头？ （设置）

一旦你决定去无头，你将需要首先计划整个过程。 通常，使用 Shopify 支持的网站进行无头操作涉及以下步骤。

1. 为您的 Shopify 前端选择合适的技术

使用 Shopify 的第一步是选择正确的前端技术。 大多数 Shopify 开发机构依赖以下四个选项来构建强大、可扩展且直观的 Shopify 店面。

a) 氢气和氧气

Shopify 宣布在 Unite 2021 上推出 Hydrogen 和 Oxygen。Hydrogen 是一个开发人员工具包，其中包含一些反应组件，可让您构建具有独特样式和设计功能的前端解决方案。

另一方面，Oxygen 允许您直接在 Shopify 服务器上托管 Hydrogen 店面。 您可以享受更快的加载时间，而不必担心开发操作。

这对二人组的唯一缺点是它仍然是新的。 你会发现很少有现实生活中的用例。 因此，在使用此店面解决方案时，您可能需要靠自己。

b) 框架

您还可以使用 Next.js 或 Vue Storefront 等前端 Web 开发框架来构建您的 Shopify 前端。 您可以使用许多其他框架。 您可以将它们托管在 Shopify 的 Storefront Cloud 服务上。

然而，使用框架从头开始构建前端非常耗时，即使对于最有经验的开发人员也是如此。 它通常需要自定义集成、自定义和经过测试的购物车管理实施，以及从头开始重建功能。

c) 前端即服务

构建 Shopify 前端的另一种相对简单快捷的方法是将前端用作服务。 最著名的是 Shogun Front End 和 Builder.io。 它们只不过是带有预构建连接器的 PWA 构建器。

d) 前端中间件

第四种选择是使用 API 优先的商务中间件，例如 Nacelle。 像这样的中间件通常将电子商务平台、CMS 和微服务整合到一个 API 中。 这是连接 Shopify 前端和后端的桥梁。

2. 了解 Shopify Storefront API

上一点讨论的所有前端开发选项都使用 Shopify Storefront API。 换句话说，您必须先熟悉 Shopify Storefront API，然后才能进行下一步。

Shopify Storefront API 可用于 GraphQL。 因此，如果您想利用 Storefront API 的潜力，就必须了解 GraphQL。 您可以查看 GraphQL 指南以获取更多信息。

3. 创建访问令牌

接下来，您将需要生成访问令牌。 这是你必须做的。

• 登录您的 Shopify 后台
• 转到应用程序部分，然后单击管理私人应用程序按钮。
• 现在，单击创建新的私有应用程序选项。
• 添加应用名称和电子邮件。
• 转到Storefront API部分并选中Allow this app to access your storefront data using the Storefront API复选框。
• 接下来，选择要向应用公开的数据类型。
• 单击保存。

保存后，您可以在 Storefront API 页面底部看到生成的店面访问令牌。

4. 构建您的前端（Shopify 店面）

创建访问令牌后，您可以开始构建和/或自定义您的 Shopify 店面。 但首先，您应该看一下 Shopify 前端开发的自定义店面示例应用程序。 如果您正在构建基于 React 的前端应用程序，请确保通过 react-js-buy 存储库。

• 在构建 React.js 应用程序时，您需要使用 NPM 或 Yarn 安装 JavaScript Buy SDK。
• 安装 SDK 后，将Client对象导入您的应用程序代码。
• 初始化客户端并开始向 Storefront API 发出请求。

请务必先查看 JavaScript Buy SDK 文档和 Shopify 的官方 API 文档。 它将帮助您了解可用的数据。

E. 由 Shopify 提供支持的顶级无头商务

许多由 Shopify 提供支持的网站都采取了无头行动来帮助扩大其品牌。 这里有五个电子商务商店/网站已经掌握了他们的无头方法，同样，风格和复杂性。

1.科顿

当这个可持续的服装和家居用品品牌 Kotn 需要一个快速加载的在线商店时，他们转向了无头 Shopify。 从那以后，他们再也没有回头。 该网站拥有一个非常直观的前端，具有快速添加等功能。

2. 全鸟

另一个可持续服装、配饰和鞋类品牌 Allbirds 拥有丰富多样的产品目录。 使用 Shopify 可以更轻松地管理目录，而不会影响速度、风格和用户体验。

3.瑜伽女孩

当您是生活方式品牌时，更新内容是您的首要任务。 毫不奇怪，像 Yoga Girl 这样的新兴品牌选择与 Shopify 合作。 您可以做任何事情，从更新博客文章到以闪电般的速度管理您的帐户。

4. 全体会议

作为一个护肤品牌，Plenaire 成功地利用了无头商务。 该网站速度很快，并且明智地利用了动态页面。 总体而言，它为您提供了令人印象深刻的用户体验。

5. Verishop

Verishop 是典型的电子商务商店之一，销售从化妆品到保健品的各种商品。 他们已将无头 Shopify 用于创建可自定义的 URL 结构、深入的 SEO、快速的页面加载速度和高度个性化的用户体验等功能。

F. 无头 Shopify 的好处

当您的在线商店仅依赖 Shopify Plus 时，Headless Shopify 提供了难以探索的功能。 这就是为什么您需要了解 Shopify 在何处以及如何实现无头模式可以帮助您的业务。 让我们深入了解它必须提供的一些显着好处。

1. 更好的灵活性

在这里，我们谈论的是开发人员的灵活性。 对于传统的 CMS，您将需要依赖Shopify 开发人员。 当然，由于技能组合有限且定义明确，因此可以节省时间和金钱。 但它也阻止您利用其他新兴和流行的电子商务技术。

使用无头 Shopify，您可以使用任何技术。 它可以是氢框架或任何其他前端即服务选项。 这使您的 Shopify 开发比以往更加灵活。 最终结果是您可以构建高度定制的用户体验、设计、架构和轻量级店面。

简而言之，您的在线商店将面向未来。

2.可定制的网址

我们都知道 Shopify 仅提供四种预定义的 URL 类型。 因此，为产品页面创建自定义 URL 是不可能的。 但是，如果您使用无头 Shopify 构建架构，您将拥有这种自由。

它为拥有多品牌市场的商店提供了大量机会。 这就是为什么像 Verishop 这样的商店首先选择了无头商务。 您可以自定义 URL 以包含完整的产品描述。

此外，如果您将商店从其他电子商务平台导入 Shopify，您可以保持原始 URL 结构不变。 它可以让您规避 SEO 迁移的风险。 对于拥有不同产品、市场和目标受众的电子商务商店来说，这是一种解脱。

3. 增强的安全性

在无头 Shopify 中，前端独立于后端运行。 由于只有 API 将两者连接起来，DDoS 等攻击几乎没有剩余的表面积。 这将您的在线商店安全性提高了一英里。

随着 DDoS 攻击变得更具创造性和利用性，您必须找到一切可能的方法来阻止此类攻击。 无头化本质上是朝着这个方向迈出的正确一步。

4. 对用户体验的出色控制

完全控制用户体验是无头 Shopify 最令人垂涎​​的好处之一。 这就像从头开始建造自己的汽车。 因此，您可以自由选择一切，从发动机到仪表板内饰。

换句话说，您可以毫不费力地设计出独特且响应迅速的客户体验，并帮助您的品牌脱颖而出。 您可以摆脱 Shopify 设计和架构限制的束缚。

您可以根据需要重新设计、扩展和/或添加新的用户体验。 这是大多数拥有多品牌市场渴望的电子商务商店的自主权。

5. 更高的可扩展性

Headless Shopify 架构让您可以无缝地将新商店添加到您的电子商务领域。 例如，您可以将特定国家或地区的商店添加到您的集中式中心。 借助灵活且高度可定制的 Shopify 店面，您可以轻松更改：

• 价格
• 产品说明
• 语言
• 布局
• CTA

这使您可以以闪电般的速度扩展您的在线商店。 自然，需要快速扩展的品牌现在正转向无头商务作为可靠的解决方案。

6. 提高速度

页面加载速度现在是最关键的 Core Web Vitals 之一。 建立一个加载速度超快的在线商店对许多人来说仍然是一项艰巨的任务。 它还需要大量的编码，品牌很少愿意投入。然而，这是必要的邪恶。 更高的加载速度，尤其是在移动设备上，可以提高您的销售转化率。

幸运的是，无头 Shopify 让开发人员和店主都更轻松。 以 Oxygen 服务器和 Hydrogen 框架为例。 尽管仍处于起步阶段，但此类功能已经在帮助店主显着提高页面加载速度。

7. 渐进式 Web 应用程序 (PWA)

渐进式 Web 应用程序 (PWA) 是无头 Shopify 的另一个好处。 PWA 直接通过您的网站提供类似原生应用程序的功能。 无需下载您的在线商店应用程序。 无头 Shopify 让使用 PWA 变得轻而易举。

PWA 大部分时间都是离线工作的。 当然，它需要使用服务工作者进行初始加载。 您可以将其添加为智能手机主屏幕上的应用程序图标。

它还带有推送通知功能，这对数字营销很有帮助。 但最重要的是，PWA 速度非常快，因为大部分内容都是预加载的。 这有助于产生更多的销售转化。

8. 缩短上市时间

最后，无头 Shopify 最重要的好处之一是缩短了上市时间。 借助 API 驱动的 Shopify 前端，您的营销人员可以：

• 更快地创建营销活动
• 通过网站布局和产品放置获得创意
• 工作不用担心对后端的影响
• 精确控制您的品牌外观和感觉

这有助于您快速、高效地制作广告系列。 这就是当今时代的营销 101。

G. Headless Shopify 的缺点

就像独特的好处一样，无头 Shopify 也有一些缺点。 您必须像了解好处一样彻底了解这些缺点。 这是您需要牢记的。

1. 失去对应用程序/服务的支持

当您转向无头商务时，Shopify 商店的即插即用功能将停止工作。 您的大多数应用程序也将停止工作。 您将需要自定义集成以使这些应用程序/服务在无头环境中工作。 此外，应用程序/服务将需要 API，以便您的后端能够识别它们。 它可能需要您创建一些自定义代码。

2. 复杂性增加

添加新的前端体验意味着增加无头商务系统的复杂性。 您添加的功能、服务和体验越多，您的电子商务环境就越复杂。

它可能会导致与应用程序相关的集成问题、维护问题以及需要不断修复错误。 总而言之，这意味着您将不得不在各种经验丰富的开发人员身上花费更多的钱。

由于所有这些额外的 Shopify 开发和对其他技术的需求，您的基础设施成本也将飙升。 随着您向在线商店添加新功能/服务，这些成本将继续上升。

3. 寻找实施合作伙伴

说到技术专长，您需要找到能够处理无头项目的 Shopify 开发机构。 如果不这样做，您将花费大部分时间来管理您的在线商店、修复错误等。 您宁愿花时间开展营销活动并吸引更多客户。

然而，找到一个合适的实施合作伙伴是一个难以破解的难题。 可能需要一段时间才能找到最适合您品牌的人。 问题是，你有时间等到找到可靠的人吗？

4.没有所见即所得的编辑器

我们非常确定您团队中的非技术成员喜欢所见即所得的编辑器。 它不适用于无头 Shopify。 因此，您必须告别无缝编辑、版本控制和预览。 虽然 Shogun Front End 和 Builder.io 等一些前端系统提供了此功能，但并不相同。

5. 没有新的 Shopify 功能

Shopify 平台以推出新功能而闻名，无论是多币种还是内置分析。 但是，当您无头时，这些将不可用。 您可以将此类功能自定义构建到您的前端。 但这需要更多的金钱和精力。

H. Headless Shopify 的 SEO 是否不同？

当谈到无头商务时，搜索引擎优化完全不是一个不同的球类游戏。 但是您确实需要考虑一些事情才能充分利用您的网站。 这是一个简短的 Shopify SEO 清单，可帮助您入门。

1. 内容和可读性

您可能已经知道，您的 Shopify 店面将使用某种形式的 JavaScript。 但是谷歌仍然在努力阅读一些框架。 您必须确保 Google 了解您的框架。

• 您可以使用 fetch as Google、站点搜索和内容文本搜索等测试来检查 Google 是否已将您的 JavaScript 编入索引。
• 确保根据您的前端运行免费的服务器端 JavaScript。
• 可读性取决于内容的显示方式。 由于这是一个特定于前端的问题，因此您必须为每个前端运行单独的测试并相应地进行 SEO 更改。

2.动态服务

Headless Shopify 依靠动态服务来加速您的网站并改善用户体验。 但除非另有说明，否则谷歌可能会认为这是一个狡猾的 SEO 举措。 您将需要使用 HTTP-vary 代码，告诉 Google 您正在使用动态服务来提高速度，而不是做一些可疑的事情。

3. 散列 URL

JavaScript 也带来了哈希 URL 的挑战。 这些 URL 突出显示浏览器端过滤。 换句话说，谷歌无法读取主题标签之外的任何内容。 这就是为什么您必须确保您的 SEO 页面不在主题标签后面。

4. 维护 URL

如果您要从不同的 CMS 迁移到无头 Shopify，这是一个重要的考虑因素。 通常，拥有多品牌市场的电子商务商店会面临这个问题。 与其更改原始 URL，不如将它们原样用于所有类别、列表和产品。

5. API 调用

Headless Shopify 是 API 驱动的。 这意味着会有动态 API 调用，这将影响您的 URL，影响您的 SEO。 如果您希望您的页面排名，最好使用静态 URL。 您还可以利用 SEO 最佳实践，例如 no-follow、robots.txt 和规范。

6. 整理您的 SEO 基础知识

传统的 Shopify CMS 带有大量内置的 SEO 功能。 但是当无头时，您必须手动包含这些功能。 从头开始构建前端时，您可能会忘记添加 SEO 元素。 为避免此问题，请列出 SEO 基础知识并仔细检查所有内容。

I. 使用 Shopify 变得无头无脑昂贵吗？

最后，这一切都归结为一个问题。

无头 Shopify 更贵吗？

简短的回答是肯定的。

但是，您必须正确看待它。 无头 Shopify 也往往会带来更多的钱。 它解决了许多传统 CMS 无法解决的问题。 这就是它可以帮助您的品牌脱颖而出、吸引更多客户并赚更多钱的方式。

无头 Shopify：

• 加速您的网站，改善用户体验
• 提高您的搜索引擎可见性，因为它加载速度更快
• 使构建独特而美观的用户界面变得更加容易
• 提高在线商店的安全性
• 将 PWA 功能带入您的电子商务领域

无头 Shopify 的所有这些好处都转化为更高的销售转化率和更多的收入。 许多品牌已成功利用无头 Shopify 来获取这些好处。 在无头之后，Ballsy 的转化率提高了 28%。

另一方面，BonLook 在无头之后的平均订单价值增长了 18%。 如您所见，从长远来看，无头 Shopify 的高成本是合理的，因为它还带来了更多的收入和利润。

J. 什么时候应该使用 Headless Shopify？

尽管无头 Shopify 可以增加您的收入和利润，但它可能并不总是正确的药水。 如果您的在线商店需要以下内容，您可能希望切换到无头商务。

1. 独特的品牌体验

如果您想为您的客户打造独特的品牌体验，那么无头模式将是正确的选择。 Shopify Plus 虽然很出色，但在定制方面提供的功能有限。

但是，无头商务允许您从头开始根据您的业务需求定制用户体验。 这有助于您的在线商店脱颖而出。

2. 更好的客户体验

定制与更好的客户体验之间存在直接关联。 如果您的在线商店提供其他商店无法提供的功能、速度和购物体验，那么它肯定会转化为更好的消费者体验。

3. 更高的转化率

自然，快速的页面加载和个性化会带来更高的转化率。 如前所述，许多品牌在无头之后的转化率、订单价值和其他指标都出现了大幅增长。

4. 高性能

Shopify Plus 在移动设备和其他小型设备上运行良好。 但是，如果您无头，则可以享受更好的页面加载速度。 此外，无头 Shopify 还可以提高您的数据安全性并降低计划外停机的风险。 如果这是您正在寻找的东西，那么无头电子商务就是您的选择。

K. Headless Shopify 的未来展望

无头商务不是趋势，而是电子商务的未来。 随着消费者使用不止一种设备访问网络，多渠道已成为新常态。 与此同时，消费者正在寻找高度个性化的数字接触点。 这就是为什么无头 Shopify 革命在未来几年可能永远不会放缓。

由于其内容优先的结构，无头商务正在帮助品牌提供令人难忘的全渠道客户体验。 总而言之，无头是让您的业务面向未来的最佳方式。

结论

近年来，无头 Shopify 获得了很大的关注。 这种新的革命性形式的 CMS 以其卓越的速度、高性能和更好的安全功能引起了人们的注意。 但是，许多人仍然不知道什么是无头 Shopify，它是如何工作的，或者他们应该去做什么。 本指南将帮助您回答有关无头 Shopify 的所有问题。

如果您想在 Shopify 中无所事事，请联系我们。 我们的专家可以帮助您找到正确的无头 Shopify 方法。