DocumentationCommercePage Builder

Page Builder Walkthrough part 3: catalog content

Last update: Mon Aug 21 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • User

This exercise demonstrates 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.

w-600 modal-image
Product list

This exercise assumes that you have completed Part 1: Simple Page and Part 2: Blocks, including the prerequisites and downloaded sample files. Follow the three parts of this exercise in order.

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 to the stage

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

  2. Find the Simple Page that you created in the first exercise and modified in the second, and select Edit in the Action column.

  3. Expand Expansion selector the Content section and click Edit with Page Builder or inside the content preview area.

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

  5. In the Page Builder panel, expand Add Content and drag a Products placeholder to the new row.

    img-md
    w-600 modal-image
    Dragging a products placeholder onto the row

Step 2: Compose the condition

  1. Hover over the empty products container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+ ) icon.

    img-md
    w-600 modal-image
    Products toolbox

  2. For Select Products By, choose Condition.

  3. Add a condition:

    • Click the Add ( Add icon ) icon.

    • Under Product Attribute, choose Category.

      img-md
      w-600 modal-image
      Choosing the category attribute for the condition

    • Complete the Category is … part of the condition by clicking the More (…) icon and then click the Chooser ( Chooser icon ) icon.

      img-md
      w-600 modal-image
      Defining the condition

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

      img-md
      w-600 modal-image
      Choosing the category in the tree

    • Click the Checkmark ( Checkmark icon ) icon.

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

Step 3: Complete the settings

  1. Enter the Number of Products to Display.

    By default, the list displays five products.

  2. Complete the remaining settings as needed.

    If needed, use the field descriptions at the end of the Add Content - Products page for reference.

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

    img-md
    w-600 modal-image
    Products list in the stage

  4. In the upper-right corner of the stage, click the Close Full Screen (+------------------------------------+ | img-md | +====================================+ | w-20 | +------------------------------------+ | Close full screen icon | +------------------------------------+) icon.

    Clicking this icon returns you to the Content section for the page with the preview displayed.

  5. In the upper-right corner, click the Save arrow and choose Save & Close.

Part 2: Customize the product page

NOTE
An Admin user must have Content permissions for their role scope to see Edit with Page Builder buttons and be able to use Page Builder.

In this part of the exercise, you 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, go to Catalog > Products.

  2. Find a simple product that you can use for this example and open it in edit mode.

  3. Scroll down and expand Expansion selector the Content section.

  4. Next to Description, click Edit with Page Builder.

    img-md
    w-600 modal-image
    Product description content

    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.

  5. 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.

    img-md
    w-600 modal-image
    Dragging a row to the stage

  6. In the Page Builder panel, expand Media and drag a Video placeholder to the new row.

    img-md
    w-600 modal-image
    Video placeholder in the row

  7. Hover over the empty video container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+ ) icon.

    img-md
    w-500 modal-image
    Video toolbox

  8. 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

    img-md
    w-500 modal-image
    Editing the video

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

    If you leave this option blank, the video fills the available space.

  10. Click Save to save the settings and return to the Page Builder workspace.

    img-md
    w-600 modal-image
    Video in the content stage

  11. In the upper-right corner of the stage, click the Close Full Screen (+------------------------------------+ | img-md | +====================================+ | w-20 | +------------------------------------+ | Close full screen icon | +------------------------------------+) icon.

    Clicking this icon returns you to the Content section for the page with the preview displayed.

  12. In the upper-right corner, click the Save arrow and choose Save & Close.

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

w-600 modal-image
Video displayed on the product page

Congratulations! You have completed the second part 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 part of the exercise, you learn how to create a custom attribute using the Page Builder input type and apply it to product pages in your catalog. For more information about these attributes, see Product Attributes.

Step 1: Create a product

To avoid changes to your live store, create a product using the described properties.

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

  2. In the upper-right corner, click Add Product.

  3. Create the product with 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

  4. In the upper-right corner, click the Save arrow and choose Save & Close.

Step 2: 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.

  3. Enter a Default Label for the attribute.

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

  4. 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.

    img-md
    w-600 modal-image
    Page Builder Input Type

  5. Expand Expansion selector the Advanced Attribute Properties section and 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

  6. In the Attribute Information panel on the left, choose Storefront Properties and make the following settings:

    • Use for Promo Rule Conditions: Yes
    • Visible on Catalog Pages on Storefront: Yes
    • Used in Product Listing: Yes

  7. When complete, click Save Attribute.

  8. Repeat the previous 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 3: Update the product attribute set

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

    For this example, you temporarily add the new attributes to the default attribute set. At the end of this exercise, remove the attributes from the attribute set, so don’t impact your catalog.

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

  2. Find the Default attribute set in the list and double-click it to open it in edit mode.

  3. In the Unassigned Attributes list, find the new attributes you created and drag each one to the Groups column, under Content.

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

    img-md
    w-600 modal-image
    New attributes added to the Content group

  4. Click Save to return to the Attribute Sets list.

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

Step 4: Update the product

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

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

  3. Scroll down and expand Expansion selector the Content section.

    At the top of the section, there are two standard attributes for product content:

    • Short Description, which uses the standard WYSIWYG editor.
    • Description, which displays the Page Builder preview.
    img-md
    w-600 modal-image
    Product content

    As you scroll to the lower half of the section, there are the two attributes you created and assigned:

    • My Page Builder Attribute, which displays the Page Builder preview.
    • My Text Editor Attribute, which uses the standard WYSIWYG editor.
    img-md
    w-600 modal-image
    Product content editing

  4. In the My Text Editor Attribute editor, enter Text Editor Attribute placeholder text.

    • In the upper-right corner, click the Save arrow and choose Save & Close.

  5. For My Page Builder Attribute, click Edit with Page Builder and add the description text:

    • In the Page Builder panel, expand Elements and drag a Text object to the stage.

    • Enter Page Builder attribute placeholder text.

    • In the upper-right corner of the stage, click the Close Full Screen (+------------------------------------+ | img-md | +====================================+ | w-20 | +------------------------------------+ | Close full screen icon | +------------------------------------+) icon.

      img-md
      w-600 modal-image
      Custom attributes with placeholder text

  6. Scroll up to Description, click Edit with Page Builder, and add any text that you like using the same method as the previous step.

  7. In the upper-right corner of the product page, click the Save arrow and choose Save & Close.

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

Step 5: View the result

  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 product description.

    img-md
    w-600 modal-image
    Page Builder and Text Editor attributes in the storefront

You have completed the Page Builder Catalog Content exercise. Keep the work that you created, so you can refer to it later.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d