Shopify 主题

Shopify 主题控制在线商店的外观和布局，基于 Liquid 模板和 JSON 配置构建

#type / concept #status / growing #tech / dev #resource / shopify

[!info] related notes

所属 MOC: Shopify MOC

前置概念: Shopify, Liquid 模板引擎

对比路径: Shopify 主题开发 vs 应用开发

实践指南: Shopify 主题开发快速开始

性能优化: Shopify 商店性能优化

Shopify 主题

一句话定义

Shopify 主题控制在线商店的外观和布局，基于 Liquid 模板、HTML、CSS、JavaScript 和 JSON 配置构建，决定了客户看到的所有视觉元素和交互体验。

核心机制 / 工作原理

1. 主题的本质：前端代码包

主题是一个代码包（Theme Bundle），包含：

my-theme/
├── layout/          // 布局文件（页面骨架）
├── templates/       // 页面模板（首页、产品页等）
├── sections/        // 可复用区块（头部、底部、产品卡片）
├── snippets/        // 代码片段（小组件）
├── assets/          // 静态资源（CSS、JS、图片、字体）
├── config/          // 主题配置（settings_schema.json）
└── locales/         // 多语言翻译文件

工作流程：

用户访问 example.myshopify.com/products/t-shirt
        ↓
Shopify 服务器接收请求
        ↓
查找 templates/product.liquid
        ↓
使用 layout/theme.liquid 作为页面骨架
        ↓
渲染 sections/product-template.liquid
        ↓
插入 Liquid 变量（product.title、product.price）
        ↓
输出最终 HTML
        ↓
浏览器显示页面

2. Shopify 2.0 主题架构

核心创新：将数据（JSON）与展示（Liquid）分离

Shopify 1.0（旧架构）

<!-- templates/product.liquid -->
<div class="product">
  <h1>{{ product.title }}</h1>
  <img src="{{ product.image | img_url: 'large' }}">
  <!-- 所有 HTML 和逻辑写在一个文件 -->
</div>

问题：商家无法在后台可视化编辑布局

Shopify 2.0（新架构）

// templates/product.json
{
  "sections": {
    "main": {
      "type": "product-template",
      "settings": {
        "show_vendor": true,
        "show_reviews": true
      }
    },
    "related": {
      "type": "related-products"
    }
  },
  "order": ["main", "related"]
}

<!-- sections/product-template.liquid -->
<div class="product">
  <h1>{{ product.title }}</h1>
  {% if section.settings.show_vendor %}
    <p>{{ product.vendor }}</p>
  {% endif %}
  <!-- 商家可以在后台开关 show_vendor -->
</div>

优势：

商家可以在后台拖拽区块（Sections）
可以调整设置（开关、颜色选择器、文本输入）
无需编辑代码

3. 主题的三层结构

层级 1：Layout（布局）

职责：整个页面的骨架（<html>, <head>, <body>）

<!-- layout/theme.liquid -->
<!DOCTYPE html>
<html lang="{{ request.locale.iso_code }}">
<head>
  <meta charset="utf-8">
  <title>{{ page_title }} - {{ shop.name }}</title>
  {{ content_for_header }}  // Shopify 必需的标签
  {{ 'theme.css' | asset_url | stylesheet_tag }}
</head>
<body>
  {% section 'header' %}
  <main>
    {{ content_for_layout }}  // 插入页面内容
  </main>
  {% section 'footer' %}
  {{ 'theme.js' | asset_url | script_tag }}
</body>
</html>

通常只有 1 个 layout 文件（除非需要特殊布局，如 checkout）

层级 2：Templates（模板）

职责：定义不同类型页面的内容区域

templates/
├── index.json           // 首页
├── product.json         // 产品页
├── collection.json      // 集合页
├── cart.json            // 购物车页
├── page.json            // 普通页面
└── 404.json             // 404 页面

特点：

JSON 文件定义使用哪些 Sections
Shopify 根据 URL 自动选择模板
- /products/t-shirt → product.json
- /collections/new-arrivals → collection.json

层级 3：Sections（区块）

职责：可复用的内容区块

<!-- sections/product-template.liquid -->
{% schema %}
{
  "name": "Product Template",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "default": true
    }
  ]
}
{% endschema %}

<div class="product">
  <h1>{{ product.title }}</h1>
  {% if section.settings.show_vendor %}
    <p>{{ product.vendor }}</p>
  {% endif %}
</div>

特点：

每个 Section 有自己的 {% schema %} 定义配置
商家可以在后台调整设置
Sections 可以包含 Blocks（更小的可拖拽单元）

4. Sections 和 Blocks

Sections = 大区块，例如：

头部导航
产品详情
相关产品推荐
底部信息

Blocks = 小组件，例如：

产品标题
产品图片
添加到购物车按钮
产品描述

商家可以：

拖拽 Sections 调整顺序
在 Section 内拖拽 Blocks 调整顺序
开关某个 Block 的显示

示例：

<!-- sections/product-template.liquid -->
{% for block in section.blocks %}
  {% case block.type %}
    {% when 'title' %}
      <h1>{{ product.title }}</h1>
    
    {% when 'price' %}
      <p class="price">{{ product.price | money }}</p>
    
    {% when 'add_to_cart' %}
      <button type="submit">Add to Cart</button>
  {% endcase %}
{% endfor %}

{% schema %}
{
  "name": "Product Template",
  "blocks": [
    {
      "type": "title",
      "name": "Product Title"
    },
    {
      "type": "price",
      "name": "Product Price"
    },
    {
      "type": "add_to_cart",
      "name": "Add to Cart Button"
    }
  ]
}
{% endschema %}

商家可以在后台拖拽调整 title、price、add_to_cart 的顺序

最小例子 / 最小场景

场景：创建一个最简单的主题

1. layout/theme.liquid

<!DOCTYPE html>
<html>
<head>
  <title>{{ shop.name }}</title>
  {{ content_for_header }}
</head>
<body>
  {{ content_for_layout }}
</body>
</html>

2. templates/index.liquid

<h1>Welcome to {{ shop.name }}</h1>
<p>This is the homepage.</p>

就这样！ 这是一个功能完整的主题（虽然非常简单）

场景：添加产品列表

templates/collection.liquid

<h1>{{ collection.title }}</h1>

<div class="product-grid">
  {% for product in collection.products %}
    <div class="product-card">
      <a href="{{ product.url }}">
        <img src="{{ product.featured_image | img_url: 'medium' }}" 
             alt="{{ product.title }}">
        <h3>{{ product.title }}</h3>
        <p>{{ product.price | money }}</p>
      </a>
    </div>
  {% endfor %}
</div>

边界与易混淆点

1. 主题 ≠ 网站

主题：前端代码包，控制外观和布局网站：主题 + Shopify 后台数据（产品、订单、客户）

类比：

主题 = WordPress 的皮肤
Shopify 后台 = WordPress 的管理面板

2. 主题开发 ≠ Web 开发

相似点：

HTML、CSS、JavaScript

不同点：

不需要配置服务器或数据库
使用 Liquid 模板语言而非 PHP/Node.js
数据通过 Shopify 对象访问，无需写 SQL

适合人群：前端开发者，无需后端经验

3. 免费主题 vs 付费主题

维度	免费主题	付费主题
价格	$0	$150-$350
功能	基础功能	更多定制选项
设计	简洁	更精美、更多变化
支持	社区论坛	开发者支持

何时用免费主题：

刚起步，预算有限
产品简单，无需复杂功能

何时用付费主题：

需要独特的品牌体验
需要高级功能（产品快速查看、高级过滤）

4. 主题定制 vs 自定义主题

主题定制（Theme Customization）：

在现有主题基础上调整
修改颜色、字体、布局
通过后台设置或少量代码

自定义主题（Custom Theme）：

从零开发
完全控制每个细节
需要雇佣开发者，成本 $5,000-$50,000+

大多数商家：使用付费主题 + 定制即可

5. 主题 vs 应用

维度	主题	应用
控制内容	店铺外观	后台功能
技术栈	Liquid + HTML/CSS/JS	任意后端语言 + API
安装方式	上传到 Shopify	从 App Store 安装
运行位置	Shopify 服务器	自己的服务器
收益模式	一次性购买	订阅收费

详见：Shopify 主题开发 vs 应用开发

主题的生命周期

1. 开发

使用 Shopify CLI 创建开发环境
在本地编辑 Liquid、CSS、JS
实时预览（热重载）

2. 测试

在开发商店测试
检查不同设备（桌面、平板、手机）
测试结账流程

3. 上传

通过 Shopify CLI 上传到商店
或打包为 .zip 文件手动上传

4. 发布

在 Shopify 后台选择”发布”
主题立即生效

5. 维护

修复 bug
添加新功能
适配 Shopify 新特性

Dawn 主题（官方参考主题）

Dawn 是 Shopify 官方的免费主题，代表了最佳实践：

Shopify 2.0 架构
性能优化（懒加载、图片优化）
可访问性（WCAG 2.1 AA 标准）
响应式设计
开源（GitHub 上可查看源码）

学习建议：研究 Dawn 的代码，理解 Shopify 主题的标准写法

主题开发工具

1. Shopify CLI

shopify theme dev         # 启动本地开发服务器
shopify theme push        # 上传主题到 Shopify
shopify theme pull        # 从 Shopify 下载主题

2. Theme Kit（旧工具，仍可用）

theme watch               # 监听文件变化，自动上传
theme deploy              # 部署主题

3. 在线代码编辑器

Shopify 后台提供在线编辑器：

适合快速修改
不推荐大规模开发（无版本控制）

学习路径

基础：学习 HTML、CSS、JavaScript
Liquid：Liquid 模板引擎
实践：Shopify 主题开发快速开始
优化：Shopify 商店性能优化
排障：Liquid 模板常见错误排查

Shopify 主题

一句话定义

核心机制 / 工作原理

1. 主题的本质：前端代码包

2. Shopify 2.0 主题架构

Shopify 1.0（旧架构）

Shopify 2.0（新架构）

3. 主题的三层结构

层级 1：Layout（布局）

层级 2：Templates（模板）

层级 3：Sections（区块）

4. Sections 和 Blocks

最小例子 / 最小场景

场景：创建一个最简单的主题

场景：添加产品列表

边界与易混淆点

1. 主题 ≠ 网站

2. 主题开发 ≠ Web 开发

3. 免费主题 vs 付费主题

4. 主题定制 vs 自定义主题

5. 主题 vs 应用

主题的生命周期

1. 开发

2. 测试

3. 上传

4. 发布

5. 维护

Dawn 主题（官方参考主题）

主题开发工具

1. Shopify CLI

2. Theme Kit（旧工具，仍可用）

3. 在线代码编辑器

学习路径

Related notes