Shopify 主题开发专业版

端到端的Shopify主题开发、部署和设计系统管理。涵盖Liquid模板语言、Online Store 2.0架构、性能优化、部署工作流和CSS设计系统。

使用场景

在以下情况应用此技能：

- 构建新的Shopify主题或主题区块
编写或重构Liquid模板
实现主题自定义功能
将主题更改部署到开发或正式商店
优化主题性能（速度、可访问性、SEO）
创建或维护Shopify的CSS设计系统
审查主题代码的质量和标准
将主题迁移到Online Store 2.0
使用Shopify CLI（开发、推送、拉取）

快速开始

本地开发

启动带有热重载的本地开发服务器：

bash
shopify theme dev --store=your-store.myshopify.com

访问 http://localhost:9292 实时预览更改。

部署到商店

将本地更改推送到主题：

bash
shopify theme push --theme

完整的预检清单和部署工作流请参见 references/deployment.md。

创建新区块

生成区块脚手架：

bash
mkdir -p sections
touch sections/my-section.liquid

常见的区块模式和架构请参见 references/liquid-patterns.md。

核心概念

主题架构

目录结构：

theme/
├── assets/ # CSS、JavaScript、图片
├── config/ # 主题设置（settingsschema.json、settingsdata.json）
├── layout/ # 模板包装器（theme.liquid 必需）
├── sections/ # 可重用、可自定义的内容模块
├── snippets/ # 可重用的代码片段
├── templates/ # 页面类型模板（JSON或Liquid）
└── locales/ # 翻译文件（en.default.json等）

关键原则：

- 区块是商家可自定义的模块（可包含块）
代码片段是可重用的代码片段（不可直接自定义）
模板包装区块并定义页面布局
布局提供重复元素（页眉、页脚、脚本）
Online Store 2.0 使用JSON模板包装区块（推荐）

Online Store 2.0 架构

✅ 应做：

- 使用JSON模板（允许在任何页面上使用区块）
设计支持应用块集成
通过设置架构启用商家自定义
允许区块重新排序和切换

❌ 不应做：

- 将区块锁定到特定模板
硬编码应可编辑的内容
在新主题中使用传统的纯Liquid模板

JSON模板示例：
json
{
sections: {
header: {
type: header
},
main: {
type: main-product
}
},
order: [header, main]
}

Liquid 模板基础

基本语法：
liquid
{%- # 输出变量 -%}
{{ product.title }}
{{ product.price | money }}

{%- # 控制流 -%}
{% if product.available %}

{% else %}
已售罄
{% endif %}

{%- # 循环 -%}
{% for variant in product.variants limit: 10 %}
{{ variant.title }}: {{ variant.price | money }}
{% endfor %}

{%- # 过滤器链（从左到右处理） -%}
{{ product.description | strip_html | truncate: 150 | upcase }}

性能提示：

- 使用 {%- -%} 去除空白，减少HTML大小
高效链式使用过滤器
尽可能限制循环（{% for item in array limit: 10 %}）
对嵌套逻辑块使用 liquid 标签

高级模式请参见 references/liquid-patterns.md。

开发工作流

1. 设置

从模板初始化新主题：

bash
shopify theme init

或克隆现有主题：

bash
shopify theme pull --theme

2. 本地开发

运行开发服务器：

bash
shopify theme dev --store=your-store.myshopify.com

更改会自动同步到开发主题并重新加载浏览器。

3. 质量检查

运行主题检查工具：

bash
shopify theme check

在部署前修复所有错误或警告。

4. 部署

完整的部署工作流请参见 references/deployment.md。关键步骤：

- 预检检查（目标主题、凭据、git状态）
工件扫描（调试代码、待办事项、localhost URL）
推送到商店
推送后验证

bash
shopify theme push --theme

重要： 未经 --allow-live 标志和明确确认，切勿推送到正式主题。

5. 发布

将主题提升为正式版本：

bash
shopify theme publish --theme

性能优化

详细的优化策略请参见 references/performance.md。

快速见效：

- 最小化JavaScript使用（优先使用原生浏览器功能）
图片懒加载（loading=lazy）
延迟非关键CSS
使用响应式图片（srcset）
压缩资源（压缩CSS/JS、优化图片）
实现资源提示（preload、dns-prefetch）
在真实移动设备和慢速连接上测试

避免：

- 中的同步脚本
为简单交互使用重型JavaScript库
未压缩的图片
阻塞渲染的CSS

可访问性标准

从基础构建可访问性：

- 使用语义化HTML元素
在需要时提供ARIA标签和角色
确保键盘导航正常工作
保持足够的颜色对比度（WCAG AA最低标准）
使用屏幕阅读器测试（VoiceOver、NVDA）
支持减少动画偏好

示例：
liquid
type=button
aria-label={{ cart.addtocart | t }}
aria-describedby=variant-{{ variant.id }}

{{ cart.add | t }}

设计系统管理

构建和维护CSS设计系统请参见 references/design-system.md。

关键组件：

- 品牌颜色（主色、辅色、强调色、中性色阶）
排版比例（标题、正文、标签）
间距系统（4px或8px基础单位）
组件库（按钮、卡片、网格、表单）
响应式断点
CSS自定义属性（变量）

方法：

- 在 assets/variables.css 或 config/settings_schema.json 中定义设计令牌
构建可重用的组件类
在 references/design-system.md 中记录组件用法
通过主题设置保持组件的商家可自定义性

商家自定义

使商家无需代码即可自定义主题：

主题设置（config/settings_schema.json）：
json
{
name: 颜色,
settings: [
{
type: color,
id: color_primary,
label: 主色,
default: #000000
},
{
type: font_picker,
id: font_heading,
label: 标题字体,
default: helvetica_n4
}
]
}

区块设置：
liquid
{% schema %}
{
name: 精选系列,
settings: [
{
type: collection,
id: collection,
label: 系列
},
{
type: range,
id: productstoshow,
min: 2,
max: 12,
step: 1,
default: 4,
label: 显示产品数
}
],
blocks: [
{
type: heading,
name: 标题,
settings: [
{
type: text,
id: heading,
label: 标题
}
]
}
],
presets: [
{
name: 精选系列
}
]
}
{% endschema %}

Shopify CLI 参考

开发：

- shopify theme init — 从模板创建新主题
shopify theme dev — 带热重载的本地开发服务器
shopify theme list — 列出商店上的所有主题
shopify theme open — 在Shopify管理后台中打开主题

部署：

- shopify theme push — 将本地更改推送到商店
shopify theme

Shopify主题开发