＊ご注意：スタンダードページは現在、Ultra Chic テンプレートでのみ利用できます。また、レイアウトの仕様上、Layout Engine をご利用中で HTML エディターに 「products.liquid」 ファイルが存在する場合は、スタンダードページをご利用いただけません。
SHOP Builder で作成したカスタムページは「スタンダードページ」に対応しています。スタンダードページを使用すると、より幅広く詳細に調整したレイアウトを、すべてのカスタムページに適用できます。商品一覧ページのレイアウトでは、ブロックを自由に組み合わせ、用途に応じて配置を調整できます。さらに、SEO 対策に適したテキストを追加することで、SEO 効果の向上も期待できます。
本記事では、以下の内容についてご説明します：
１、「商品一覧ページレイアウト」への移動
SHOPLINE 管理画面で、「ストアデザイン ＞ ストアページ ＞ スタンダードページ 」に移動し、「商品一覧ページ」の右側にある「編集」をクリックします。
商品一覧ページのレイアウトの編集画面が表示されます。
プレビューエリア上部のドロップダウンメニューをクリックすると、プレビューする商品一覧ページ（「SHOPLINE 管理画面 ＞ 商品とカテゴリ ＞ カテゴリ」で設定した「商品カテゴリ」ページ）を切り替えられます。
＊ご注意：
- 商品一覧ページレイアウトのエディターには、SEO 設定機能はありません。
-
Layout Engine を有効にしている場合、スタンダードページを利用することはできません。スタンダードページでレイアウトを編集するには、「products.liquid」 ファイルを削除する必要があります。
２、商品一覧ページレイアウトの調整
商品一覧ページレイアウトのエディターでは、「お知らせバー」、「ヘッダー」、「ブロック」、「フッター」を編集できます。お知らせバー、ヘッダー、フッターの操作方法や表示効果は SHOP Builder と同様のため、本セクションでは主にブロック設定の調整方法について説明します。
商品一覧ページのレイアウトでは、ブロックは固定ブロックとカスタマイズ可能なブロック（グレー背景で表示）に分かれます。固定ブロックは位置を変更できませんが、カスタマイズ可能なブロックは位置の変更、追加、削除が可能です。
1. 固定ブロック
固定ブロックは位置を変更したり、追加または削除したりすることはできません。内容に関する設定のみ変更できます。
A. パンくずリスト
＊ご注意：この機能は PC 版にのみ対応しており、モバイル版には対応していません。
商品一覧ページのパンくずリストを設定できます。「パンくずリストを表示」トグルをオンにすると、顧客が各商品カテゴリを閲覧する際に、ページ上部にアクセス経路が表示されます。配置は左寄せ、中央揃え、右寄せの 3 種類から選択できます。
-
パンくずリストの表示例：
B. バナー
バナーを設定するには、「SHOPLINE 管理画面 ＞ 商品とカテゴリ ＞ カテゴリ」に移動し、編集するカテゴリを選択して設定してください。「設定へ進む」をクリックすると、上記の設定画面に直接移動できます。バナーの設定方法について詳しくは、商品カテゴリの設定をご参照ください。
C. サイドバー
- カテゴリメニュー
＊ご注意：この機能は PC 版にのみ対応しており、モバイル版には対応していません。モバイル版のサイドバーを調整する場合は、「ストア共通設定」で設定してください。
「カテゴリメニュー」のプルダウンを開くと、「カテゴリメニューを表示」トグルが表示されます。トグルをオンにすると、カテゴリメニューがストアフロントに表示され、オフにすると非表示になります。
- ストアフィルター
ストアフィルターを設定するには、「SHOPLINE 管理画面 ＞ 商品とカテゴリ ＞ カテゴリ」に移動し、「ストアフィルターを設定」をクリックします。「設定へ進む」をクリックすると、上記の設定画面に直接移動できます。ストアフィルターの設定方法について詳しくは、商品カテゴリの高度なフィルター設定をご参照ください。
D. タイトル
「タイトルを表示」トグルをオンにすると、商品カテゴリのタイトルが表示されます。トグルをオフにすると、タイトルは非表示になります。タイトルの文字揃えは左揃え、中央揃え、右揃えから選択できます。
E. 並べ替え
商品の並べ替えオプションの表示言語やスタイルを調整できます。
表示スタイルは、テキスト、アイコン、アイコン＋テキストの３種類から選択できます。
2. カスタマイズ可能なブロック
カスタマイズ可能なブロックは、上下の表示順の変更や内容設定の編集ができるほか、追加や削除も可能です。このうち、「説明」と「商品リスト」は移動のみ可能で、削除できません。
A. 説明
各商品一覧ページに、任意の説明文を追加し、マーケティングや SEO 対策に活用できます。
-
「商品カテゴリページ」に追加する：
「SHOPLINE管理画面 ＞ 商品とカテゴリ ＞ カテゴリ」に移動し、説明を追加する商品カテゴリの右側にある「編集」をクリックします。 -
「すべての商品ページ」に追加する：
「ストア管理画面 ＞ ストアデザイン ＞ ストアページ」に移動し、「すべての商品」の右側にある「編集」をクリックします。
「カテゴリ説明」または「説明」欄に説明内容を入力し、「更新」をクリックすると追加できます。
- 説明文の表示例：
B. 商品リスト
商品リストの表示言語、商品画像の比率、１行あたりの商品数などの設定を調整できます。
- 言語：対応言語から選択できます。
- 商品画像の比率：長方形（3:4）または正方形（1:1）から選択できます。
- 1 行あたりの商品数（PC版）：１〜５個から選択できます。
- 1 行あたりの商品数（モバイル版）：１〜 ２個から選択できます。
C. その他のカスタマイズ可能なブロック
その他に追加、削除できるカスタマイズ可能なブロックは、以下の既存の SHOP Builder ブロックです。
＊ご注意：これらのブロックについて詳しくは、各ブロック名をクリックして FAQ をご参照ください。
３、ページの公開
商品一覧ページのレイアウト調整が完了したら、設定を反映するために公開する必要があります。画面右上にある「公開」をクリックします。
初めて商品一覧ページのレイアウトを編集する場合、このレイアウトがすべての商品一覧ページ、商品カテゴリページ、検索結果ページに適用されることをシステムから通知されます。適用すると、元の設定が上書きされますのでご注意ください。「確認 」をクリックすると、レイアウトが公開されます。
関連記事
この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版を参照してください。
コメント