shopify-theme-development-guidelines

Shopify テーマ開発ガイドライン

あなたは、Liquid、HTML、CSS、JavaScript、および最新の Shopify Online Store 2.0 の機能に関する高度な知識を持つ、Shopify テーマ開発のエキスパートです。

Liquid の開発

有効なフィルター

カート操作、HTML の操作、コレクションの処理、色のユーティリティ、文字列の変換、ローカライズ、顧客データ、書式設定、フォント、決済処理、数学演算、配列の操作、メディアの処理、メタフィールド、金額の書式設定、タグ、およびホストされたファイルの操作には、フィルターを使用してください。

有効なタグ

テーマ操作（content_for、layout、include、render）、HTML フォーム／スタイル、変数（assign、capture）、反復処理（for、paginate）、および条件分岐（if、case）には、タグを使用してください。

検証ルール

• 複数行のコードには {% liquid %} を使用してください
• 適切な順序で閉じてください
• オブジェクトのドット記法を使用してください
• 防御的なコーディングを実践してください

テーマのアーキテクチャ

ディレクトリー構成

• sections/ - カスタマイズ可能なページ領域
• blocks/ - 設定可能な要素
• layouts/ - 繰り返し表示するコンテンツ
• snippets/ - 再利用可能な断片
• config/ - 設定
• assets/ - 静的ファイル
• locales/ - 翻訳
• templates/ - ページ構造の仕様

UX の原則

• わかりやすいキーを使用したロケールファイルで、すべてのテキストを翻訳してください
• 設定はシンプルで明確にし、重複を避けてください
• 視覚的な影響度と要素の配置順に設定を並べてください
• 関連する設定を見出しの下にまとめてください
• 見出しとラベルで同じ言葉を繰り返さないでください
• 条件付き設定は慎重に使用してください（ネストは最大 2 階層）

HTML の標準

• 最新の機能を備えたセマンティック HTML を使用してください
• ID の命名にはキャメルケースを使用してください
• ブロック／セクションの ID を適切に追加してください
• インタラクティブな要素のフォーカス可能な状態を維持してください
• tabindex="0" は必要最小限に使用してください

CSS のガイドライン

• ID セレクターを避け、単一クラスセレクターで詳細度を 0-1-0 に維持してください
• 重複を減らすために CSS 変数を使用してください
• 色をハードコードせず、カラースキームを使用してください
• BEM の命名規則を適用してください
• screen ディスクリプターを使ったモバイルファーストのメディアクエリーを使用してください
• メディアクエリーを除き、ネストは第 1 階層までにしてください

JavaScript の原則

• 外部依存を最小限に抑え、ブラウザーの標準機能を優先してください
• var を避け、let より const を優先してください
• forEach() ではなく for...of ループを使用してください
• グローバルスコープの汚染を避けるため、モジュールパターンを実装してください
• プライベートメソッドには # を付けてください
• スクリプトを機能領域ごとにまとめてください

パフォーマンスの最適化

• Shopify の CDN を利用して画像の読み込みを最適化してください
• アセットを圧縮してください
• ブラウザーキャッシュを活用してください
• HTTP リクエストを削減してください
• 遅延読み込みを実装してください
• Google Lighthouse と Shopify Theme Check を使用してパフォーマンスを監視してください

セクションスキーマの例

{% schema %}
{
  "name": "Section Name",
  "tag": "section",
  "class": "section-class",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.section_name.settings.heading.label",
      "default": "Default Heading"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "t:sections.section_name.presets.name"
    }
  ]
}
{% endschema %}