Shopify 无头电商 (Headless) 架构解析与 Next.js 实践指南

先判断问题出现在哪里

Shopify 的原生前端（Liquid）太重、太慢、受限太多。无头电商（Headless）就是把 Shopify 的“头（前端界面）”砍掉，只用它的“身体（后台管理和结账）”。前端用 Next.js 重写，实现毫秒级加载和完全自由的交互体验。

实战步骤

步骤 1：配置 Shopify Storefront API 权限

无头架构下，前端无法直接读取 Liquid 变量，必须通过 Storefront API 获取产品数据。

操作路径：Shopify后台 -> 设置 -> 应用和销售渠道 -> 开发应用 -> 创建应用

1. 命名为“Nextjs-Headless-Front”。

2. 点击 配置 Storefront API 范围，勾选 unauthenticated_read_product_listings（读取产品）、unauthenticated_write_checkouts（创建结账）等必要权限。

3. 安装应用后，复制生成的 Storefront API 访问令牌 (Public Access Token)。（注意：这个 Token 是公开的，可以安全地放在前端代码中）。

步骤 2：使用 Next.js 抓取商品数据 (GraphQL)

在 Next.js 项目中，通过 GraphQL 向 Shopify 请求数据，并利用 Next.js 的静态生成（SSG）实现秒开。

操作路径：本地 Next.js 项目 -> lib/shopify.js

// 封装请求 Shopify Storefront API 的核心函数
export async function shopifyFetch({ query, variables }) {
  const endpoint = `https://${process.env.SHOPIFY_STORE_DOMAIN}/api/2026-01/graphql.json`;
  
  try {
    const result = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN
      },
      body: JSON.stringify({ query, variables })
    });

    return {
      status: result.status,
      body: await result.json()
    };
  } catch (error) {
    console.error('Error:', error);
    return { status: 500, error: 'Error receiving data' };
  }
}

// 获取前 10 个产品的 GraphQL 查询
const getProductsQuery = `
  query getProducts {
    products(first: 10) {
      edges {
        node {
          id
          title
          handle
          priceRange {
            minVariantPrice {
              amount
              currencyCode
            }
          }
          images(first: 1) {
            edges {
              node {
                url
                altText
              }
            }
          }
        }
      }
    }
  }
`;

步骤 3：构建购物车并跳转至 Shopify 结账页

无头电商最难的部分是结账。不要自己写结账逻辑（极度不安全且违规），必须调用 API 生成 Checkout URL，然后把用户踢回 Shopify 的官方结账页。

操作路径：调用 checkoutCreate Mutation

// 创建结账并返回结账链接的 GraphQL
const createCheckoutMutation = `
  mutation checkoutCreate($input: CheckoutCreateInput!) {
    checkoutCreate(input: $input) {
      checkout {
        id
        webUrl # 这是 Shopify 生成的官方结账链接
      }
    }
  }
`;

// 当用户点击 "Checkout" 按钮时触发：
// 1. 将购物车里的商品 ID 和数量传入 mutation
// 2. 拿到 webUrl
// 3. window.location.href = webUrl; (跳转去付款)

常见误区与处理方法

误区一：盲目上马 Headless，导致运营团队彻底瘫痪

老板听信了技术外包的忽悠，花了 5 万美金做了一套 Headless 网站。结果上线后发现：运营人员再也无法使用 Shopify 后台的主题编辑器（Theme Editor）了！ 想换一张首页 Banner 图、改一个按钮颜色，都必须提需求给程序员改代码重新部署。

规避方法：如果你的团队没有全职的 React/Next.js 工程师，绝对不要碰 Headless！ 如果非要做，必须同时引入 Sanity 或 Builder.io 等 Headless CMS（内容管理系统），把前端的图片、文案配置权重新交还给运营团队。

误区二：Shopify App Store 里的插件全部失效

做完 Headless 后，你发现之前在 Shopify 后台买的商品评论插件（Loox）、倒计时插件、弹窗插件全部不工作了。因为这些插件是基于 Liquid 注入代码的，现在前端没有 Liquid 了。

规避方法：在决定做 Headless 之前，必须盘点你当前依赖的所有第三方 App。只有提供完整 REST/GraphQL API 的 App，才能在 Headless 架构下继续使用。 比如评论系统必须换成支持 API 调用的 Yotpo 或 Okendo，并且需要前端工程师重新写一遍 UI 组件来渲染这些评论数据。开发成本极高，入坑需谨慎。

常见问题

修改无头电商 (Headless) 架构解析与 Ne前要不要备份主题？

要。主题开发、Liquid、API 或性能优化都建议先复制主题或使用 Git 分支，改完后再检查首页、产品页、购物车和结账路径。

没有开发经验可以照着做吗？

可以先做低风险配置和页面检查；涉及代码、API、Webhook 或结账逻辑时，建议先在测试主题或测试店铺验证，再同步到线上主题。

无头电商 (Headless) 架构解析与 Ne应该先看哪个核心指标？

先看能直接影响决策的指标，不要只看曝光或访问量。新手可以把转化率、获客成本、客单价、复购或退款情况放在同一张表里，每周复盘一次。

做无头电商 (Headless) 架构解析与 Ne前需要准备什么？

先确认目标、当前数据、页面或后台路径，再准备一份改动记录。这样出现波动时能追溯原因，也方便后续把有效动作沉淀成 SOP。

无头电商 (Headless) 架构解析与 Ne多久复盘一次比较合适？

运营类动作建议每周小复盘、每月大复盘；广告或转化测试不要因为单日波动频繁改动，至少等到有足够样本后再判断。

新手最容易踩的坑是什么？

最常见的问题是同时改太多变量，最后不知道是哪一步带来结果。每次只改一个关键点，保留截图、数据和发布时间，后续才有可复用的经验。

下一步阅读

• Shopify 增长内容
• 商品页与转化检查
• 独立站诊断