mcpField
T
theme-shopify-section-structure

theme-shopify-section-structure

github.com/niccos-shopify-workspace开发259 次安装38 周前更新
代码仓库

关于 theme-shopify-section-structure

theme-shopify-section-structure 提供 Shopify 主题区块的组织规范，帮助主题开发者安排 Liquid、CSS 和可选 JavaScript 文件，并配置包含内边距设置和预设项的 schema。

主要功能

  1. 01区块、CSS 和 JS 文件分离
  2. 02引入区块专属样式表
  3. 03要求 schema 包含内边距设置
  4. 04schema 组织建议
  5. 05要求设置预设项

适用场景

  1. 01创建 Shopify 主题区块
  2. 02修改现有区块 schema
  3. 03添加区块响应式内边距

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/niccos-shopify-workspace/shopify-cursor-skills --skill theme-shopify-section-structure

安装后在 Claude Code 中输入/theme-shopify-section-structure确认已加载。

附带文件references/SHOPIFY_THEME_DOCS.md

详细介绍

Shopify Section 结构

关于如何通过正确的文件结构、架构配置和内边距设置来组织 Shopify 主题 Section 的指南。

使用场景

  • 创建新的 Shopify 主题 Section
  • 修改现有的 Section 架构
  • 设置 Section 文件结构（Liquid、CSS、JS）
  • 为 Section 添加内边距控件

Section 文件结构

每个 Section 必须包含：

  • Liquid Section 文件（位于 sections/ 目录中的 .liquid 文件）
  • 单独的 CSS 文件（位于 assets/ 目录中）
  • 可选的单独 JS 文件（位于 assets/ 目录中）
CSS 引入

每个 Section 都必须通过以下方式引入自己的样式表：

{{ 'section-name.css' | asset_url | stylesheet_tag }}

重要：不要在一个文件中混合多个 Section 的样式。每个 Section 都有自己的 CSS 文件。

例外：首屏 Section（例如 header、announcement bar）可以使用全局主题文件（如 theme.css）中的样式来加载关键 CSS。

JavaScript 引入

如果 Section 需要 JavaScript，请单独引入：

<script src="{{ 'section-logic.js' | asset_url }}" defer="defer"></script>

Section 架构要求

每个 Section 架构都必须包含内边距设置。

必需的内边距设置

在架构中添加一个“Paddings”标题，并包含以下设置：

{
  "type": "header",
  "content": "Paddings"
},
{
  "type": "range",
  "id": "padding_top",
  "label": "Padding Top",
  "min": 0,
  "max": 100,
  "step": 1,
  "unit": "px",
  "default": 0
},
{
  "type": "range",
  "id": "padding_bottom",
  "label": "Padding Bottom",
  "min": 0,
  "max": 100,
  "step": 1,
  "unit": "px",
  "default": 0
},
{
  "type": "range",
  "id": "padding_top_mobile",
  "label": "Padding Top (Mobile)",
  "min": 0,
  "max": 100,
  "step": 1,
  "unit": "px",
  "default": 0
},
{
  "type": "range",
  "id": "padding_bottom_mobile",
  "label": "Padding Bottom (Mobile)",
  "min": 0,
  "max": 100,
  "step": 1,
  "unit": "px",
  "default": 0
}
架构最佳实践
  • 仅在必要时添加其他设置
  • 避免过度配置架构
  • 始终至少包含一个预设
  • 保持设置有条理且合乎逻辑
在 CSS 中应用内边距

在 Section CSS 中使用架构设置：

.section-{{ section.id }}-padding {
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
}

@media (max-width: 749px) {
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top_mobile }}px;
    padding-bottom: {{ section.settings.padding_bottom_mobile }}px;
  }
}

Shopify 主题文档

请参考以下 Shopify 官方资源：

Section 结构示例

sections/
  └── featured-collection.liquid

assets/
  ├── featured-collection.css
  └── featured-collection.js (optional)

说明

  1. 创建 Section 文件：在 sections/ 目录中创建扩展名为 .liquid 的文件
  2. 创建 CSS 文件：在 assets/ 目录中创建与 Section 同名的文件
  3. 引入 CSS：在 Section 中使用 stylesheet_tag 过滤器
  4. 添加架构：加入必需的内边距设置
  5. 至少添加一个预设到架构中
  6. 保持文件分离：切勿在一个 CSS 文件中混合多个 Section 的样式

评论

支持 Markdown