[!info] related notes

• 相关 MOC: 前端工程化 MOC
• 相关资源: storybook

Shopify MOC

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

这张地图覆盖什么

本地图涵盖 Shopify 电商平台的完整开发知识体系，包括：

• 平台基础：Shopify 平台架构、核心功能、设计哲学
• 主题开发：使用 Liquid 模板引擎构建自定义店铺前端
• 应用开发：通过 GraphQL/REST API 扩展平台能力
• 业务流程：结账、支付、订单履约等电商核心环节
• 性能优化：提升店铺速度、改善用户体验
• 问题排查：常见错误与解决方案

适合谁：

• 想要了解 Shopify 平台的开发者
• 计划开发 Shopify 主题或应用的前端/全栈工程师
• 需要集成 Shopify 的产品经理或技术决策者

前置知识：

• HTML、CSS、JavaScript 基础（主题开发）
• React、GraphQL 基础（应用开发）
• 基本的电商业务理解（可选）

推荐阅读顺序 / 从这里开始

如果你是第一次接触 Shopify，建议按以下顺序阅读：

1. Shopify - 了解 Shopify 是什么、核心功能
2. Shopify 架构 - 理解平台的技术架构
3. Shopify vs WooCommerce - 对比竞品，理解设计权衡
4. 选择你的方向：
   • 主题开发 → 阅读”主题开发路径”
   • 应用开发 → 阅读”应用开发路径”
   • 业务理解 → 阅读”业务核心概念”

核心概念分组

平台基础

• Shopify - 托管式电商 SaaS 平台，提供完整电商解决方案
• Shopify 架构 - 可组合商务架构，统一堆栈设计

主题开发

• Shopify 主题 - 控制店铺外观和布局的前端系统
• Liquid 模板引擎 - Shopify 的安全模板语言
• Shopify Storefront API - 构建自定义店铺前端的 GraphQL API

应用开发

• Shopify 应用 - 通过 API 扩展平台功能的第三方集成
• Shopify Admin API - 管理后台数据的 GraphQL/REST API
• Shopify Webhook - 订阅商店事件，实现实时同步

业务核心概念

• Shopify 结账流程 - 高转化率的支付体验
• Shopify Payments - 内置支付解决方案
• Shopify 订单履约 - 库存、发货、物流追踪系统

高级特性

• Shopify Metafield - 自定义字段系统，存储额外数据
• Shopify Webhook - 事件驱动的实时数据同步

关系笔记入口

• Shopify 主题开发 vs 应用开发 - 对比两种开发路径的技术栈、适用场景、收益模式
• Shopify vs WooCommerce - 对比托管式 vs 自托管、易用性 vs 灵活性

操作指南 / 资源入口

快速开始

• Shopify 主题开发快速开始 - 使用 Shopify CLI 创建本地开发环境
• Shopify 应用开发环境搭建 - 创建 Partner 账户，搭建 Remix 应用

开发工作流

• Shopify 本地开发工作流程 - 配置热重载、调试、测试环境

性能优化

• Shopify 商店性能优化 - 图片优化、减少应用负载、改善页面速度

问题排查

• Liquid 模板常见错误排查 - 标签未闭合、变量错误等语法问题
• Shopify API 限流问题排查 - 429 错误，API 请求超限解决方案

相关 MOC

• 前端工程 - Shopify 主题开发涉及前端技术栈
• React MOC - Shopify 应用开发（Remix）基于 React

外部资源

• Shopify 官方文档
• Shopify Developer Changelog
• Shopify Community
• Shopify Partners

学习路径

主题开发路径（前端开发者）

目标：能够独立开发和定制 Shopify 主题

1. 基础理解（30 分钟）

   • Shopify
   • Shopify 主题

2. 核心技术（1-2 小时）

   • Liquid 模板引擎
   • Shopify Storefront API

3. 动手实践（2-3 小时）

   • Shopify 主题开发快速开始
   • Shopify 本地开发工作流程

4. 优化与排障（1 小时）

   • Shopify 商店性能优化
   • Liquid 模板常见错误排查

预计总时间：4-6 小时（入门到能动手开发）

应用开发路径（全栈开发者）

目标：能够开发 Shopify 应用并上架到 App Store

1. 基础理解（30 分钟）

   • Shopify
   • Shopify 架构

2. API 理解（1-2 小时）

   • Shopify 应用
   • Shopify Admin API
   • Shopify Webhook

3. 对比决策（30 分钟）

   • Shopify 主题开发 vs 应用开发

4. 动手实践（3-4 小时）

   • Shopify 应用开发环境搭建
   • Shopify 本地开发工作流程

5. 高级特性（1 小时）

   • Shopify Metafield
   • Shopify API 限流问题排查

预计总时间：5-8 小时（入门到能动手开发）

业务理解路径（产品经理/技术决策者）

目标：理解 Shopify 平台能力，做出技术选型决策

1. 平台概览（30 分钟）

   • Shopify
   • Shopify vs WooCommerce

2. 核心业务流程（1 小时）

   • Shopify 结账流程
   • Shopify Payments
   • Shopify 订单履约

3. 扩展能力（30 分钟）

   • Shopify 应用
   • Shopify 主题

预计总时间：2 小时（理解平台能力）

更新日志

• 2026-06-15：初次创建，涵盖 Shopify 平台基础、主题开发、应用开发、业务流程、性能优化和问题排查