コンテンツを追加 – 製品

管理者 サイドバーで、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のサンプルデータでは、女性/ トップス / ティー​をドリルインして選択すると、そのカテゴリのすべての製品が表示されます。

  {width="500"}

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

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

  {width="500"}

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

  選択すると、製品の選択範囲に条件を追加するために使用できるツールがあります。 例えば、「性別」が「ユニセックス」に設定されている商品のみを選択できます。

  {width="500"}

  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つのモードを切り替えると、連続モードで常にYesに設定され、フィールドが無効になっている​ Infinite Loop ​設定を除き、他のカルーセル設定が保持されます。

{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​を選択します。

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

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

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

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

Margins and Padding​の値をピクセル単位で入力して、製品コンテナの外側の余白と内側の余白を決定します。

対応する値をダイアグラムに入力します。