SuperAPI AI 工具集

theme-development

编程与开发

查看项目

更新于 10-15 21:12

技能介绍

用途:创建全新 Shopify 主题、修改或定制现有主题、理解主题架构,以及处理 sections、blocks、templates,配置开发环境、部署主题并优化性能。

主要能力:

  • 主题架构:目录含 assets、config、layout、locales、sections、snippets、templates;层级为 Layout → Template → Sections → Blocks → Snippets。上传时仅要求 layout/theme.liquid。
  • 布局:theme.liquid 包裹所有页面,用 content_for_layout 渲染页面内容,content_for_header 输出头部。
  • JSON 模板:模板引用 section 及其 settings,并用 order 排列。
  • Sections 与 Blocks:section 通过 {% schema %} 定义 name、settings、presets;blocks 支持商家增删与排序,使用 block.shopify_attributes。
  • 主题设置:config/settings_schema.json 定义全局设置,Liquid 中用 settings.primary_color 读取。

使用方式: shopify theme init my-theme cd my-theme shopify theme dev shopify theme dev --store your-store.myshopify.com shopify theme push --unpublished shopify theme push --theme THEME_ID 其他命令:pull、check、list、publish、delete。

适用场景:从零建主题、定制现有主题、搭建 sections/blocks、配置本地预览与部署、做主题性能优化。

限制与注意:必须运行 shopify theme dev 才能同步改动;section 未出现在编辑器需在 schema 添加 presets 数组;页面加载慢可运行 shopify theme check 修复性能警告。图片使用 image_url 与较宽尺寸、下方图片用 loading="lazy";使用语义化 HTML、提供 alt 文本、保证标题层级、键盘导航与色彩对比度。Liquid 语法细节另见 liquid-templating 技能。