一个客户在2022年底给我打电话——一个位于哈顿花园的高级珠宝品牌，每年在线销售额约为240万英镑，几乎完全在Shopify上运营。数字不错。但她很生气。她的订婚戒指（目录中利润最高的产品）的转化率停留在0.8%，而她工作室的线下成交率大约是34%。差距不在产品上。产品很漂亮。差距在体验上——Shopify虽然有很多优势，但给了她一个看起来和感觉上都像稍微高档一些的Etsy店铺的网站。experience -- and Shopify, for all its strengths, was giving her a website that looked and felt like a slightly upmarket Etsy shop.
那次对话促使我好好思考一下奢侈品类的无头商务。不是那种机构博客喜欢讲的抽象"零售的未来"。而是具体的、混乱的、昂贵的、有时值得的那种。
所以。这是我从为细珠宝和高价配饰品牌构建和咨询无头项目中学到的东西。
---
为什么 Shopify 具体会遇到瓶颈
让我先说清楚一点：Shopify 很出色。我在 Seahawk 的投资组合中已经建立了一千多家 Shopify 商店。对于大多数品牌来说，它正是正确的选择。快速、可靠、生态系统成熟，一个称职的开发人员可以在三到四周内打造一个漂亮的店面。
但是精美珠宝不是大多数品牌。
问题往往集中在三个方面。首先：动画和交互保真度。Liquid是Shopify的模板语言，是一个服务器渲染系统。你显然可以加上JavaScript——但要创建高级珠宝商想要的那种流畅、电影感的滚动体验（想想梵克雅宝的网站、格拉夫的网站，甚至一个资金充足的独立品牌），你需要在每一个转折处与主题架构对抗。最后你会得到一堆补丁叠加起来的东西。animation and interaction fidelity. Liquid, Shopify's templating language, is a server-rendered system. You can bolt on JavaScript, obviously -- but creating the kind of fluid, cinematic scroll experiences that luxury jewellers want (think Van Cleef's website, or Graff's, or even a well-funded independent brand) requires fighting the theme architecture at every turn. You end up with patches on patches.
其次：产品故事讲述的深度。订婚戒指不是一个SKU。它是一个4C分解、一个产地故事、一个360°视频、一个让你交换戒托和宝石的配置器、一份带有手部照片的戒指尺寸指南——理想情况下，所有这些都在一个URL上，而不会因为自身的JavaScript权重而崩溃。Shopify的metafield系统随着2.0主题架构和Online Store 2.0已经有了显著改进，但当你在构建真正复杂的产品模板时，它仍然不够灵活。product storytelling depth. An engagement ring isn't a SKU. It's a 4C breakdown, a provenance story, a 360° video, a configurator that lets you swap bands and stones, a ring-sizing guide with hand photos -- and ideally all of that lives on one URL without the page collapsing under its own JavaScript weight. Shopify's metafield system has improved significantly with the 2.0 theme architecture and Online Store 2.0, but it still bends awkwardly when you're building genuinely complex product templates.
第三：丰富度下的性能。珠宝网站是图像密集型的。它们是视频密集型的。它们有高分辨率缩放。在不去掉一半体验的情况下，让Shopify媒体丰富主题的Lighthouse评分超过70是真正困难的工作。我做过——但这需要英勇的图像优化工作和很多妥协。performance at richness. Jewelry sites are image-heavy. They're video-heavy. They have high-resolution zoom. Getting a Lighthouse score above 70 on a media-rich Shopify theme without stripping out half the experience is genuinely hard work. I've done it -- but it requires heroic image optimisation work and a lot of compromises.
0.8% 转化率问题通常是信任问题
有一点花了我一段时间才想通：对于高票价购买，网站的感知质量是对品牌信任的代理。一个4800英镑的订婚戒指，卖自一个感觉加载有点慢的网站，产品图像看起来略显压缩，结账流程打破了店铺的视觉语言——那个网站正在悄悄地摧毁转化。perceived quality of the website is a proxy for trust in the brand. A £4,800 engagement ring sold from a site that feels like it loads a bit slowly, where the product images feel slightly compressed, where the checkout journey breaks the visual language of the store -- that site is quietly destroying conversions.
人们不会明确表达这一点。他们只是离开了。
---
"无头"在这个语境中实际上意味着什么
快速说明一下对于任何需要了解基础知识的人：无头商务意味着你将前端（客户看到和交互的部分）与后端商务引擎（购物车、结账、库存、订单）分离。Shopify的Storefront API让你可以纯粹将Shopify用作后端，同时用任何你想要的框架构建前端。
我最常推荐和构建的技术栈：前端用Next.js，后端用Shopify作为商务引擎，无头CMS（通常是Sanity或Contentful）管理编辑和故事讲述内容。有时候在上面再加一个专门的搜索层，比如Algolia。Next.js on the front end, Shopify as the commerce back-end, and a headless CMS -- usually Sanity or Contentful -- managing the editorial and storytelling content. Sometimes a dedicated search layer like Algolia on top.
这就是架构。听起来很优雅。它可以是——但成本影响需要明确地说出来。
---
真实成本分解
人们对无头商务充满憧憬，然后看到发票时就会退缩。所以让我坦诚地说这到底要花多少钱。
为高级珠宝品牌构建一个恰当构建的无头Shopify店面——自定义Next.js前端、Sanity CMS、Algolia搜索、配置好的产品配置器、适当的动画工作——初期构建的成本大约在4万到12万英镑之间。这是一个很宽的范围，很大程度上取决于配置器的复杂性和动画的范围。Next.js front-end, Sanity CMS, Algolia search, configured product configurator, proper animation work -- is going to run you somewhere between£40,000 and £120,000 for the initial build. That's a wide range, and it depends heavily on the configurator complexity and the animation scope.
持续地，你需要一个更复杂的托管和基础设施设置。Vercel用于Next.js托管是显而易见的选择——他们的边缘网络处理性能方面做得很好——但你需要为此付费。一个有意义的Sanity计划、Algolia成本、开发人员时间用于内容模型更改（Shopify商人会在主题编辑器中自己做的事情）。总体拥有成本确实更高。Edge Network handles the performance side well -- but you're paying for it. A meaningful Sanity plan, Algolia costs, developer time for content model changes that a Shopify merchant would do in the theme editor themselves. The total-cost-of-ownership is genuinely higher.
这是我对每个兴高采烈地来找我想要采用无头的客户说的：运营开销是真实存在的。你的营销团队再也不能仅仅安装一个 Shopify 应用来添加评论小部件或忠诚度计划。现在每个集成都需要开发者的介入。这不是一个破坏性因素，但这是你的组织运营方式的根本改变。the operational overhead is real. Your marketing team can no longer just install a Shopify app to add a review widget or a loyalty programme. Every integration now requires developer involvement. That's not a dealbreaker, but it's a fundamental change in how your organisation operates.
什么时候这个成本值得
当以下条件满足时，数学才开始有利：
- 你的平均订单价值在 £1,500 以上——因为即使转化率提高 0.5% 也会产生可观的收入
- 你拥有编辑内容（品牌故事、产品溯源特性、设计师档案），需要与产品并列展示，并由非技术团队管理
- 你在投放大量付费媒体，但你的落地页体验明显很差——无头架构让你能灵活快速地为特定活动构建体验
- 你有产品配置需求（戒指定制工具、刻字、宝石选择），在 Shopify 原生架构中根本不可行，否则会变成维护噩梦
---
我实际推荐的技术栈
在构建和接手过几个这样的项目后，这是我会选择的方案：
- Next.js 14 (App Router)——React Server Components 模型在性能方面确实很有用；你可以流式传输产品数据而不会阻塞页面渲染 -- the React Server Components model is genuinely useful for performance here; you can stream product data without blocking page render
- Shopify Storefront API——不是 Admin API；Storefront API 才是无头前端应该调用的客户端数据接口 -- not the Admin API; the Storefront API is what headless front-ends should be hitting for customer-facing data
- Sanity v3——GROQ 查询语言一旦过了学习曲线就很好用，内容湖模型非常适合那些想在网站、应用和邮件中重复使用编辑内容的品牌 -- the GROQ query language is a joy once you're past the learning curve, and the content lake model suits brands that want to reuse editorial content across web, app, and email
- Algolia——对于拥有大型目录的品牌特别有用，他们需要按金属类型、宝石、价格区间和系列进行分面过滤，且需要即时响应 -- especially useful for brands with large catalogues where faceted filtering by metal type, gemstone, price band, and collection needs to be instantaneous
- Framer Motion——用于动画层；它能干净地集成到 Next.js 中，给你提供滚动触发和物理运动动画，让奢侈品网站显得生动活泼 -- for the animation layer; it integrates cleanly into Next.js and gives you the scroll-triggered, physics-based animations that make a luxury site feel alive
- Vercel——托管、CI/CD、预览部署，供内容团队在上线前审核 -- hosting, CI/CD, preview deployments for the content team to review before pushing live
我已停止推荐的方案
Gatsby。我知道有些人仍然对它信誓旦旦,但我在 2020 年到 2021 年间用 Gatsby 建了两个无头珠宝店,构建时间长得离谱,生态系统也明显失去了势头。Next.js App Router 已经让 Gatsby 在这个使用场景中基本成了多余的。
我也不再推荐完全自定义的后端了。Shopify 的 Storefront API 加上 Shopify 原生结账（在无头设置中你不需要替换它——你仍然使用 Shopify 结账）提供了 PCI 合规、支付方式、Shop Pay 和高转化的结账流程。别重新构建那套。永远别。
---
配置器问题——以及诚实的答案
这是大多数高级珠宝无头项目要么非常成功、要么成本高昂地崩溃的地方。
一个戒指配置器——客户选择镶嵌风格、金属、宝石形状、克拉重量，然后看到渲染或拍摄结果——如果你要做得专业，这是一项巨大的工程。我见过品牌尝试在 Shopify 中使用变体和元字段来构建这个功能。对于简单情况（两三个选项），它是可行的。但对于真正的配置器，有数十种组合？变体限制（Shopify 中每个产品 100 个）很快就会成为硬障碍。
Seahawk在2023年与一家梅费尔珠宝商的项目中，配置器需要18种镶嵌风格×4种金属×7种宝石形状×5种克拉带。这超过2,500种组合。每种都有自己的价格逻辑。Shopify的本地变体系统根本不支持这种规模。我们最后在Next.js层构建了配置器逻辑，在URL和购物车属性中存储配置状态，并使用自定义Shopify行项目属性结构将选定的配置传递给履行系统。效果非常好。但花了三个开发者六周时间。
这是实话。是可能的。就是不快。
---
Headless无法解决的问题
我想就代理行业中关于 headless 的一个观点提出异议——认为它是转化率问题的灵丹妙药。
它不是。
如果你的产品摄影平庸，headless架构救不了你。如果你的戒指尺寸指南令人困惑或退货政策隐藏很深，无论你的滚动动画有多么电影质感，你的转化率都会很糟糕。我见过一些构建精美的headless商店表现不佳，因为品牌没有真正的编辑内容来填充CMS，所以页面半空着，显得很稀疏。
Headless会放大已有的东西。如果品牌强大、内容丰富、摄影优秀，headless就给你一块画布，用真正的创意自由来表达所有这些。如果这些东西缺失，headless就是一种昂贵的方式来发现你的问题从来就不是技术问题。
---
常见问题
无头商务是否仅适用于预算充足的大品牌?
基本上是的——至少在高端珠宝领域。构建成本和持续开销使得对年在线销售额不足 50 万英镑的品牌来说很难接受。低于这个门槛，我会将钱花在更好的摄影、转化率优化审计，以及一个配置得当的 Shopify 主题（比如 Dawn 或 Prestige）上，甚至在考虑 headless 之前都不会。投资回报率还没到位。
我能否将Shopify原生结账与无头前端一起使用?
是的，你应该这样做。Shopify 的 Checkout Extensibility 已经大幅改进——你可以自定义结账外观并添加 UI 扩展，而无需替换它。用自定义构建的结账页面替换 Shopify 结账是一个决定，在十八个月内当你需要支持新的支付方式或遵守新的欺诈规则时，你会后悔。Checkout Extensibility has improved significantly -- you can customise the checkout appearance and add UI extensions without replacing it. Replacing Shopify checkout with a custom-built one is a decision you will regret within eighteen months when you need to support a new payment method or comply with a new fraud rule.
无头构建实际上需要多长时间?
对于一个拥有产品配置器、编辑内容需求和有意义的产品目录的高端珠宝品牌来说?实际上从发现到上线需要16到24周。任何告诉你8周的人要么在激进地削减范围,要么计划给你一些未完成的东西。我两种都见过。
与配置良好的Shopify主题相比,性能差异是什么?
说实话，比人们预期的要少。一个使用 Shopify CDN 和压缩媒体的优化良好的 Shopify 主题可以达到 Lighthouse 分数的 80 多分。一个优化不当的 headless 网站可能只有 50 多分。headless 的性能优势是真实存在的，但不是自动的——它需要严格的实施。更大的优势在于交互质量和动画保真度，而不是原始加载速度。Shopify's CDN and compressed media can hit Lighthouse scores in the mid-80s. A poorly optimised headless site can score in the 50s. The performance advantage of headless is real but it's not automatic -- it requires disciplined implementation. The bigger advantage is interaction quality and animation fidelity, not raw load speed.
我应该迁移现有的Shopify商店还是从头开始重建?
重建。我曾经两次尝试将现有的 Shopify 店铺迁移到无头架构，两次都因为现有店铺的技术债务污染了新项目。从零开始构建，迁移你的数据（产品、客户、订单历史），完全放弃旧主题。
---
顺便说一下，Hatton Garden 的客户就是在 Next.js / Shopify / Sanity 技术栈上重建的。花了我们十九周时间。她的订婚戒指转化率从 0.8% 提升到 2.1%，这是在上线后九十天内实现的。她还告诉我她的营销团队很不高兴，因为现在改一个首页横幅都需要开发者。这两件事同时都是真实的。
这就是 headless commerce。真正强大。真正苛刻。值得——但只有当品牌做好了应对其要求的准备时才行。