theme-shopify-section-structure

Shopify セクション構成

適切なファイル構成、スキーマ設定、パディング設定で Shopify テーマのセクションを整理するためのガイドラインです。

使用する場面

• Shopify テーマの新しいセクションを作成する
• 既存のセクションスキーマを変更する
• セクションのファイル構成（Liquid、CSS、JS）を設定する
• セクションにパディング設定を追加する

セクションのファイル構成

各セクションには、以下が必要です。

• Liquid セクションファイル（sections/ ディレクトリ内の .liquid ファイル）
• 個別の CSS ファイル（assets/ ディレクトリ内）
• 任意の個別の JS ファイル（assets/ ディレクトリ内）

CSS の読み込み

各セクションには、次の方法で専用のスタイルシートを含める必要があります。

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

重要：複数のセクションのスタイルを1つのファイルに混在させないでください。各セクションには専用の CSS ファイルが必要です。

例外：ファーストビューのセクション（例：header、announcement bar）では、クリティカル CSS を読み込むために、グローバルテーマファイル（theme.css など）のスタイルを使用できます。

JavaScript の読み込み

セクションで JavaScript が必要な場合は、個別に含めます。

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

セクションスキーマの要件

すべてのセクションスキーマには、パディング設定を必ず含める必要があります。

必須のパディング設定

スキーマに「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
}

スキーマのベストプラクティス

• 必要な場合にのみ設定を追加する
• スキーマを過剰に設定しない
• 少なくとも1つのプリセットを必ず含める
• 設定を整理し、論理的にまとめる

CSS でのパディングの適用

セクションの 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 の公式リソースを参照してください。

• Shopify テーマの構成
• セクションスキーマ
• セクションファイル
• テーマ設定

セクション構成の例

sections/
  └── featured-collection.liquid

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

手順

1. sections/ ディレクトリに .liquid 拡張子のセクションファイルを作成する
2. セクション名に合わせた CSS ファイルを assets/ ディレクトリに作成する
3. stylesheet_tag フィルターを使用して、セクションに CSS を含める
4. 必須のパディング設定を含むスキーマを追加する
5. スキーマに少なくとも1つのプリセットを追加する
6. ファイルを分ける。複数のセクションのスタイルを1つの CSS ファイルに混在させない