Magento for B2B Commerce

Add Products

Use the Products content type to add a list of products to the stage. You also can use the Add Content - Block tool to place the block, with product list, on the Page Builder stage. Or, you can add the product list directly to a row on a page.

The following example shows how to add a product list to a block. A widget can then be used to place the block at a specific location on any page in your store.


Product List In Storefront

To add a product list:

1. On the Admin sidebar, choose Content. Then under Elements, choose Blocks.
2. Tap Add New Block, and do the following:
a. Enter the Block Title and Identifier. Then, choose the Store View where the block is to be available.
b. Scroll down to the Page Builder workspace. Then in the Page Builder panel under Add Content, drag a Products placeholder to the stage.

Add Products
3. Hover over the empty container. Then in the toolbox, choose Settings ).

Products Toolbox
4. To describe the condition that determines which products are included, do the following:
a. On the Edit Products page under Condition, click Add ( ). Then under Product Attribute, choose Category.

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

Condition
c. In the category tree, drill down to the Women > Tops category, and mark the Tees checkbox.

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


Category Tree
d. Enter the Number of Products to Display.

By default, the list displays five products.


Product List
e. In the upper-right corner, tap Save to return to the Page Builder workspace.
5. In the upper-right corner on the Save menu, tap Save & Close.
6. You can now use a widget to place this block wherever you want it to appear in the store. Or, use Add Content - Block to add the block to an existing page, tab, or block.
  • Add Products Toolbox

    TOOL

    Icon

    Description

    Move

    Moves the products container and its content to another position on the stage.

    Settings

    Opens the Edit Products page, where you can choose the product selection, and change the properties of its container.

    Hide

    Hides the current products container and its content.

    Show

    Shows the hidden products container and its content.

    Duplicate

    Makes a duplicate copy of the products container and its content.

    Remove

    Deletes the products container and its content from the stage.

  • Products Settings

    Setting

    Description

    Condition

    Defines the query that retrieves the products for the list.

    Number of Products to Display

    Specifies the number of products to appear in the list.

    Advanced

    Alignment

    Determines the horizontal alignment of the products container. Options:

    Default

    Applies the alignment default setting that is specified in the style sheet of the current theme.

    Left

    Aligns the container along the left border of the parent container, with allowance for any padding that is specified.

    Center

    Aligns the container in the center of the parent container, with allowance for any padding that is specified.

    Right

    Aligns the container along the right border of the parent container, with allowance for any padding that is specified.

    Border

    Determines the border style that is applied to all four sides of the products container. Options:

    Default

    Applies the default border style that is specified by the associated style sheet.

    None

    Does not provide any visible indication of the container borders.

    Dotted

    The container border appears as a dotted line.

    Dashed

    The container border appears as a dashed line.

    Solid

    The container border appears as a solid line.

    Double

    The container border appears as a double line.

    Groove

    The container border appears as a grooved line.

    Ridge

    The container border appears as a ridged line.

    Inset

    The container border appears as an inset line.

    Outset

    The container border appears as an outset line.

    Border Color

    Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.

    Border Width

    Determines the width in pixels of the container border.

    Border Radius

    Specifies the size of the radius that is used to round each corner of the border.

    CSS Classes

    Specifies the names of CSS classes from the current style sheet which apply to the container. Separate multiple class names with a space.

    Margins and Padding

    Determines the size, in pixels, of the outer margins and inner padding of the products container. Enter the corresponding values in the diagram. Options:

    Margins

    The amount of blank space, in pixels, that is applied to the outside edge of all sides of the container. Options: Top, Right, Bottom, Left.

    Padding

    The amount of blank space, in pixels, that is applied to the inside edge of all sides of the container. Options: Top, Right, Bottom, Left.