原理

Shopify 的 Theme 本质上就是一个模板渲染引擎：

• 用 Liquid 语法 + JSON 配置，定义前端布局和交互
• 最后渲染出来的页面，会去调用 Shopify 后台的内容（产品、集合、库存、订单数据）

Theme 和 Content 的区别

1. Theme 层（结构与样式）
   • 文件：.liquid, .json, .css, .js, assets
   • 定义页面框架：header, footer, product page, cart page, section layout 等
   • 不包含你的真实业务数据，只是“壳子”
2. Content 层（业务数据）
   • 产品（title, description, price, SKU, 图片）
   • 集合、博客文章、页面内容
   • 顾客数据、订单数据（存在 Shopify 数据库里）
   • 这些不在主题代码里，GitHub 也不会触及

Shopify 主题结构

主要目录说明：

• /layout/ → theme.liquid 是核心入口（类似 Next.js _app.tsx）。
• /templates/ → 每个页面的结构（product.liquid, collection.liquid, etc.）。
• /sections/ → 页面可配置模块（比如 hero banner, product grid），Shopify Admin 编辑页面时看到的都是这里。
• /snippets/ → 可复用小组件（header 部分、卡片、按钮）。
• /assets/ → CSS、JS、图片文件。
• /config/ → settings_schema.json 定义了后台可以配置的选项。

开发环境建议

• 装 Shopify CLI（npm install -g @shopify/cli）。
  • 可以本地预览 shopify theme dev。
  • 支持 push/pull 主题代码到店铺。
• 用 Git 管理，分支开发，避免直接在后台改坏主题。