Page Builder ウォークスルー（パート 3）：カタログのコンテンツ

日 Admin サイドバー、に移動 Content > Elements>Pages.

の検索 シンプルなページ 最初の練習で作成し、2 番目の練習で修正した内容を選択します Edit が含まれる Action ​列。

を展開 この Content セクションでクリック Edit with Page Builder またはコンテンツプレビュー領域内です。

が含まれる Page Builder 下のパネル Layout、ドラッグ：Row ​ステージの一番上に移動します。

が含まれる Page Builder パネル、展開 Add Content をドラッグします。 Products 新しい行へのプレースホルダー。

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

空の products コンテナにポインタを合わせてツールボックスを表示し、 設定 （ {width="20"} ） アイコンをクリックします。

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

の場合 Select Products By、を選択 Condition.

条件を追加します。

• 「」をクリックします 追加 （ ） アイコンをクリックします。

• 次の下 Product Attribute、を選択​ Category.

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

• を完了する Category is… 条件の一部を作成するには、その他（…）アイコンをクリックし、 選択 （ ） アイコンをクリックします。

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

• カテゴリツリーで、にドリルダウンします 女性 > トップス カテゴリを選択し、  ティー チェックボックス。

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

• チェックマーク（ ） アイコンをクリックします。

  対応するカテゴリ ID がフィールドに表示され、条件が完了します。

を入力 Number of Products to Display.

デフォルトでは、リストには 5 つの製品が表示されます。

必要に応じて、残りの設定を完了します。

必要に応じて、の最後にあるフィールドの説明を使用します。 コンテンツを追加 – 製品 を参照してください。

完了したら、 Save 設定を保存し、に戻ります Page Builder ワークスペース。

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

ステージの右上隅にあるをクリックします 全画面表示を閉じる （ {width="20"} ） アイコンをクリックします。

このアイコンをクリックすると、に戻ります Content ​プレビューが表示されたページの「」セクション。

右上隅のをクリックします Save 矢印と選択 Save & Close.

日 Admin サイドバー、に移動 Catalog > Products.

この例で使用できる簡単な製品を見つけて、編集モードで開きます。

下にスクロールして展開 この Content セクション。

次の Description ​を選択し、Edit with Page Builder.

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

商品の説明が以前に次の値なしで入力された場合 Page Builder現在の説明がHTMLとして HTMLコード コンテナ。 Luma テーマを使用すると、製品の説明が「詳細」タブに表示されます。

が含まれる Page Builder 下のパネル Layout、ドラッグ：Row ​ステージに移動し、HTMLコードコンテナの下に配置します。

行が正しい位置にあるときに表示される赤いガイドラインを探します。

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

が含まれる Page Builder パネル、展開 Media をドラッグします。 Video 新しい行へのプレースホルダー。

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

空のビデオコンテナにカーソルを合わせてツールボックスを表示し、 設定 （ {width="20"} ） アイコンをクリックします。

{width="500" modal="regular"}

を入力 Video URL.

ビデオは次のいずれかでホストできます YouTube または Vimeo. この例のビデオは、YouTubeの次の URL で見つかります。

https://www.youtube.com/watch?v=ZpFrNyD4100

{width="500" modal="regular"}

を入力 Maximum Width ビデオディスプレイのピクセル数。

このオプションを空白のままにすると、ビデオは使用可能なスペースいっぱいに表示されます。

クリック Save 設定を保存し、に戻ります Page Builder ワークスペース。

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

ステージの右上隅にあるをクリックします 全画面表示を閉じる （ {width="20"} ） アイコンをクリックします。

このアイコンをクリックすると、に戻ります Content ​プレビューが表示されたページの「」セクション。

右上隅のをクリックします Save 矢印と選択 Save & Close.

日 Admin サイドバー、に移動 Catalog > Products.

右上隅のをクリックします。 Add Product.

次のプロパティを持つ製品を作成します。

• ​

  属性セット: Default

• Product Name：マイ製品

• ​

  SKU: Tutorial

• ​

  Price: 75.00

• ​

  Quantity: 100

• Stock Status：在庫あり

• ​

  Weight: 1

• Categories：女性/ トップス / T 型

右上隅のをクリックします Save 矢印と選択 Save & Close.

日 Admin サイドバー、に移動 Stores > Attributes>Product.

右上隅のをクリックします。 Add New Attribute.

を入力 Default Label 属性のを参照してください。

この例では、を使用します My Page Builder Attribute をラベルに使用します。

を設定 Catalog Input Type for Store Owner 対象： Page Builder.

カスタム アトリビュートを作成する場合、アプリケーションに最適なエディタを次のいずれかとして指定できます Page Builder または標準の WYSIWYG Text Editor.

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

を展開 この Advanced Attribute Properties を選択し、次の設定を行います。

• Attribute Code：スペースの代わりにハイフンを使用して、小文字で属性コードを入力します。 この例では、を使用します my_page_builder_attribute.

• Scope：デフォルト値を使用します。 Store View.

• Default Value：属性のデフォルト値を入力します。

• ​

  Unique Value: No

• ​

  Add to Column Options: No

• ​

  Use in Filter Options: Yes

が含まれる Attribute Information ​左側のパネルで、Storefront Properties ​さらに、次の設定を行います。

• ​

  Use for Promo Rule Conditions: Yes

• ​

  Visible on Catalog Pages on Storefront: Yes

• ​

  Used in Product Listing: Yes

完了したら、 Save Attribute.

上記の手順を繰り返して、同じ基本プロパティを持ち、テキストエディター入力タイプが次のような 2 番目の属性を作成します。

• Default Label：マイテキストエディターの属性

• Catalog Input Type for Store Owner：テキストエディター

• ​

  属性コード: my_text_editor_attribute

日 Admin サイドバー、に移動 Stores > Attributes>Attribute Set.

この例では、新しい属性を一時的にに追加します。 default 属性セット。 この演習の最後では、カタログに影響を与えないように、属性セットから属性を削除します。

の検索 Default ​リストで設定した属性をダブルクリックして、編集モードで開きます。

が含まれる 未割り当て属性 リストを表示し、作成した新しい属性を見つけて、 Groups ​列、下​ Content.

内の属性の場所 Groups 列は、ページ上の表示場所を決定します。

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

クリック Save 属性セット リストに戻ります。

プロンプトが表示されたら、 Cache Management ページの上部にあるリンクをクリックして、無効なキャッシュを更新します。

日 Admin サイドバー、に移動 Catalog > Products.

製品グリッドで、を検索します マイ製品 そして、編集モードで開きます。

下にスクロールして展開 この Content セクション。

セクションの上部には、製品コンテンツの 2 つの標準属性があります。

• 簡単な説明（標準の WYSIWYG を使用） エディター.
• 説明。この中には、 Page Builder プレビュー。

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

セクションの下半分までスクロールすると、作成して割り当てた属性が 2 つあります。

• マイ Page Builder 属性。この中には、 Page Builder プレビュー。
• テキスト エディタの属性 ​標準の WYSIWYG エディターを使用する。

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

が含まれる テキスト エディタの属性 エディタ、入力 Text Editor Attribute placeholder text.

• 右上隅のをクリックします Save 矢印と選択 Save & Close.

の場合 マイページビルダー属性 ​を選択し、 Edit with Page Builder 説明テキストを追加します。

• が含まれる Page Builder パネル、展開 Elements をドラッグします。 Text object ステージに移動します。

• Enter Page Builder attribute placeholder text.

• ステージの右上隅にあるをクリックします 全画面表示を閉じる （ {width="20"} ） アイコンをクリックします。

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

Scroll up to Description ​を選択し、 Edit with Page Builder ​をクリックし、前の手順と同じ方法を使用して任意のテキストを追加します。

製品ページの右上隅にある「 Save 矢印と選択 Save & Close.

プロンプトが表示されたら、 Cache Management ページ上部のメッセージ内のリンクをクリックし、無効なキャッシュを更新します。

ストアフロントのサンプル製品ページに移動します。

この例では、製品は上部ナビゲーションの女性/ トップス / T 型の下にあります。

にスクロール ダウンします。 マイページビルダー属性 情報。

製品ページ上の属性の位置は、テーマによって決定されます。 Luma テーマでは、新しい属性は製品の説明の直後に配置されます。

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