SuperAPI AI 工具集

theme-shopify-liquid-templates

设计与创作

查看项目

更新于 10-16 01:37

技能介绍

用途:为 Shopify 主题中的 Liquid 模板编写与修改提供规范,覆盖 snippets、逻辑流程、图片处理和 SVG 使用。

主要能力与用法:

  1. Snippets:只使用 {% render %},不要用 include;每个 snippet 顶部加 Usage 注释块,通过参数传值,例如 {% render 'product-card', product: product, show_price: true, image_size: 'large' %}。render 性能更好、变量作用域更清晰,也是 Shopify 推荐方式。
  2. Liquid 逻辑:复杂逻辑使用 {% liquid %} 标签,避免深层嵌套,保持线性可读,变量命名有意义,必要时拆分为多个 liquid 块。
  3. 图片:始终使用 image_tag 过滤器,不要硬编码 <img>;用 image_url 生成图片 URL,且必须指定 width 或 height;配合 widths、sizes、loading、alt 等参数实现响应式图片,alt 需用 | escape。
  4. SVG:将 SVG 文件放在 assets/ 目录,用 inline_asset_content 过滤器内联,例如 {{ 'icon-arrow.svg' | inline_asset_content }};不要粘贴原始 SVG 标记;内联后可用 CSS 设置尺寸与 fill。

适用场景:创建或修改 Liquid 模板、处理 snippets、图片与媒体、编写 Liquid 逻辑、使用 SVG 图标。

限制:资料未提供安装命令、收费、价格、平台支持范围或效果数据,暂未提供。