コンテンツを追加 – 製品

日 Admin サイドバー、に移動 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、条件で選択できます。 これらのオプションは相互に排他的です。 例えば、「カテゴリ」オプションを選択せず、カテゴリセレクターを使用してから「条件」オプションに切り替えて条件を追加することができません。 製品は、設定した対象に基づいてのみ選択されます 1 これら 3 つのオプションのうち。

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

  {width="500"}

  このオプションを選択すると、が表示されます Category セレクター。 矢印をクリックしてドリルダウンし、表示する製品のカテゴリを選択します。 例： Commerce サンプルデータ、ドリルインおよび選択#サンプルデータ ドリルインおよび選択# 女性/ トップス / T 型 そのカテゴリのすべての製品を表示します。

  {width="500"}

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

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

  {width="500"}

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

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

  {width="500"}

  note note
  NOTE
  「カテゴリ」または「SKU」オプションを選択すると、が表示されます Sort By オプション Position. この並べ替えオプションを使用すると、製品はカタログに表示されるのと同じ順序で表示されます。
  「カテゴリ」オプションの場合、位置で並べ替えると、カタログに表示されるのと同じ順序で製品が表示されます。 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:

を Border products コンテナの 4 つの側面すべてに適用されるスタイル：

境界線のスタイルを Noneの場合は、次のボーダー表示オプションを入力します。

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

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

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

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