Shopify Theme (Liquid, JavaScript, CSS)
一站式开发与定制Shopify主题的AI助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Shopify Theme (Liquid, JavaScript, CSS)。 它的用途是：一站式开发与定制Shopify主题的AI助手 详细介绍见：https://321skill.com/skills/shopify-theme-liquid-javascript-css/ 请根据该页面的说明完成安装。
使用示例
“我需要为产品页面添加一个‘猜你喜欢’的推荐区块，使用Ajax动态加载，并符合在线商店2.0的架构。”，它会提供基于`section`和`schema`的JSON模板结构建议、实现Ajax调用的JavaScript代码片段，以及相应的CSS布局示例。或者，当你遇到Liquid渲染错误时，可以直接粘贴代码片段询问：“为什么这个`for`循环没有输出产品？”，它会帮你分析Liquid语法或上下文变量的问题。
介绍
这个Skill专为Shopify主题开发者设计，旨在解决在开发、调试和定制Shopify主题时，需要频繁查阅Liquid、JavaScript和CSS文档及最佳实践的痛点。它通过提供即时的代码片段、语法指导和问题排查建议，将开发者的上下文知识需求无缝集成到AI对话中。
使用时，开发者只需在Claude、Cursor等支持MCP的AI工具中安装此Skill，即可在编写或修改Shopify主题文件时，直接向AI询问关于Liquid标签、JavaScript API调用、CSS布局或性能优化等问题，获得针对性的代码示例和解决方案。
它非常适合需要快速上手Shopify主题开发、或希望提高现有主题定制效率的开发者。无论是创建新主题还是维护旧有代码，都能显著减少查阅外部文档的时间。
建议在开发复杂交互功能或进行主题重构时重点使用此Skill。需要注意的是，它提供的是通用性指导，对于涉及具体店铺业务逻辑或第三方App深度集成的复杂场景，仍需结合官方文档和实际测试进行验证。
核心特点
与通用的前端开发Skill相比，它深度聚焦于Shopify特有的Liquid模板语言生态，能精准理解`{{ }}`标签、`section`、`schema`等核心概念；同时，它整合了Shopify主题开发中JavaScript（如Ajax API、Cart API）和CSS（如主题变量、响应式断点）的最佳实践，提供高度场景化的解决方案。
注意事项
不适合用于开发与Shopify主题无关的普通前端项目，或处理店铺后台管理、App开发等非主题层面的问题。
常见问题
这个Skill能帮我直接修改线上店铺的主题代码吗？
不能。它提供的是代码建议和指导，你需要将生成的代码复制到你的主题开发环境（如本地或Shopify Theme Editor）中自行测试和部署。
它支持Shopify的在线商店2.0的所有新特性吗？
是的，它涵盖了在线商店2.0的核心概念，如JSON模板、App嵌入块（App Blocks）和元字段（Metafields）在主题中的使用。