商品リスト (Products)
商品リストパーツは、指定した商品をページ上に一覧表示するためのパーツです。商品の選択方法(自動または手動)や表示形式を柔軟に設定できます。
設定タブ
商品リストパーツを選択すると、設定エリアに以下のタブが表示されます。
- コンテンツ: 表示する商品やタイトルなどを設定します。
- スタイル: 表示形式(リスト/グリッド)、列数、背景色、余白などを設定します。
- メニュー: モバイルメニューや追従メニューに表示するかどうかを設定します。
コンテンツ設定
「コンテンツ」タブでは、主に表示する商品を定義します。
(コンテンツタブ全体のスクリーンショット)
1. タイトル
パーツの上部に表示されるタイトルを入力します。不要な場合は空欄にします。
2. 商品の選択方法(自動更新)
表示する商品をどのように選ぶかを設定します。
- 手動 (Manual): 表示したい商品を個別に検索し、選択します。一度選択した商品は固定され、自動では更新されません。
- 自動 (Automatic): 設定した条件に一致する商品が自動的に表示されます。Rakuboの商品情報や在庫状況が変更されると、表示される商品も動的に変わる可能性があります。
(「手動」と「自動」を選択するスイッチまたはラジオボタンのスクリーンショット)
3. 表示する商品の設定
選択方法(手動/自動)に応じて、表示する商品を決定します。
商品を検索して選択する:
-
検索条件の設定: 「条件検索」「セールで検索」「商品グループで検索」ボタンを使って、候補となる商品を絞り込みます。これらのフィルターの詳しい使い方は、共通ガイド「商品検索の使い方」を参照してください。
(条件検索、セール、商品グループのフィルターボタン群のスクリーンショット)
-
商品検索の実行: 条件を設定したら「商品を検索」ボタンをクリックします。
-
検索結果の確認: 「検索結果」タブに、条件に一致した商品が表示されます。
-
商品の選択: 表示したい商品の「+選択」ボタンをクリックするか、商品を「選択中」エリアにドラッグ&ドロップします。
(検索結果タブと選択ボタン/ドラッグ操作を示すスクリーンショット)
-
選択中リストの確認と並び替え: 「選択中」タブに切り替えると、ページに表示される予定の商品リストを確認できます。リスト内の商品をドラッグ&ドロップして、表示順序を自由に変更できます。
(選択中タブとドラッグ&ドロップによる並び替え操作を示すスクリーンショット)
-
選択解除: 「選択中」リストで、不要になった商品の右端にある「×」ボタンをクリックすると、リストから削除できます。
表示条件を設定する:
-
条件の設定: 「条件検索」「セールで検索」「商品グループで検索」ボタンを使って、表示したい商品の条件を設定します。これらのフィルターの詳しい使い方は、共通ガイド「商品検索の使い方」を参照してください。ここで設定した条件に常に一致する商品が自動的に表示されます。
(自動選択モード時のフィルター設定エリアのスクリーンショット)
-
表示順序: 自動選択の場合、商品の表示順序は通常、指定した条件(例: 優先度、価格、新着順など、条件検索内で設定可能な場合)に基づいて自動的に決まります。手動での並び替えはできません。
-
最大表示件数: (※設定オプションがあれば記載) 表示される商品の最大件数を指定できます。
スタイル設定
「スタイル」タブでは、商品リストの見た目を調整します。
(スタイルタブ全体のスクリーンショット)
- 表示形式: 商品の表示方法を選択します(例: グリッド表示、リスト表示)。
- 列数 (Grid Columns): グリッド表示の場合、1行あたりに表示する商品数を設定します (PC/SPそれぞれ設定可能か要確認)。
- 画像アスペクト比: 商品画像の縦横比を固定するかどうかを設定します。
- 情報表示: 商品名、価格、レビューなどの情報を表示するかどうかを個別に設定します。
- 背景: パーツ全体の背景色や背景画像を設定します。
- パディング・マージン: パーツの内側・外側の余白を調整します。
- 枠線: パーツに枠線を追加します。
- … その他、フォントサイズ、文字色などのスタイルオプションがあれば記載。
メニュー設定
「メニュー」タブでは、この商品リストパーツをモバイルメニューや追従メニューに含めるかどうかを設定します。
設定方法の詳細は「6. メニュー設定(モバイル・追従)」ガイドを参照してください。
これで商品リストパーツの設定は完了です。他のパーツについても同様に設定を進めていきましょう。