Page Builder逐步解說第3部分：目錄內容

在​ 管理員 ​側邊欄上，移至​ Content > Elements>Pages。

尋找您在第一個練習中建立並在第二個練習中修改的​ 簡單頁面，並在​ Action ​欄中選取​ Edit。

展開 Content ​區段，然後按一下​ Edit with Page Builder ​或內容預覽區域內。

在​ Layout ​下方的Page Builder面板中，將​ Row ​拖曳到舞台頂端。

在Page Builder面板中，展開​ Add Content ​並將​ Products ​預留位置拖曳到新列。

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

將滑鼠懸停在空的產品容器上以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

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

針對​ Select Products By，請選擇Condition。

新增條件：

• 按一下​ 新增 （ ）圖示。

• 在​ Product Attribute ​底下，選擇​ Category。

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

• 按一下「更多(…)」圖示，然後按一下「選擇器」（ ）圖示，完成條件的​ Category is… ​部分。

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

• 在類別樹狀結構中，向下展開至​ 女性> Tops ​類別，並選取​ Tees ​核取方塊。

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

• 按一下核取記號（ ）圖示。

  對應的類別ID會顯示在欄位中，以完成條件。

輸入​ Number of Products to Display。

依預設，清單會顯示五個產品。

視需要完成其餘的設定。

如有需要，請使用新增內容 — 產品頁面結尾的欄位說明作為參考。

完成後，按一下​ Save ​儲存設定並返回Page Builder工作區。

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

在舞台的右上角，按一下​ 關閉全熒幕 （ {width="20"} ）圖示。

按一下此圖示會返回頁面的​ Content ​區段，並顯示預覽。

在右上角，按一下​ Save ​箭頭並選擇​ Save & Close。

在​ 管理員 ​側邊欄上，移至​ Catalog > Products。

尋找可用於此範例的簡單產品，並在編輯模式下開啟它。

向下捲動並展開 Content ​區段。

在​ Description ​旁邊，按一下​ Edit with Page Builder。

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

如果之前輸入的產品說明沒有Page Builder，則目前的說明會顯示為HTML代碼容器中的HTML。 使用Luma佈景主題時，產品說明會出現在「詳細資訊」標籤上。

在​ Layout ​下方的Page Builder面板中，將​ 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。

在​ 管理員 ​側邊欄上，移至​ Catalog > Products。

按一下右上角的​ Add Product。

建立具有以下屬性的產品：

• ​

  屬性集: Default

• Product Name：我的產品

• ​

  SKU: Tutorial

• ​

  Price: 75.00

• ​

  Quantity: 100

• Stock Status：有貨

• ​

  Weight: 1

• Categories：女性>上衣>T恤

在右上角，按一下​ Save ​箭頭並選擇​ Save & Close。

在​ 管理員 ​側邊欄上，移至​ 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。

重複上述步驟，以建立具有相同基本屬性，但文字編輯器輸入型別的第二個屬性，如下所示：

• Default Label：我的文字編輯器屬性

• Catalog Input Type for Store Owner：文字編輯器

• ​

  屬性代碼: my_text_editor_attribute

在​ 管理員 ​側邊欄上，移至​ Stores > Attributes>Attribute Set。

在此範例中，您暫時將新屬性新增到default屬性集。 在本練習結束時，請從屬性集中移除屬性，以免影響您的目錄。

在清單中尋找​ Default ​屬性集，然後按兩下以編輯模式開啟它。

在​ 未指派的屬性 ​清單中，尋找您建立的新屬性，並將每個屬性拖曳至​ Content ​下的​ Groups ​欄。

屬性在Groups欄中的位置決定了它出現在頁面上的位置。

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

按一下​ Save ​以返回「屬性集」清單。

出現提示時，請按一下頁面頂端的​ Cache Management ​連結，然後重新整理任何無效的快取。

在​ 管理員 ​側邊欄上，移至​ Catalog > Products。

在「產品」格線中，尋找​ 我的產品，並以編輯模式開啟。

向下捲動並展開 Content ​區段。

在區段頂端，有兩個產品內容的標準屬性：

• 簡短描述，使用標準WYSIWYG 編輯器。
• 顯示Page Builder預覽的​ 描述。

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

當您捲動到區段的下半部時，您會建立並指派兩個屬性：

• 顯示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 ​拖曳到舞台。

• 輸入Page Builder attribute placeholder text。

• 在舞台的右上角，按一下​ 關閉全熒幕 （ {width="20"} ）圖示。

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

向上捲動到​ Description，按一下​ Edit with Page Builder，然後使用與上一個步驟相同的方法新增您喜歡的任何文字。

在產品頁面的右上角，按一下​ Save ​箭頭，然後選擇​ Save & Close。

如果出現提示，請按一下頁面頂端訊息中的​ Cache Management ​連結，並重新整理任何無效的快取。

導覽至店面的範例產品頁面。

在此範例中，產品位於頂端導覽列中的「女性>頂端>T恤」下。

向下捲動至​ 我的頁面產生器屬性 ​資訊。

屬性在產品頁面上的位置由主題決定。 在Luma主題中，新屬性位於產品說明後面。

店面中的 {width="600" modal="regular"}