SuperAPI AI 工具集

shopify-theme-development

编程与开发

查看项目

更新于 10-16 05:46

技能介绍

用途:构建或定制 Shopify 主题(含从零新建或基于 Dawn 派生),实现商品页、集合网格、购物车等功能,并让商家可通过主题编辑器配置布局。

主要能力:采用 Online Store 2.0 架构,使用 Liquid 模板、JSON 模板、sections 与 blocks;通过 {% schema %} 定义区块与 presets;使用 image_url、image_tag、money、asset_url 等原生过滤器;用 Cart API(/cart/add.js、/cart/change.js、/cart.js)实现 AJAX 购物车;通过 theme app extension 向主题注入应用内容;并做懒加载、关键 CSS 内联、图片预加载等性能优化。

使用方式:安装 CLI 并初始化主题:npm install -g @shopify/cli @shopify/theme;shopify theme init my-theme;shopify theme dev --store=your-store.myshopify.com。生成应用扩展:shopify app generate extension --type theme_app_extension --name my-app-block。目录包含 assets、config、layout、locales、sections、snippets、templates。

适用场景:新建主题、开发自定义 section/block、实现商品与集合页、优化 Core Web Vitals、构建主题应用扩展。

限制与注意:区块需包含 {{ block.shopify_attributes }};section 需有 presets 才会出现在“添加 section”菜单;图片应使用 image_url 而非已弃用的 img_url;每次购物车变更后应重新获取 /cart.js 更新角标;建议用 shopify theme check 检查语法,并先在未发布主题上预览。资料未提供具体收费、价格或平台支持范围。