Add Product Recommendations

Magento Commerce only

The content on this page is for Magento Commerce only. Learn more

Use the Product Recommendations content type to add an existing, active recommendation unit to a page, block, or dynamic block.

The Product Recommendations content type in Page Builder is supported in Magento 2.3.1 and later and available in the Product Recommendations metapackage versions 3.0.x or later. To add Page Builder support, see the developer documentation.

Add an existing recommendation unit

  1. Navigate to the Page Builder workspace on the target page.

  2. In the Page Builder panel under Add Content, drag a Product Recommendation placeholder to the stage.

    Select Product Recommendation

  3. Hover over the empty product recommendation container, choose Settings ( in the toolbox, and do the following:

    • Click Select.

      Select Product Recommendation

    • In the list of active product recommendations, find the row with the recommendation unit that you want to add and click Select in the last column.

      Selected Product Recommendation

      The name of the selected product recommendation appears in the Edit Product Recommendation form.

      Product Recommendation Name

    • Complete the remaining settings as needed, using the field descriptions at the end of this page for reference.

    • When complete, click Save to return to the Page Builder workspace.

  4. In the upper-right corner, click Save.

Edit recommendation unit settings

  1. Hover over the recommendation unit container, choose Settings ( in the toolbox, and do the following:

    Block Toolbox

    • In the Edit Product Recommendation page, click Select.

    • In the Select Product Recommendation page, find the row with the recommendation unit that you want to add. In the last column, click Select.

    • Update the remaining settings as needed, using the field descriptions at the end of this page for reference.

    • When complete, click Save to return to the Page Builder workspace.

  2. In the upper-right corner, click Save.

Duplicate a recommendation unit

  1. Hover over the recommendation unit container and choose Duplicate ( in the toolbox.

    The duplicate appears just below the original.

  2. To move the duplicated recommendation unit to a new position, hover over the container and choose Move ( in the toolbox.

  3. Select and drag the recommendation unit until the red guideline appears at the new position.

    The top and bottom borders of each container appear as dashed lines while the recommendation unit is moved.

Remove a recommendation unit from the stage

  1. Hover over the recommendation unit container and choose Remove ( in the recommendation unit toolbox.

  2. When prompted to confirm, click OK.

Recommendation Unit Settings

Setting Description
Product Recommendation The name of the selected product recommendation unit.
Select Product Recommendation Displays a list where you can select an existing active recommendation unit.

Add Recommendation Unit Toolbox

Tool Icon Description
Move Moves the product recommendation container and its content to another position on the stage.
Settings Opens the Edit Product Recommendation page, where you can choose the recommendation unit, and change the properties of the container.
Hide Hides the current product recommendation container and its content.
Show Shows the hidden product recommendation container and its content.
Duplicate Makes a duplicate copy of the product recommendation container and its content.
Remove Deletes the product recommendation container and its content from the stage.

Advanced

Settings Description
Alignment Determines the horizontal alignment of the product recommendation. Options:
Default - Applies the alignment default setting that is specified in the style sheet of the current theme.
Left - Aligns the product recommendation along the left border of the parent container, with allowance for any padding that is specified.
Center - Aligns the product recommendation in the center of the parent container, with allowance for any padding that is specified.
Right - Aligns the product recommendation 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 product recommendation 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 product recommendation 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