从 0 搭建 Shopify 前端环境，跑通第一个在线商店
本篇是「Shopify 前端实战系列」的第 1 章，主要帮助你完成开发环境搭建、了解前端架构，并跑通第一个 Shopify 主题 Demo。
源码示例仓库 👉 GitHub · ebinfeng/shopify-demo · course-001
前言：为什么要学习 Shopify 前端开发
在过去两年里，Shopify 已成为全球跨境电商的核心平台之一。
相比传统的 Web 开发，Shopify 的前端体系有三个显著特点：
- 模板驱动 —— 使用 Liquid 模板语言快速构建电商页面
- 云端托管 —— 无需服务器部署即可在线发布
- 可扩展性强 —— 可通过 App Extension 与 Hydrogen 构建复杂场景
无论你是前端开发者、独立站团队，还是跨境 SaaS 工程师，掌握 Shopify 的前端开发能力，意味着你能为全球数百万商家提供主题定制、组件开发和前端服务。
一、Shopify 前端架构概览
Shopify 的前端体系主要由三部分构成：
- Theme（主题层） ：负责店铺 UI、模板与页面结构。
- App Extension（应用扩展层） ：通过扩展注入组件，增强店铺功能。
- Hydrogen（前端框架层） ：React 架构的独立 Storefront，用于自建站点。
二、开发环境准备
1. 注册开发者账号
前往 Shopify Partners 注册开发者账号，并创建一个 Development Store（开发商店）。
该商店允许你免费测试和部署主题，无需开店费用。
2. 安装开发工具
首先确保你已安装 Node.js（建议版本 18+）：
node -v
然后安装 Shopify CLI（命令行工具）：
npm install -g @shopify/cli@latest
3. 登录开发环境
登录你的开发商店：
shopify login --store your-dev-store.myshopify.com
登录成功后，你即可通过命令创建和预览主题。
三、创建并运行第一个 Shopify 主题
在本地新建一个项目文件夹：
shopify theme init my-first-theme
cd my-first-theme
接着运行本地调试命令：
shopify theme dev
命令执行成功后，你会看到如下提示：
✔ Previewing your theme:
→ http://127.0.0.1:9292
→ https://your-dev-store.myshopify.com?preview_theme_id=123456
打开浏览器访问地址，即可看到默认主题的在线预览。
恭喜 🎉 —— 你已经成功跑通了第一个 Shopify 主题！
四、认识 Shopify Theme 项目结构
创建好的主题目录大致如下：
/layout
└── theme.liquid
/templates
└── index.json
/sections
└── header.liquid
/snippets
└── footer.liquid
/assets
└── main.css
- layout：整体页面框架文件
- templates：页面模板定义（支持 JSON 配置）
- sections：页面可配置模块（核心部分）
- snippets：小型可复用代码片段
- assets：静态资源，如 JS、CSS、图片
Shopify 的主题开发以「模块化」为核心，通过 JSON + Liquid 实现灵活配置。
五、Liquid 模板快速入门
Liquid 是 Shopify 的模板语言，用于从数据层渲染页面。
我们可以在 /sections/header.liquid 中添加以下代码：
<header class="site-header">
<h1>{{ shop.name }}</h1>
<p>欢迎光临 {{ shop.name }} 的在线商店！</p>
</header>
{{ shop.name }}：获取当前店铺名称{{ ... }}：输出变量{% if %}、{% for %}：控制逻辑
这是 Shopify Theme 的最小单元：模板 + 数据渲染。
六、创建第一个自定义区块（Banner Section）
现在我们来创建一个可配置的区块。
在 /sections 目录下新建 banner.liquid：
{% schema %}
{
"name": "Banner 区块",
"settings": [
{ "type": "text", "id": "title", "label": "标题" },
{ "type": "image_picker", "id": "bg_image", "label": "背景图" }
]
}
{% endschema %}
<section class="banner" style="background-image:url({{ section.settings.bg_image | img_url: 'master' }})">
<h2>test banner</h2>
<p>this is a test banner</p>
</section>
然后在 templates/index.json 中注册该区块：
{
"sections": {
"banner": { "type": "banner", "settings": { "title": "欢迎来到我的商店" } }
},
"order": ["banner"]
}
保存后刷新浏览器，你将看到一个可编辑的 Banner 区块。
它可以在后台的 “自定义主题（Customize Theme）” 界面中自由配置标题与图片。
七、部署主题到商店
开发完成后，可使用以下命令将主题上传至商店：
shopify theme push
发布完成后，即可在 Shopify 管理后台 → 在线商店 → 主题 中查看并启用。
八、小结与进阶方向
至此，你已完成 Shopify 前端开发的入门阶段 🎉 本章重点收获包括：
- 了解 Shopify 前端三层架构
- 完成本地环境搭建与主题预览
- 掌握 Liquid 模板基础语法
- 学会创建并注册可配置 Section
下一章节（S02）我们将进入 Theme 实战进阶：
学习更多实践技术例如SON 模板结构、可视化配置机制、多语言适配与动态数据渲染。
📦 附录
- 课程源码仓库：
👉 github.com/ebinfeng/sh… - 推荐工具：
-
- VS Code + Shopify Liquid 插件
- Node.js v18+
- Shopify CLI 官方文档：shopify.dev/docs/themes…
- 推荐阅读：
-
- Shopify Theme 开发入门指南
- Liquid 模板语言文档
