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, go to Content > Elements > Blocks.

  2. Click Add New Block and do the following:

    • Enter the Block Title and Identifier. Then, choose the Store View where the block is to be available.

    • 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, choose Settings () in the toolbox.

    Products Toolbox

  4. To describe the condition that determines which products are included, do the following:

    • 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, click the Chooser () after the field.

      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

    • Enter the Number of Products to Display.

      By default, the list displays five products.

      Product List

    • In the upper-right corner, click Save to return to the Page Builder workspace.

  5. In the upper-right corner on the Save menu, click 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 block. Options:
Default - Applies the alignment default setting that is specified in the style sheet of the current theme.
Left - Aligns the block along the left border of the parent container, with allowance for any padding that is specified.
Center - Aligns the block in the center of the parent container, with allowance for any padding that is specified.
Right - Aligns the block 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 block 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 a inset line.
Outset - The container border appears as a 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 block container. Enter the corresponding values in the diagram.
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