セクションの解剖
セクションファイルの構成要素を説明し、schemaが管理画面の入力欄になる仕組みを理解できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、セクションのファイルの中身と、schemaが管理画面の入力欄になる仕組みを説明できるようになります。
受託では、この仕組みが分かって初めて、お客さまが自分で編集できるセクションを設計できます。
セクションのファイルは、3つの要素でできている
セクションのファイルは、Liquidのマークアップ、{% schema %}、必要なら{% stylesheet %}と{% javascript %}でできています。{% schema %}はJSONで、name・settings・blocks・presetsを持ちます。
schemaは、1ファイルに1つだけです。
置く位置は自由ですが、他のLiquidタグの中には入れられません。
慣例として、末尾に置きます。
schemaとsection.settingsで、入力欄と表示が往復する
schemaのsettingsに書いたidの値が、section.settings.idとしてLiquidに入ります。
エディタの入力欄を作るのがschema、その値を読んで表示するのがマークアップです。
片方だけでは意味がありません。
値をLiquidに直書きすると、お客さまが編集できないセクションになります。
presetsがあると「セクションを追加」に出る
presetsがあるセクションだけが、エディタの「セクションを追加」に現れます。
無いものは、テンプレートに直接書かれた固定のセクション（productなど）として使います。
発展：自動で付くラッパーと{% stylesheet %}
描画時に、<div id="shopify-section-{{ section.id }}" class="shopify-section">で自動的に包まれます。
CSSのスコープやエディタでの選択は、このIDを使います。
自分でラッパーを書く必要はありません。
セクションやブロックのCSSを{% stylesheet %}に書くと、Shopifyがまとめて1つのCSSとして配信します。<style>を直接書くより、ページが速くなります。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。