テーマエディタで「セクション」と「ブロック」を足す — 追加・並べ替え・非表示・削除の手順

2026年10月20日

テーマを選んだあと、ホームページの並びをご自身のお店に合わせて変えたいのに、どこから手を付ければよいか迷っている方もいらっしゃると思います。
この記事では、テーマエディタ（テーマの見た目を整える編集画面）でセクションとブロックを扱う操作を、公式ヘルプの記載に沿って並べていきます。
追加、並べ替え、非表示、削除の4つと、最後の保存までを、ひとつずつ順に見ていきます。

手順と仕様は、Shopify ヘルプセンターの6ページの記載に沿っています。
テーマそのものの選び方は、最初のテーマの選び方 — 無料テーマから始めるときの見どころにまとめています。
ここでは、その続きとして、選んだテーマのページに中身を足していく場面を扱います。

手を付ける前の準備

触り始めてから、元の形に戻せなくなるのが心配な方もいらっしゃるでしょう。
公式ヘルプは、テーマをカスタマイズする準備として、次の推奨タスクを挙げています。

テーマを複製して、バックアップコピー（控えの写し）を作成すること
利用できるサポートのレベルを確認すること
画像のアップロードに関する要件とベストプラクティス（推奨されるやり方）を確認すること

複製しておく理由は、ヘルプの「テーマエディタ」のページに次のように書かれています。

テーマを複製して、バックアップコピーを作成します。そうすれば、必要に応じて変更を破棄して、簡単にやり直すことができます。

撮影のときの決めごとは、商品写真をスマホで撮る前に決めておくことに並べています（ヘルプのアップロード要件とは別の話です）。
最初の1回は、テーマを複製してから触り始めると、落ち着いて手を動かせると思います。

テーマエディタの開き方

テーマエディタがどこにあるのか、最初は管理画面（お店の裏側の操作画面）の中で探してしまうかもしれません。
公式ヘルプが案内している開き方は、次の2つの手順です。

Shopify 管理画面から、オンラインストアに移動します。
編集するテーマの横にある「テーマを編集」をクリックします。

ボタンの表記は、ヘルプのページによって「テーマを編集」と「テーマを編集する」の2通りで書かれています。
開くと、デフォルト（最初の設定）でストアのホームページが読み込まれると書かれています。
商品やコレクション、ページ、ブログなど別のテンプレート（ページのひな形）は、ドロップダウンメニュー（押すと選択肢が開くメニュー）から選んで切り替えます。

なお、Canvas のバッジが付いたテーマについて、ヘルプには次の一文があります。

Canvas バッジが表示されているテーマは、代わりに Canvas で開くため、テーマエディタでは編集できません。

Canvas が出た日のことは、新しいデザイン画面「Canvas」が登場しましたで取り上げています。

画面の3つの部分

開いた画面には見慣れない部分が並んでいて、どこを見ればよいか戸惑うかもしれません。
公式ヘルプは、テーマエディタの画面を、次の3つに分けて説明しています。

メニューバー（画面の帯）：左側にセクション、テーマ設定、アプリの埋め込みを切り替えるボタンがあり、中央にテーマ名、マーケット、テンプレートのメニューがあります。右側には、元に戻す/やり直すや [保存] などのコントロールがあります。
サイドバー：いま表示しているテンプレートのすべてのコンテンツが、ツリービュー（枝分かれした一覧）で表示されます。
プレビューウィンドウ：テーマが表示され、変更を加えると自動的に更新されます。

セクションの追加と削除の手順には、どちらもサイドバーでの操作が出てきます。
ブラウザのウィンドウの幅が1600ピクセル以上ある場合は、左右に2つのパネル（ダブルサイドバーモード）が表示されると書かれています。
画面が狭い場合は、セクションやブロックをクリックすると、設定パネルが画面の下部からスライドして表示される形（シングルサイドバーモード）になります。
ご自身の画面の幅によって設定の出る場所が変わる、と覚えておくと、記事の説明と見た目が違っても戸惑いにくくなります。

セクションとブロックの関係

セクションとブロックは言葉が似ていて、どちらを触ればよいのか分かりにくいところだと思います。
公式ヘルプでは、テンプレートはセクションで、セクションはブロックで構成されていると説明されています。

セクションは、テキスト、ボタン、単一の画像、画像のコラージュ、リンクなど、それぞれに特定の機能があるさまざまな種類のブロックで構成されています。

セクションとブロックには、次の上限が書かれています。

各テンプレートには、最大 25 個のセクションを含めることができます。
各テンプレートには、すべてのセクションで合わせて最大 1250 個のブロックを含めることができます。
ネスト（ブロックの中にブロックを入れること）に対応しているブロックは、最大 8 階層までブロックをネストできます。

すべてのセクションに、カスタマイズ可能な個別のブロックがあるとは限らない、とも書かれています。
また、テーマのすべてのページテンプレートで、セクションはヘッダーエリア、テンプレートエリア（ページのメインボディ）、フッターエリアの3つにグループ分けされています。
ヘッダーとフッターはオンラインストアのすべてのページで共有され、たとえばヘッダーにカスタム Liquid ブロックを足すと、すべての商品ページやホームページ、その他のページに表示されると書かれています。

セクションの追加

ページに新しいまとまりを足したいとき、最初に触ることになるのがセクションの追加です。
パソコンの画面（ヘルプの表記では「デスクトップ」）での手順は、次のとおりです。

管理画面からオンラインストアに移動し、編集するテーマを見つけて [テーマを編集する] をクリックします。
ホームページをカスタマイズするか、[ホームページ] ドロップダウンメニューから、セクションを追加するテンプレートを選択します。
サイドバーで [セクションを追加] をクリックし、リストからセクションを選ぶか、[セクションを検索] 項目で探して選択します。
新しいセクションの設定とコンテンツ（文章や画像などの中身）を編集するか、一緒に読み込まれるデフォルトのブロックを編集するか、[ブロックを追加] で新しいブロックを足します。
[保存] をクリックします。

セクションは、ギフトカードページとチェックアウトページを除き、オンラインストアのどのページにも追加できると書かれています。
Shopify アプリ（ヘルプの表記では「モバイル」）では、テーマエディタを開いてテンプレートを選んだあと、[セクション] → [セクションを追加] の順にタップします。
テーマにすでに含まれているセクションなら、Sidekick に追加を頼むこともできると書かれています。
プロンプト（頼む文）の例は「商品テンプレートに新しいセクションを追加」です。

ブロックの追加

セクションを置いたあと、その中に見出しや画像などを足したくなる場面があると思います。
ブロックの追加は、足したいセクションの単位で行う手順として書かれています。

管理画面からオンラインストアに移動し、編集するテーマを見つけて [テーマを編集する] をクリックします。
ホームページのセクションに足すか、[ホームページ] ドロップダウンメニューから、ブロックを追加するテンプレートを選択します。
ブロックを追加するセクションにカーソル（マウスの矢印）を合わせ、[ブロックを追加] をクリックします。
リストからブロックを選ぶか、[ブロックを検索] フィールドで探して選択します。
[保存] をクリックします。

ブロックピッカー（ブロックを選ぶ一覧）には、追加する前にブロックの表示を確認できるよう、プレビューが表示されると書かれています。
一方で、どのブロックをいくつ足せるかには、セクションごとの決まりがあります。

セクションによってはブロックタイプが固定されていて、テーマデザイナーがそのセクションで利用可能にしたブロックからのみ選択できます。
セクションが利用可能なブロックの最大数に達すると、「ブロックを追加」オプションはグレーアウト（薄く表示された状態）され、クリックまたはタップできなくなります。

たとえば、テーマにメール登録セクション（ニュースレター登録フォームを置くセクション）がある場合、追加できるメールフォームブロックは 1 つのみであることがある、という例が挙がっています。
[ブロックを追加] が押せないときは、そのセクションの上限に達していないかを見てください。

並べ替えと、移せない場所

足したあとで順番を入れ替えたくなるのは、ページを作っていれば自然なことだと思います。
ヘルプには、ページテンプレートのセクションの順序を変えたり、セクションの中のブロックを並べ替えたりできると書かれています。

セクションの追加の手順の中では、セクション名にカーソルを合わせ、ドラッグ用のボタン（ヘルプの画像の説明では「ドラッグアンドドロップ」）をクリックしてドラッグする、と書かれています。
並べ替えの節の手順では、そのボタンを長押しして、ブロックまたはセクションを新しい場所にドラッグし、[保存] をクリックする形で書かれています。
移すときの決まりは、次のとおりです。

互換性のあるブロックは、異なるセクションの間で移動することもできます。
ブロックタイプに互換性がない場合、またはセクションのブロック数が上限に達している場合は、ブロックを別のセクションに移動することはできません。
セクションまたはブロックを無効な場所に移動しようとすると、元の位置に戻ります。

プレビューインスペクター（プレビューウィンドウの中でコンテンツを管理する機能）を使ってセクションを並べ替えることもできる、と書かれています。
置いたはずのブロックが元の位置に戻ったときは、上の2つ目の条件に当たっていないかを確かめてください。

非表示と削除の操作

使わないセクションを消してよいのか、ひとまず隠しておけばよいのか、迷うところだと思います。
ヘルプには、オンラインストアからセクションやブロックを非表示にする操作と、削除する操作が、別々の手順として書かれています。

非表示：セクションまたはブロックの名前にカーソルを合わせ、非表示のボタンをクリックします。
削除：セクションまたはブロックの名前にカーソルを合わせ、削除のボタンをクリックします。
削除のもう1つの方法：サイドバーで削除するセクションまたはブロックをクリックし、「セクションを削除」または「ブロックを削除」をクリックします。

どちらの操作も、最後に [保存] をクリックする手順になっています。
パソコンの手順では、ボタンは絵のアイコンで示されていて、画像の説明にそれぞれ「非表示」「削除」と書かれています。

テーマブロック（テーマ内で定義されるブロック）には、次の動作が見られる場合があると書かれています。

一部のセクションには必須のブロックがあります。これらのブロックはカスタマイズしたり非表示にしたりすることはできますが、並べ替えや削除はできません。

削除できないブロックがあっても、こうした必須のブロックであれば、ヘルプの記載どおりの動作です。
あとで使うかもしれないものを削除する前に、テーマを複製した控えがあるかどうかを見ておくと安心です。

保存と、元に戻せる範囲

セクションとブロックの手順は、どれも最後に [保存] をクリックして終わる形になっています。
保存する前と後とで、戻せるものが変わる点は、先に知っておきたいところです。

公式ヘルプによると、未保存のカスタマイズは、メニューバーの元に戻す/やり直すのボタンで、戻したりやり直したりできます。
そのうえで、保存したあとの扱いについて、次の一文が添えられています。

変更を保存すると、元に戻したりやり直したりすることはできなくなります。

削除の手順の中では、公開済みのテーマを編集している場合は、「公開」をクリックして変更を保存し、ストアで公開するとも書かれています。
保存する前に、プレビューウィンドウ（テーマが表示される画面）で仕上がりを一度見てください。
そうしておくと、「元に戻す」が使えなくなってから慌てずに済むと思います。

テーマによって違うところ

ここまでの手順どおりに進めても、画面に出てくるセクションの名前が、記事の例と違うことがあると思います。
公式ヘルプは、使えるセクションとブロックがテーマによって違うことを、次のように書いています。

テーマエディタで利用できるセクションとブロックは、使用しているテーマとそのバージョンによって異なります。

利用できるオプションについては、テーマのドキュメント（テーマの説明書）を参照するよう案内されています。
メニューバーのテーマ名をクリックすると、[ドキュメントを表示] からテーマのドキュメントを開けると書かれています。
追加したセクションに必要な設定やオプションが含まれていない場合は、テーマコードを編集するか、テーマの開発者にサポートを依頼できると書かれています。

記事に出てくるメール登録などのセクション名はヘルプの例なので、ご自身のテーマのサイドバーに出ている名前で読み替えてください。

公式に書かれていないこと

次のことは、出典にした Shopify ヘルプセンターの6ページには書かれていません。

どのセクションをどの順に並べるとよいか、という並べ方の目安は書かれていません。
非表示にしたセクションやブロックの設定とコンテンツが、そのまま残るかどうかは書かれていません。
非表示にしたセクションやブロックを、もう一度表示する手順は書かれていません。キーボードショートカット（キー操作の近道）の一覧に「表示/非表示」の項目があるところまでです。
削除したセクションやブロックを、保存したあとで取り戻せるかどうかは書かれていません。保存すると元に戻す/やり直すが使えなくなる、という記載までです。テーマを複製しておけば、変更を破棄してやり直せる、という記載はあります。
お使いのテーマにどのセクションとブロックがあるかの一覧は、6ページのどこにも載っていません。テーマのドキュメントを参照するよう案内されています。