Skip to content

商品リスト (Products)

商品リストパーツは、指定した商品をページ上に一覧表示するためのパーツです。商品の選択方法(自動または手動)や表示形式を柔軟に設定できます。

設定タブ

商品リストパーツを選択すると、設定エリアに以下のタブが表示されます。

  • コンテンツ: 表示する商品やタイトルなどを設定します。
  • スタイル: 表示形式(リスト/グリッド)、列数、背景色、余白などを設定します。
  • メニュー: モバイルメニューや追従メニューに表示するかどうかを設定します。

コンテンツ設定

「コンテンツ」タブでは、主に表示する商品を定義します。

商品リスト コンテンツタブ (コンテンツタブ全体のスクリーンショット)

1. タイトル

パーツの上部に表示されるタイトルを入力します。不要な場合は空欄にします。

2. 商品の選択方法(自動更新)

表示する商品をどのように選ぶかを設定します。

  • 手動 (Manual): 表示したい商品を個別に検索し、選択します。一度選択した商品は固定され、自動では更新されません。
  • 自動 (Automatic): 設定した条件に一致する商品が自動的に表示されます。Rakuboの商品情報や在庫状況が変更されると、表示される商品も動的に変わる可能性があります。

自動更新設定 (「手動」と「自動」を選択するスイッチまたはラジオボタンのスクリーンショット)

3. 表示する商品の設定

選択方法(手動/自動)に応じて、表示する商品を決定します。

商品を検索して選択する:

  1. 検索条件の設定: 「条件検索」「セールで検索」「商品グループで検索」ボタンを使って、候補となる商品を絞り込みます。これらのフィルターの詳しい使い方は、共通ガイド「商品検索の使い方」を参照してください。 商品検索フィルター (条件検索、セール、商品グループのフィルターボタン群のスクリーンショット)

  2. 商品検索の実行: 条件を設定したら「商品を検索」ボタンをクリックします。

  3. 検索結果の確認: 「検索結果」タブに、条件に一致した商品が表示されます。

  4. 商品の選択: 表示したい商品の「+選択」ボタンをクリックするか、商品を「選択中」エリアにドラッグ&ドロップします。 検索結果から選択 (検索結果タブと選択ボタン/ドラッグ操作を示すスクリーンショット)

  5. 選択中リストの確認と並び替え: 「選択中」タブに切り替えると、ページに表示される予定の商品リストを確認できます。リスト内の商品をドラッグ&ドロップして、表示順序を自由に変更できます。 選択中リストと並び替え (選択中タブとドラッグ&ドロップによる並び替え操作を示すスクリーンショット)

  6. 選択解除: 「選択中」リストで、不要になった商品の右端にある「×」ボタンをクリックすると、リストから削除できます。

スタイル設定

「スタイル」タブでは、商品リストの見た目を調整します。

商品リスト スタイルタブ (スタイルタブ全体のスクリーンショット)

  • 表示形式: 商品の表示方法を選択します(例: グリッド表示、リスト表示)。
  • 列数 (Grid Columns): グリッド表示の場合、1行あたりに表示する商品数を設定します (PC/SPそれぞれ設定可能か要確認)。
  • 画像アスペクト比: 商品画像の縦横比を固定するかどうかを設定します。
  • 情報表示: 商品名、価格、レビューなどの情報を表示するかどうかを個別に設定します。
  • 背景: パーツ全体の背景色や背景画像を設定します。
  • パディング・マージン: パーツの内側・外側の余白を調整します。
  • 枠線: パーツに枠線を追加します。
  • … その他、フォントサイズ、文字色などのスタイルオプションがあれば記載。

メニュー設定

「メニュー」タブでは、この商品リストパーツをモバイルメニューや追従メニューに含めるかどうかを設定します。

設定方法の詳細は「6. メニュー設定(モバイル・追従)」ガイドを参照してください。


これで商品リストパーツの設定は完了です。他のパーツについても同様に設定を進めていきましょう。