Shopifyの/collections/allをカスタマイズ｜タイトル・説明文をテーマエディターから変更

今回の課題と完成形

最初に、どの問題をどのように解決するのかを整理します。目標は、コードを毎回編集せず、テーマエディターから商品一覧ページの表示内容を変更できる状態です。

collections/allは特殊な一覧ページ

/collections/allは、ストア内の商品をまとめて表示するShopifyのコレクションURLです。通常のコレクションと同じテンプレートを利用しますが、専用の説明文をどこで管理するかが分かりにくい場合があります。

テーマエディターから変更可能にする

• /collections/allだけ独自のタイトルを表示する
• タイトルの下へ独自の説明文を表示する
• 未入力ならテーマ本来のタイトル・説明文を使う
• 通常のコレクションページへ影響させない

既存処理を残しながら、allの場合だけ設定値を優先することが今回の基本方針です。

表示元ファイルを特定する

Shopifyテーマでは、画面上のHTMLからLiquidファイル名が直接分からない場合があります。DevTools、JSONテンプレート、セクションファイルの順に確認します。

DevToolsでセクションIDを見る

商品一覧の見出しを右クリックし、「検証」を開きます。親要素を辿ると、次のようなIDが見つかります。

<div id="shopify-section-template--27807520817325__main">

末尾の__mainはセクションIDの手掛かりです。ただし、これだけでsections/main.liquidと判断せず、テンプレート側の定義を確認します。

URLからテンプレートを判断する

対象URLは/collections/allなので、「オンラインストア → テーマ → コードを編集」からtemplates/collection.jsonを開きます。商品詳細用のproduct.jsonではありません。

typeからLiquidへ辿る

collection.jsonに次の定義があれば、mainというセクションIDがmain-collectionタイプを読み込んでいます。

{
  "sections": {
    "main": {
      "type": "main-collection"
    }
  }
}

JSONテンプレートのtypeは、拡張子を除いたセクションファイル名です。この例で編集対象になるのはsections/main-collection.liquidです。

テンプレート構造を理解する

ファイルの関係を理解すると、別ページでも同じ手順で表示元を探せます。テーマ名やファイル名を暗記するより、参照の流れを覚えることが大切です。

JSONはセクションを指定する

JSONテンプレートは、ページで使うセクションと並び順、各セクションの設定値を保持します。HTMLやLiquidの本体は、typeで参照されたセクションファイルに記述します。

追跡順を覚える

DevToolsの __main
↓
templates/collection.json の "main"
↓
"type": "main-collection"
↓
sections/main-collection.liquid

一時表示で対応を確認する

本当に対象ファイルか確認したいときは、複製テーマで次の値を一時表示します。

<p>template: {{ template.name }}</p>
<p>page_type: {{ request.page_type }}</p>
<p>section.id: {{ section.id }}</p>

section.idがDevToolsのIDと対応すれば、対象セクションを確認できます。確認後はデバッグ用コードを削除してください。

schemaへ設定を追加する

対象のmain-collection.liquidを特定したら、セクションのschemaへタイトルと説明文の入力欄を追加します。

settings配列へ2項目を加える

{% schema %}内にある既存の"settings": [の先頭付近へ、次の2項目を追加します。配列内のカンマ位置にも注意してください。

"settings": [
  {
    "type": "text",
    "id": "all_title",
    "label": "商品一覧のタイトル"
  },
  {
    "type": "richtext",
    "id": "all_description",
    "label": "商品一覧の説明文"
  }
]

textとrichtextを使い分ける

• text：短いタイトルやラベルに使う
• richtext：段落やリンクなどを含む説明文に使う

保存後、テーマエディターで対象のコレクションセクションを開くと、「商品一覧のタイトル」と「商品一覧の説明文」が表示されます。

設定値はsection.settingsで読む

schemaのidは、Liquidでsection.settings.all_titleとsection.settings.all_descriptionとして取得できます。IDは表示名ではなく、コードから参照する識別子です。

タイトルを切り替える

見出しは、/collections/allかつ入力値がある場合だけ独自タイトルへ切り替えます。それ以外は元のタイトルを維持します。

allのときだけ設定値を使う

元の{{ heading_collection.title | escape }}を削除せず、else側へ残します。

{% comment %}
  /collections/all のタイトルをテーマエディターから変更する。
{% endcomment %}
<h1 class="collection-filter-heading__title">
  {% if collection.handle == 'all' and section.settings.all_title != blank %}
    {{ section.settings.all_title | escape }}
  {% else %}
    {{ heading_collection.title | escape }}
  {% endif %}
</h1>

2つの条件を確認する

• collection.handle == 'all'：すべての商品ページか
• section.settings.all_title != blank：独自タイトルが入力済みか

両方が真の場合だけ設定値を表示します。未入力時に元のタイトルへ戻るため、空のH1を出力しません。

escapeでタイトルを出力する

テキスト設定のタイトルにはescapeを適用し、HTMLとして解釈されない安全な文字列として出力します。

説明文を切り替える

説明文もタイトルと同じ条件で切り替えます。通常のコレクションでは、既存のheading_collection.descriptionを使い続けます。

独自説明文を優先する

{% comment %}
  /collections/all の説明文をテーマエディターから変更する。
{% endcomment %}
{% if collection.handle == 'all' and section.settings.all_description != blank %}
  <div class="collection-filter-heading__description rte">
    {{ section.settings.all_description }}
  </div>
{% elsif heading_collection.description != blank %}
  <div class="collection-filter-heading__description rte">
    {{ heading_collection.description }}
  </div>
{% endif %}

elsifで既存表示へ戻す

all以外、または独自説明文が空の場合は、既存のコレクション説明文を確認します。独自処理の対象外でも元の表示を壊さないことが重要です。

テーマエディターで入力する

• 「オンラインストア → テーマ → カスタマイズ」を開く
• 上部のページ選択からコレクションを表示する
• 対象のコレクションセクションを開く
• 追加したタイトルと説明文を入力して保存する

管理方法を使い分ける

同じ説明文でも、メタフィールドとsection schemaでは管理場所と用途が異なります。表示内容の性質に合わせて選びます。

メタフィールドが向く内容

商品の素材、コレクション固有の補足、記事ごとの情報など、コンテンツ自体に紐づくデータはメタフィールドが適しています。複数テーマや別セクションから同じ値を使う場合にも便利です。

schemaが向く内容

セクションの見出しや案内文など、ページの見た目を確認しながら編集したい内容はsection schemaが扱いやすくなります。今回はこちらに該当します。

テーマ更新へ備える

テーマコードの直接編集は、更新時に自動で引き継がれない場合があります。変更範囲の上に目的を示すLiquidコメントを置き、複製テーマやGitで差分を管理してください。

公開前は、/collections/all、通常のコレクション、未入力状態の3つを確認します。コードエラーが出た場合は、schemaのカンマ、ID名、endifの対応を見直します。

まとめ

/collections/allのタイトルと説明文をテーマエディターから変更する流れをまとめます。

• DevToolsでshopify-section-...__mainを確認する
• URLからtemplates/collection.jsonを選ぶ
• typeからsections/main-collection.liquidへ辿る
• schemaへtextとrichtextの設定を追加する
• collection.handle == 'all'で対象ページを限定する
• 未入力時と通常コレクションでは既存表示へ戻す
• 独自変更には目的を示すコメントを残す

Shopifyテーマの表示元を探すときは、「JSONテンプレートのセクションID → type → Liquidファイル」という関係を確認します。この流れが分かれば、商品や固定ページなど別のテンプレートでも、対象ファイルを判断しやすくなります。

参考：Shopify JSON templates、Section schema、Input settings