介绍

S**hopify Liquid**(主题开发)

Liquid 是 Shopify 主题开发专用的模板语言,由 Shopify 开发并开源。它用于动态加载和显示数据,帮助开发者灵活定制电商店铺的前端界面。Liquid 代码直接写在 Shopify 主题文件(比如 .liquid 文件)里,结合 HTML、CSS 和 JavaScript,控制页面的内容和展示方式。

Shopify Liquid和Headless建站方式对比 - 图1

Headless(无头**开发)**

Headless 网站将 前端和后端分离,前端 UI 和后端数据库独立运行,通过 API 进行数据交互。这种架构使得开发者可以使用任何前端技术栈来构建 UI,例如 React、Vue、Angular 等,而无需受限于后端平台。

Shopify Liquid和Headless建站方式对比 - 图2

Storefront API: 允许开发者通过 Storefront API reference 访问 Shopify 商店的数据,例如产品、订单、客户等,并将其整合到任何前端应用中。 Hydrogen 框架: 一个基于 React 的框架,可以帮助开发者快速构建 Shopify Headless 店面。Hydrogen 提供了许多预先构建的组件和工具,简化了开发流程,并提升了网站性能。

Headed vs Headless 建站**各个维度的对比表格:**

对比维度 headed 有头网站 Headless 无头网站
架构 前后端紧密耦合 前后端分离
灵活性 有限
性能 可能较慢 较快
扩展性 有限
开发成本 较低 较高
SEO 可能更容易 可能更复杂
安全性 可能更容易受到攻击 安全性更高
适用场景 简单的网站和应用 复杂的网站和多平台应用

具体分析

一、**Headless**

App安装路径:

Headless - Build headless commerce with Shopify’s Storefront API | Shopify App Store

提供了Shopify Storefront API以及Customer Account API,具体参照店面后台

** 优势**

1.** **可自由选择技术栈

React(如 Next.js / Remix)+ Shopify Storefront API + Customer Account API Vue(如 Nuxt.js)+ Shopify Storefront API + Customer Account API 支持任意 CMS 集成 Contentful / Sanity / Strapi / Notion 等 灵活扩展 可添加搜索、A/B 测试、会员系统、自定义路由等功能

2.** **可使用Shopify提供的Hydrogen

Oxygen runtime 托管支持边缘网络优化

Shopify 提供的部署平台,优化全球访问速度 开发效率高(深度集成 Shopify 的 Storefront API、Cart API等等 代码分割、图片懒加载、Streaming SSR等等,已做出了处理

** 劣势**

1.** **开发和维护成本高

2.** **需要 DevOps 资源处理部署、CDN、缓存等问题

网站体量大,运维是一个较大的挑战

3.** **所有页面结构与内容需通过代码来控制和维护

4.** 不支持Shopify App插件接入和使用**

5.** **使用Hydrogen框架会有大小限制

Oxygen 对部署的 bundle size 有控制(必须小于或等于 10 MB) 静态资产,单个最大文件大小 图片:20 MB 视频:1 GB 3D模型:500 MB 其他文件:20 MB

二、Theme

传统 Shopify 主题

** 优势**

1.** **无需开发即可上线

2.** **开发难度较低

3.** **所有内容可通过后台编辑

4.** **对非技术人员比较友好

5.** **支持Shopify App接入

6.** **成熟的主题市场

** 劣势**

1.** **复杂UI或高度交互定制开发会比较困难

2.** **性能、体验一般情况下会不如现代前端框架的好

3.** **URL、路由和逻辑会受到一定程度的限制

Shopify Theme支持的URL结构为固定结构不可自定义,例如:政策页面URL结构为【域名/polices/页面handle】、系列页URL结构为【域名/collections/页面handle】、产品详情页URL结构为【域名/products/页面handle】、普通页面URL结构为【域名/pages/页面handle】、 博客页URL结构为【域名/blogs/页面handle】)

总结

Headless & Hydrogen

可以自定义 URL 的结构 前端高度自由,完全自定义页面和交互,适合需要高度定制的UI/UX、自定义工作流、购物体验或个性化内容分发的场景 性能优异(可使用 SSR框架优化技术) 技术栈灵活,使用现代流行的技术栈来进行开发,适合现代前端开发 不支持通过 Shopify 后台可视化修改界面内容( Shopify Theme可以通过Shopify提供的主题编辑器实现界面内容修改,Headless & Hydrogen需要借助CMS实现内容管理) 不支持Shopify App接入

Headless、Hydrogen、Theme

方案 类型 开发成本 前后端分离 技术栈 URL 可控 可视化编辑 性能表现 自定义程度 Shopify App
Theme 耦合架构 Liquid + Shopify 受限 支持 一般
Hydrogen Headless+ React + Vite 不支持 优秀
Headless 解耦架构 最高 可以自由选择(React/Vue 等) 不支持 取决于实现 最高