shopify前端开发

摘要：

Shopify 前端分3 大主流开发体系：Online Store2.0 主题开发（Liquid）、Theme App Extension 插件前端、Hydrogen 无头 React 独立站，是跨境独立站主流前端岗位技术栈。

一、1. 主题开发（最常用、入门首选｜Online Store 2.0）

核心技术栈

Liquid 模板语言 + HTML/CSS/JS+JSON Schema，基于官方默认 Dawn 主题二次开发，商家后台可视化拖拽编辑。

目录规范（固定结构）

bash 复制代码

├─ layout/       # 全局布局(theme.liquid整站骨架)
├─ templates/    # 页面模板 index(首页)、product(商品页)、cart(购物车)
├─ sections/     # 可拖拽可视化区块（轮播、商品栏，核心！配schema）
├─ snippets/     # 复用小组件(价格、按钮、弹窗) {% render 'xxx' %}
├─ assets/       # css/js/图片，自动上传Shopify CDN
└─ config/settings_schema.json # 全局主题配置

Liquid 关键语法：

1. 变量渲染： {{ product.title }}

2. 循环： {% for item in collection.products %}

3. 判断： {% if product.available %}

4. Schema（Online Store2.0 精髓）： 在 sections 内定义配置项，商家后台可视化填参数

bash 复制代码

{% schema %}
{
  "name":"首页轮播",
  "settings":[{"type":"image_picker","id":"banner_img","label":"轮播图"}]
}
{% endschema %}

本地开发工具：Shopify CLI（3.x）

bash 复制代码

# 初始化、本地热调试
shopify theme init
shopify theme dev --store 店铺域名.myshopify.com
# 上传发布主题
shopify theme push

样式常用：Tailwind CSS、SCSS，JS 原生 / AlpineJS，不建议重型框架。

二、2. Theme App Extension（应用插件前端｜对接 Shopify App）

做 Shopify 插件的前端方案，无需改商家主题代码，区块自动注入店铺页面，商家在主题编辑器一键添加组件（商品评价、弹窗、营销挂件）。

目录结构（依附 App 项目）

bash 复制代码

extensions/xxx-extension/
├─ blocks/       # app-block（可拖拽区块）、app-embed(全局注入脚本)
├─ assets/       # 插件css/js
└─ extension.config.yml # 扩展配置

App Block：和 section 用法一致，带 schema，可视化拖拽到页面任意位置
App Embed：全站注入 JS/CSS（如全局弹窗、埋点、购物车修改）

配套后台前端：Polaris+App Bridge

插件内嵌在 Shopify 商家后台，管理面板使用 Polaris（Shopify 官方 React 组件库），App Bridge 实现 App 与 Shopify 跨域通信。

三、3. Hydrogen+Oxygen｜无头 Headless 前端（高阶 React 独立站）

脱离 Shopify 原生主题，全自定义前端页面，React+Remix 架构，通过 Storefront GraphQL API 拉取 Shopify 商品 / 订单 / 购物车数据，适合重度定制品牌独立站。

技术组成

Hydrogen：基于 Remix (React Router) 的官方无头前端框架，内置 Shopify 请求 hooks、商品 /
购物车组件
Oxygen：Shopify 官方边缘云托管，一键部署 Hydrogen 项目，全球 CDN 加速（免费）

快速创建项目

bash 复制代码

# 全局安装CLI
npm i -g @shopify/cli
# 新建Hydrogen项目
npm create @shopify/hydrogen@latest my-shop
# 本地启动
npm run dev
# 部署Oxygen
npx shopify hydrogen deploy

环境配置.env（对接店铺）

bash 复制代码

PUBLIC_STORE_DOMAIN=xxx.myshopify.com
PUBLIC_STOREFRONT_API_TOKEN=前台API密钥

优势：完全自定义 UI、SEO 可控；缺点：成本高，原生 Shopify App 无法自动接入，需 API 对接。

四、必备 API（前端数据来源）

Storefront API(GraphQL)：面向买家，商品 / 分类 / 购物车 / 结账查询（主题、Hydrogen 通用）
Admin API(GraphQL/REST)：面向商家后台，订单 / 库存 / 商品管理（App 后端使用）

五、三条路线选型建议

中小定制 / 改模板：Liquid 主题开发（成本最低、最快落地）
开发上架 Shopify 插件：Theme App Extension+Polaris
品牌重度定制独立站：Hydrogen 无头 React