コンテンツを追加 – 製品

管理者 サイドバーで、Content/Elements/Blocks ​に移動します。

「Add New Block」をクリックします。

Block Title と Identifier を入力します。

ブロックを使用できる Store View を選択します。

下にスクロールして、コンテンツプレビュー領域の Edit with Page Builder または内側をクリックして、Page Builder ワークスペースを開きます。

Page Builder パネルで Add Content を展開し、Products プレースホルダーをステージにドラッグします。

{width="600" modal="regular"}

製品リストがページ上にどのように表示されるかを決定するには、次のいずれかの外観タイプを選択します。

{width="300"}

製品カルーセルを選択する場合は、 カルーセル設定も設定する必要があります。

Select Products By しくは、製品の選択方法を選択します。

商品は、カテゴリ、SKU、条件で選択できます。 これらのオプションは相互に排他的です。 例えば、「カテゴリ」オプションを選択せず、カテゴリセレクターを使用してから「条件」オプションに切り替えて条件を追加することができません。 製品は、これら 3 つのオプションのうち 1 に設定した項目にのみ基づいて選択されます。

• Category – 選択したカテゴリを使用する製品を表示するには、このオプションを選択します。

  {width="500"}

  このオプションを選択すると、Category セレクターが表示されます。 矢印をクリックしてドリルダウンし、表示する製品のカテゴリを選択します。 例えば、Commerce のサンプルデータでドリルインし、Women/Tops/Tees を選択すると、そのカテゴリのすべての製品が表示されます。

  {width="500"}

• SKU - 1 つ以上の SKU を使用して製品を表示する場合は、このオプションを選択します

  このオプションを選択すると、表示する SKU のコンマ区切りのリストを入力する必要がある、Product SKUs のテキストボックスが表示されます。

  {width="500"}

• Condition – 定義した 1 つ以上の条件に従って製品を表示する場合は、このオプションを選択します。

  選択した場合、製品の選択に条件を追加するためのツールを使用できます。 例えば、性別が「Unisex」に設定されている製品のみを選択できます。

  {width="500"}

  note note
  NOTE
  「カテゴリ」または「SKU」オプションを選択すると、Position の Sort By のオプションが表示されます。 この並べ替えオプションを使用すると、製品はカタログに表示されるのと同じ順序で表示されます。
  「カテゴリ」オプションの場合、位置で並べ替えると、カタログに表示されるのと同じ順序で製品が表示されます。 SKU オプションの場合、位置で並べ替えると、「Product SKUs」テキストボックスに入力した順序で製品が表示されます。

Sort By に、リスト内の製品の並べ替え順を選択します。

{width="300"}

カルーセルまたはグリッドに Number of Products to Display を入力します。

値は、1 ～ 999 の範囲で指定します。 デフォルトは、グリッドの場合は 5、カルーセルの場合は 20 です。

カルーセル内での製品の表示方法を決定するには、Carousel Mode のオプションを選択します。

これら 2 つのモードを切り替えても、Infinite Loop 設定は常に連続モードで Yes に設定され、フィールドが無効になっている場合を除き、その他のカルーセル設定は保持されます。

{width="600" modal="regular"}

必要に応じて、Autoplay オプションを Yes に設定します。

自動再生を有効にすると、ページが読み込まれたときに、カルーセルが自動的にスクロールを開始します。 デフォルト設定（No）のままにした場合、顧客はスライドナビゲーション（ドットまたは矢印）をクリックして各スライドを順番に表示する必要があります。

この機能を有効にした場合は、Autoplay Speed と入力して、各スライド間の遅延をミリ秒単位で指定します。 デフォルト値は 4000 （4 秒）です。

必要に応じて、Infinite Loop オプションを Yes に設定します。

無限ループを有効にすると、ページが開いている間、スライド ショーは無限に再生されます。 初期設定（No）のままにすると、スライドショーは 1 回だけ再生されます。

必要に応じて、Show Arrows オプションを Yes に設定します。

このオプションを有効にすると、各スライドに 次へ と 前へ のナビゲーション矢印が左右に表示されます。 デフォルト設定（No）のままにすると、ナビゲーション矢印はスライドに表示されません。

必要に応じて、Show Dots オプションを No に設定します。

デフォルト設定（Yes）に設定すると、カルーセルスライダーの下部にナビゲーションドットが表示されます。 この設定を無効にした場合、カルーセルスライダーにナビゲーションドットは表示されません。

親コンテナ内の商品リストの位置を制御するには、Alignment のいずれかを選択します。

Products コンテナの 4 つの側面すべてに適用される Border スタイルを設定します。

None 以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。

（オプション）コンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。

複数のクラス名はスペースで区切ります。

Products コンテナの外側の余白と内側のパディングを決定する Margins and Padding の値をピクセル単位で入力します。

対応する値を図に入力します。