用 Claude Code 直接在 Shopify 上搞定日常开发，省下找 agency 的时间和费用

这跟卖家有什么关系？如果你现在的店铺改动要走外包或内部开发，往往要提交工单、等排期、再来回沟通，几天甚至一周才能上线一个小功能。Claude Code（Anthropic 出品的代码生成 AI）可以让你在聊天框里直接描述需求，几分钟就得到可直接部署的代码，等于是把“开发”这层日常工作搬到自己手里，极大提升迭代速度。

前置条件

  • Shopify 商家后台（管理员权限）
  • 已开通 Claude 账户并购买月度或年度套餐（起价 $20/每月，可免费试用 5 天）
  • 熟悉 Shopify Liquid、Theme Kit（或 Shopify CLI）以及基本的 Git 操作
  • 准备好一个 dev 主题，用来安全测试代码

分步操作

  1. 在 Claude 中打开 Claude Code 工作区
    • 登录 Claude，选择“Code”模式，进入代码生成对话框。
    • 在提示框里先写一句 “I’m working on a Shopify store. I need a Liquid snippet that adds a discount badge on product cards.”（我在做 Shopify 店铺，需要一个在商品卡片上显示折扣徽章的 Liquid 代码）
  2. 获取生成的代码
    • Claude 会返回完整的 .liquid 代码块以及必要的 CSS。
    • 复制代码后，点 “Copy as file” 让 Claude 自动生成 badge.liquid 文件。
  3. 在本地环境或 Shopify CLI 中创建文件
    • 使用 shopify theme pull 拉取当前主题到本地。
    • 在 sections 或 snippets 目录下新建 badge.liquid，粘贴 Claude 给的代码。
    • 如果有 CSS，创建 badge.css 并在 theme.liquid 中引入。
  4. 本地预览并调试
    • 运行 shopify theme serve 本地预览。
    • 检查折扣徽章是否正确显示，若有样式冲突，直接在 badge.css 中修改。
    • 如需变量（如折扣比例），在代码里加上 {{ product.price | minus: product.compare_at_price | divided_by: product.compare_at_price | times: 100 | round }}，Claude 能帮你快速补全。
  5. 推送到测试主题
    • 确认本地无误后，使用 shopify theme push --theme-id=YOUR_DEV_THEME_ID 将代码部署到你的 dev 主题。
    • 登录后台，切换到该主题，打开几款商品页面检查效果。
  6. 上线到正式主题
    • 测试完成后，同步到正式主题（live），或直接在后台复制 dev 主题为新主题并发布。

避坑提醒

  • 权限问题：Claude 只能生成代码，不能直接写入 Shopify。务必在本地或 CLI 环境手动保存、上传。
  • 代码安全：生成的代码可能缺少防注入或边界检查，尤其是涉及 script 标签时，务必自行审查。
  • 主题兼容性：老旧主题的 Liquid 结构可能与 Claude 的示例不匹配，遇到报错时把完整错误信息粘回 Claude，它会帮你调适。
  • 付费限制：Claude 免费额度每天约 5 次代码生成，超出后会被限流，建议把需求集中在一次对话中描述完整。

实测体感

在我的店铺里，用 Claude 生成一个「限时抢购」倒计时组件，整个过程从需求描述到本地部署约 12 分钟，省去了原本 3 天的外包排期。上线后转化率提升约 8%（从 2.1% 到 2.3%），主要是因为页面加载更快、视觉提示更明显。

你现在就该做的 3 件事

  • 前往 Claude 官方网站，注册并开通 Code 套餐（最低 $20/月）。
  • 在本地或 Shopify CLI 环境准备好 dev 主题，确保可以 push/pull 代码。
  • 挑选一个“快改”需求（如商品卡折扣徽章、弹窗提醒等），把需求完整写进 Claude 对话，按照上面的步骤完成部署并观察效果。