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
On the Admin sidebar, go to Content > Elements > Blocks.
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.
Hover over the empty container. Then, choose Settings () in the toolbox.
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.
To complete the Category is … part of the condition, click More (…). Then, click the Chooser () after the field.
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.
Choose the Sort By option for sorting the products.
Product Sorting Options
Enter the Number of Products to Display.
By default, the list displays five products.
In the upper-right corner, click Save to return to the Page Builder workspace.
In the upper-right corner on the Save menu, click Save & Close.
Add Products Toolbox
|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.|
|Condition||Defines the query that retrieves the products for the list.|
|Sort By||Determines the sort order for the products in the list. Options:
Newest products first - Sorts products from the newest to the oldest date of import.
Oldest products first - Sorts products from the oldest to the newest date of import.
Name: A - Z - Sorts products by name as described.
Name: Z - A - Sorts products by name as described.
SKU: ascending - Sorts products by SKU as described.
SKU: descending - Sorts products by SKU as described.
Stock: low stock first - Sorts products from the lowest to the highest stock volume.
Stock: high stock first - Sorts products from the highest to the lowest stock volume.
Price: high to low - Sorts products by price as described.
Price: low to high - Sorts products by price as described.
|Number of Products to Display||Specifies the number of products to appear in the list.|
|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