商品一覧ページおよび商品詳細ページのテンプレート設定方法 – SHOPLINE ヘルプセンター

商品一覧ページと商品詳細ページは複数のページテンプレートに対応しており、ストア全体で単一のレイアウトを使用する代わりに、特定の商品カテゴリや個別の商品ごとに異なるレイアウトを作成できます。

システムのデフォルトテンプレートに加えて、各ページタイプごとに最大20個のカスタムテンプレートを作成し、特定のカテゴリや商品に割り当てることができます。カスタムテンプレートが割り当てられていないカテゴリや商品は、自動的にデフォルトテンプレートのレイアウトを使用します。

この記事では、カスタムテンプレートの作成と管理、カテゴリや商品への割り当て方法、テンプレートの仕組みについて説明します。

デフォルトテンプレートとカスタムテンプレートの理解

すべての商品一覧ページと商品詳細ページにはデフォルトテンプレートが含まれています。また、カスタムテンプレートを作成することも可能です。

デフォルトテンプレート：システムに組み込まれており、削除や名前変更はできません。カスタムテンプレートが割り当てられていないカテゴリや商品は、自動的にデフォルトテンプレートのレイアウトを使用します。
カスタムテンプレート：各ページタイプ（商品一覧ページと商品詳細ページ）ごとに最大20個のカスタムテンプレートを作成し、特定のカテゴリや商品に割り当てることができます。

デフォルトテンプレートとカスタムテンプレートは同じページ構造を共有しており、固定エリアと本文エリアで構成されています。両者の違いは、本文エリアに配置されるパーツのみです。

共有パーツとテンプレート固有のパーツ

各テンプレートは固定エリアと本文エリアで構成されており、それぞれのエリアのパーツはテンプレート間で異なる動作をします：

固定エリア（共有パーツ）：トップアプリバー、商品アルバム、商品情報、フローティングアイコン、フローティングアクションバーなどのパーツはすべてのテンプレートで共有されており、デフォルトテンプレートでのみ編集可能です。カスタムテンプレートではこれらのパーツは読み取り専用で、デフォルトテンプレートと自動的に同期されます。
本文エリア（テンプレート固有のパーツ）：本文エリアに追加されたパーツは各テンプレート固有のものであり、各テンプレートは独立して本文エリアのパーツを管理します。あるテンプレートでの変更は他のテンプレートに影響しません。

注：お知らせバナーはページの上部に固定されており（位置は変更できません）、共有パーツです。デフォルトテンプレートでのみ編集可能で、カスタムテンプレートはデフォルトテンプレートからお知らせバナーの設定を自動的に継承します。

カスタムテンプレートの作成

商品一覧ページまたは商品詳細ページのカスタムテンプレートを作成するには：

Shopper Appエディターの上部にあるページセレクターをクリックし、商品一覧または商品詳細ページを選択してから、+ テンプレートを作成をクリックします。
テンプレートを作成パネルで、以下を設定します：
- テンプレート名：テンプレートの名前を入力します（最大50文字）。
- 基にするもの：新しいテンプレートの元となるテンプレートを選択します — デフォルトテンプレートまたは既存のカスタムテンプレート。
作成をクリックします。テンプレートが正常に作成されると確認メッセージが表示されます。

注：各ページタイプにつき最大20個のカスタムテンプレートを作成できます。この制限に達すると、追加のテンプレートを作成できなくなります。

商品一覧ページテンプレートへのカテゴリの割り当て

テンプレートを作成した後、そのテンプレートを特定の商品カテゴリに割り当てることで、該当カテゴリの商品一覧がそのテンプレートのレイアウトを使用するようにできます。

左側のメニューで、テンプレートの横にあるカテゴリを割り当てをクリックします。
未割り当てタブで、Shopper App販売チャネルの中から商品カテゴリを検索するか、リストから直接選択します（複数選択およびすべて選択が可能）。選択後、割り当てをクリックします。
選択したカテゴリは割り当て済みタブに移動します。
テンプレートからカテゴリを削除するには、割り当て済みタブに移動し、削除したいカテゴリを選択します（複数選択およびすべて選択が可能）、その後割り当て解除をクリックします。

注：カテゴリは一度に1つのテンプレートにのみ割り当てることができます。選択したカテゴリがすでに別のテンプレートに割り当てられている場合、現在のテンプレートに再割り当てするかどうかの確認が求められます。商品一覧ページの設定に関する詳細な手順については、"商品一覧ページのデザイン"を参照してください。

商品詳細ページテンプレートへの商品の割り当て

テンプレートを作成した後、特定の商品に割り当てて、その商品の商品詳細ページがテンプレートのレイアウトを使用するようにできます。

左側のメニューで、テンプレートの横にある商品を割り当てるをクリックします。
未割り当てタブで、Shopper App販売チャネルの中から商品を検索するか、リストから直接選択します（複数選択およびすべて選択が可能です）。選択後、割り当てるをクリックします。
選択した商品は割り当て済みタブに移動します。
テンプレートから商品を削除するには、割り当て済みタブに移動し、削除したい商品を選択します（複数選択およびすべて選択が可能です）、その後割り当て解除をクリックします。

注：商品は一度に1つのテンプレートにのみ割り当てることができます。選択した商品がすでに別のテンプレートに割り当てられている場合、現在のテンプレートに再割り当てするかどうかの確認が求められます。商品詳細ページの設定に関する詳細な手順については、"商品詳細ページのデザイン"を参照してください。

商品一覧ページおよび商品詳細ページのテンプレート管理

テンプレートを作成したら、テンプレート一覧でそれらを表示および管理できます：

デフォルトテンプレートは常に最初に表示され、その後にカスタムテンプレートが逆時系列（新しい順）で並べ替えられて表示されます。
カスタムテンプレートを修正するには、その上にカーソルを合わせて鉛筆アイコンをクリックします。

カスタムテンプレートを削除するには、その上にカーソルを合わせてゴミ箱アイコンをクリックし、削除を確認します。

注：カスタムテンプレートを削除すると、以前に割り当てられていたカテゴリや商品は自動的にデフォルトテンプレートに戻ります。テンプレートの名前を変更すると、テンプレートと割り当てられたカテゴリや商品の関連付けが切れる場合もあります。慎重に操作してください。

商品リストおよび商品詳細ページテンプレートに関する重要な注意事項

ボディエリアに追加されたパーツはテンプレート固有であり、各テンプレートごとに独立して管理されます。ボディエリアのパーツをテンプレート間で共有することは現在サポートされていません。これに対して、固定エリアのパーツ（トップアプリバー、商品アルバム、商品情報、フローティングアイコンなど）はすべてのテンプレートで共有され、デフォルトテンプレートでのみ修正可能です。
テンプレートの作成と割り当てはすべてのマーケットで利用可能です。個別のマーケットごとに独立したレイアウトを設定でき、独立したレイアウトを持たないマーケットは自動的にアプリデフォルトレイアウトを継承します。マルチマーケットレイアウトの詳細については、「マーケット別にアプリのレイアウトをカスタマイズする」を参照してください。

この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。