← inaro.devShopify学習ツール
09-01

最小のセクションを作る

新しいセクションファイルを作り、テーマエディタの「セクションを追加」に表示させ、設定値を出力できる

最終確認: 2026-09

解説

受託の現場でなぜ必要か: この回では、テーマエディタの「セクションを追加」に出る、いちばん小さなセクション(ページを組み立てる部品)を1つ作れるようになります。
受託では、運用者が自分でセクションを足したり並び替えたりできる状態が納品の最低ラインで、その土台がこの形です。

セクションとは、ファイル1つで作る部品

セクションは、sections/フォルダに置くLiquidファイル1つで作ります。
sections/feature-banner.liquidなら、ファイル名のfeature-bannerがそのままセクションの種類(type)になります。
中身は、上に表示用のマークアップ、下に{% schema %}(設定の定義を書くJSON)の2部構成です。
schemaのsettingsに書いた項目が、そのまま管理画面の入力欄になります。

「セクションを追加」に出る条件はpresets

namepresets(追加したときの初期状態)を持つセクションだけが、「セクションを追加」に現れます。
presetsの無いセクションは、JSONテンプレートに直接書くか、{% section %}タグで決まった位置に呼ぶ用途です。
`presets`を持つセクションを`{% section %}`で静的に呼ばないのが、公式の指針です。

Shopifyが自動で付ける外側の要素

セクションは描画されるとき、<div id="shopify-section-{{ section.id }}" class="shopify-section">で自動的に包まれます。
schemaのtagclassで、この要素名とクラスを変えられます。
CSSの効く範囲をこのセクションに限定したいときや、エディタの選択枠は、この外側の要素が基準です。

発展:使える場所の制限と、schemaの決まり

enabled_on / disabled_onで、使えるテンプレートやグループを限定できます(既定は全テンプレート)。
ヘッダー専用のセクションが本文に置かれる事故は、ここで防ぎます。
{% schema %}の中は純粋なJSONで、Liquidは描画されず、コメントも書けません。
書いたらshopify theme checkで構文と型を検査します。

ステップ1 / 2

ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。