SuperAPI AI 工具集

theme-shopify-section-structure

前端与建站

查看项目

更新于 10-16 14:37

技能介绍

用途:为Shopify主题中section的创建与修改提供结构规范,涵盖文件组织、schema配置与内边距设置。

主要能力:每个section需有sections/目录下的.liquid文件、assets/目录下独立同名CSS文件,JS文件可选。CSS通过{{ 'section-name.css' | asset_url | stylesheet_tag }}引入,JS通过<script src="{{ 'section-logic.js' | asset_url }}" defer="defer"></script>引入。不允许多个section的样式混用同一文件;例外是首屏section(如header、announcement bar)可用theme.css等全局样式加载关键CSS。

schema要求:每个schema必须包含Paddings标题及padding_top、padding_bottom、padding_top_mobile、padding_bottom_mobile四个range设置,范围0-100px,步长1,默认0。schema最佳实践包括仅在必要时添加设置、避免过度配置、至少包含一个preset、保持设置组织合理。

CSS应用:在section CSS中通过.section-{{ section.id }}-padding引用padding设置,并在max-width:749px媒体查询中应用移动端内边距。

示例结构:sections/featured-collection.liquid,assets/featured-collection.css与可选assets/featured-collection.js。

适用场景:新建Shopify主题section、修改现有section schema、搭建section文件结构、为section添加内边距控件。

限制:资料未提供具体平台版本、收费、价格等信息。