一、Headless 架构
App 安装路径：https://apps.shopify.com/headless
提供了 Shopify Storefront API 以及 Customer Account API，具体参照店面后台
1. ✅ 优势
a. 可自由选择技术栈
-
React（如 Next.js / Remix）+ Shopify Storefront API + Customer Account API
-
Vue（如 Nuxt.js）+ Shopify Storefront API + Customer Account API
b. 支持任意 CMS 集成
-
Contentful / Sanity / Strapi / Notion 等
c. 灵活扩展
-
可添加搜索、A/B 测试、会员系统、自定义路由等功能
2. ❌ 劣势
a. 开发和维护成本高
b. 需要 DevOps 资源处理部署、CDN、缓存等问题
-
网站体量大，运维是一个较大的挑战
c. 所有页面结构与内容需通过代码来控制和维护
d. 不支持 Shopify App 接入
二、Hydrogen 框架
App 安装路径：https://apps.shopify.com/Hydrogen
Shopify 提供的 Headless 框架，也就是 Shopify 内部团队基于 Headless 架构二次开发了 Hydrogen 框架，内部已封装众多组件可提供给开发者使用。
1. ✅ 优势
a. Oxygen 托管支持边缘网络优化
-
Shopify 提供的部署平台，优化全球访问速度
b. 开发效率高
-
深度集成 Shopify 的 Storefront API、Cart API 等等
-
内置组件库（如购物车、商品卡片、SEO 组件）可直接使用
c. 内置优化
-
代码分割、图片懒加载、Streaming SSR 等等，已做出了处理
d. 主题之外的高度定制能力
-
不受 Liquid 限制，自定义页面结构和交互行为
2. ❌ 劣势
a. 文件大小有限制
-
Oxygen 对部署的 bundle size 有控制（必须小于或等于 10 MB）
-
静态资产，单个最大文件大小：
-
图片：20 MB
-
视频：1 GB
-
3D 模型：500 MB
-
其他文件：20 MB
-
b. 不支持 Shopify App 接入
三、Theme
传统 Shopify 模板
1. ✅ 优势
a. 无需开发即可上线
b. 开发难度较低
c. 所有内容可通过后台编辑
d. 对非技术人员比较友好
e. 支持 Shopify App 接入
f. 成熟的主题市场
2. ❌ 劣势
a. 复杂 UI 或高度交互定制开发会比较困难
b. 性能、体验一般情况下会不如现代前端框架的好
c. URL、路由和逻辑会受到一定程度的限制
-
Shopify Theme 支持的 URL 结构为固定结构不可自定义，例如：政策页面 URL 结构为【域名 /polices/ 页面 handle】、系列页 URL 结构为【域名 /collections/ 页面 handle】、产品详情页 URL 结构为【域名 /products/ 页面 handle】、普通页面 URL 结构为【域名 /pages/ 页面 handle】、 博客页 URL 结构为【域名 /blogs/ 页面 handle】）
四、总结
1. Headless & Hydrogen
-
✅ 可以自定义 URL 的结构
-
✅ 前端高度自由，完全自定义页面和交互，适合需要高度定制的 UI/UX、自定义工作流、购物体验或个性化内容分发的场景
-
✅ 性能优异（可使用 SSR 框架优化技术）
-
✅ 技术栈灵活，使用现代流行的技术栈来进行开发，适合现代前端开发
-
❌ 不支持通过 Shopify 后台可视化修改界面内容 (Shopify Theme 可以通过 Shopify 提供的主题编辑器实现界面内容修改，Headless & Hydrogen 需要借助 CMS 实现内容管理)
-
❌ 不支持 Shopify App 接入