Tutorial 3: Catalog Content

In this tutorial, you will learn how easy it is to add a product list to a page, customize product pages, and create a custom attribute that adds the Page Builder workspace to a product attribute set.

Product List

PART 1: Add a Product List

Page Builder makes it easy to add a product list to the stage. In this example, the product list is added directly to a page.

Step 1: Add a Product List

  1. In the Admin sidebar, go to Content > Elements > Pages.

  2. Open the Simple Page that you created in the first tutorial. Then, scroll down and expand the Content section.

    Content Stage

  3. In the Page Builder panel under Layout, drag a Row to the top of the stage.

  4. In the Page Builder panel under Add Content, drag a Products placeholder to the new row.

    Drag Products to Row

Step 2: Compose the Condition

  1. Hover over the empty products container. Then, choose Settings () in the toolbox and do the following:

    Products Toolbox

    • On the Edit Products page under Condition, click Add (). Then under Product Attribute, choose Category.

      Condition

    • To complete the “Category is …” part of the condition, click More (…). Then after the field, click the Chooser ().

      Condition

    • In the category tree, drill down to the Women > Tops category, and select the Tees checkbox.

      The corresponding category ID appears in the field to complete the condition.

      Category Tree

Step 3: Complete the Settings

  1. Enter the Number of Products to Display.

    By default, the list displays five products.

    Product List

  2. Complete the remaining settings as needed, using the field descriptions at the end of the Add Products topic for reference.

  3. When complete, click Save to save the settings and return to the Page Builder workspace.

  4. In the upper-right corner on the Save menu, click Save & Close.

PART 2: Customize the Product Page

In this tutorial, you will learn how easy it is to customize a product page by placing a video below the set of tabs on the product page. The process to update category page content is basically the same.

  1. On the Admin sidebar, choose Catalog. Then, choose Products.

  2. Open a simple product that you can use for this example.

  3. Scroll down, and expand the Content section. Then, at the Description label, click Edit with Page Builder.

    Content Section

    If the product description was entered previously without Page Builder, the current description appears as HTML in an HTML Code container. With the Luma theme, the product description appears on the Detail tab.

    In the Page Builder panel under Layout, drag a Row to the stage, placing it below the HTML Code container. Look for the red guideline to appear when the row is in the correct position.

    Drag a Row to the Stage

  4. In the Page Builder panel, under Media, drag a Video placeholder to the new row. Then, do the following:

    Video

  5. Hover over the empty video container. Then in the toolbox, choose Settings (), and do the following:

    Video Toolbox

    • Enter the Video URL.

      The video can be hosted on either YouTube or Vimeo. The video in this example can be found on YouTube at the following URL:

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

      Edit Video

    • Enter the Maximum Width in pixels for the video display.

      If you leave the Maximum Width blank, the video will fill the available space.

      Edit Video

    • In the upper-right corner of the workspace, click the Fullscreen () icon to return to the Content section of the product.

    • In the upper-right corner on the Save menu, choose Save & Close.

In the storefront, the video appears below the set of tabs. To see how the page look on a mobile device, resize the window.

Video on Product Page

Congratulations!

You have completed Part 2 of the Catalog Content tutorial. Keep the work that you created, so you can refer to it later.

PART 3: Add Custom Attributes

Use the Page Builder custom attribute to add a fully-functioning Page Builder workspace to a product page, which you can use to create engaging content. In this tutorial, you will learn how to create a custom attribute using the Page Builder input type, and apply it to product pages in your catalog. To learn more, see Product Attributes.

Page Builder and Text Editor Attributes in Storefront

Look for the following concepts and features in this tutorial:

Before you begin

To avoid making changes to your live store, create a new product with the following properties:

  1. On the Admin sidebar, go to Catalog > Products.

  2. In the upper-right corner, click Add Product. Then, complete the following properties:

    Attribute Set: Default
    Product Name: My Product
    SKU: Tutorial
    Price: 75.00
    Quantity: 100
    Stock Status: In Stock
    Weight: 1
    Categories: Women > Tops > Tees
  3. On the Save menu, choose Save & Close.

Step 1: Create Custom Attributes

In this step, you create two new custom attributes to show how the Page Builder and Text Editor input types can be used.

  1. On the Admin sidebar, go to Stores > Attributes > Product.

  2. In the upper-right corner, click Add New Attribute. Then, do the following:

    • Enter a Default Label for the attribute.

      For this example, use My Page Builder Attribute for the label.

    • Set Catalog Input Type for Store Owner to Page Builder.

      When creating a custom attribute, you can specify the editor that is most suitable to the application as either “Page Builder” or the standard, WYSIWYG “Text Editor”.

      Page Builder Input Type

    • Under Advanced Attribute Properties, make the following settings:

      Attribute Code: Enter an attribute code in lowercase characters, using hyphens instead of spaces. For this example, use my-page-builder-attribute.
      Scope: Accept the default value, “Store View”.
      Default Value: Enter a default value for the attribute.
      Unique Value: No
      Add to Column Options: No
      Use in Filter Options: Yes
    • In the Attribute Information panel, choose Storefront Properties. Then, make the following settings:

      Use for Promo Rule Conditions: Yes
      Visible on Catalog Pages on Storefront: Yes
      Used in Product Listing: Yes
    • When complete, click Save Attribute.

  3. Repeat these steps to create a second attribute with the same basic properties, but with the Text Editor input type as follows:

    Default Label: My Text Editor Attribute
    Catalog Input Type for Store Owner: Text Editor
    Attribute Code: my-text-editor-attribute

Step 2: Update the Product Attribute Set

  1. On the Admin sidebar, go to Stores > Attributes > Attribute Set.

    For the purpose of this example, we will temporarily add the new attributes to the default attribute set. At the end of this tutorial, remove the attributes from the attribute set, so they won’t impact your catalog.

    If you don’t want to make changes to your live store, you can follow along without updating the attribute set.

  2. Find the default attribute set in the grid, and open in edit mode. Then, do the following:

    • Find the new attributes in the Unassigned Attributes list.

    • Drag the new attributes to the Groups column, under Content.

      The location of the attribute in the Groups column determines where it appears on the page.

      Content Section of Attribute Set

    • Click Save to return to the Attribute Sets grid.

  3. When prompted, click the Cache Management link at the top of the page. Then, refresh any invalid cache.

Step 3: Update the Product

  1. On the Admin sidebar, go to Catalog > Products.

  2. In the Products grid, find My Product, and open in edit mode.

  3. Scroll down and expand ( ) the Content section.

    The full-featured Page Builder workspace is available for both the Product Description and Page Builder Attribute field. Both the Short Description and Text Editor Attribute fields use the standard WYSIWYG editor. To learn more, see: Product Attributes.

    Edit with Page Builder

  4. At the product Description field, click Edit with Page Builder. Then, do the following:

    • In the Page Builder panel under Elements, drag a Text object to the stage. Then, enter Page Builder attribute placeholder text.

    • In the upper-right corner, click Close () to return to the Content section.

    • In the Text Editor Attribute editor, enter Text Editor Attribute placeholder text.

    • In the upper-right corner on the Save menu, choose Save & Close.

      Edit with Page Builder

    • At the My Page Builder Attribute field, click Edit with Page Builder.

      Edit with Page Builder

  5. If prompted, click the Cache Management link in the message at the top of the page. Then, refresh any invalid cache.

Step 4: Check It Out

  1. Navigate to your sample product page in the storefront.

    In this example, the product can be found in the top navigation under Women > Tops > Tees.

  2. Scroll down to the My Page Builder Attribute information.

    The position of the attributes on the product page is determined by the theme. In the Luma theme, the new attributes are located just after the Description field.

    Page Builder and Text Editor Attributes in Storefront

Congratulations!

You have completed Part 3 of the Catalog Content tutorial. Keep the work that you created, so you can refer to it later.