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 the Page Builder stage for a CMS page, block, or dynamic block.

The Product Recommendations content type in Page Builder is supported in Magento Commerce 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.

When you are working in the Page Builder workspace, your content changes are not fully saved until you click the Close Full Screen () icon in the upper-right corner of the workspace, and then click Save in the upper-right corner for the CMS page, product page, category page, block, or dynamic block.

If you are making significant changes to Page Builder content, we recommend that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Product Recommendations 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.

Add an existing recommendation unit

  1. Open the page, block, or dynamic block in edit mode.

  2. Expand the Content section and click Edit with Page Builder or inside the content preview area to open the Page Builder workspace.

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

    Adding the Product Recommendation content type

  4. Hover over the empty Product recommendation container to display the toolbox and click the Settings () icon.

  5. Click Select.


    Select Product Recommendation

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

  7. Complete the Advanced settings as needed.

  8. When complete, click Save to apply the settings and return to the Page Builder workspace.

Edit recommendation unit settings

  1. Hover over the recommendation unit container to display the toolbox and click the Settings () icon.

    Block Toolbox

  2. In the Edit Product Recommendation page, click Select.

  3. Find the row with the recommendation unit that you want to add and click Select in the last column.

  4. Complete the Advanced settings as needed.

  5. When complete, click Save to apply the settings and return to the Page Builder workspace.

Duplicate a recommendation unit

  1. Hover over the recommendation unit container to display the toolbox and click the Duplicate ( icon 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 click the Move ( icon 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 click the Remove ( icon in the toolbox.

  2. When prompted to confirm, click OK.

Advanced settings

  1. Choose the the Alignment to control the positioning of the Product Recommendations unit within the parent container:

    Default Applies the alignment default setting that is specified in the style sheet of the current theme.
    Left Aligns the unit along the left border of the parent container, with allowance for any padding that is specified.
    Center Aligns the unit in the center of the parent container, with allowance for any padding that is specified.
    Right Aligns the unit along the right border of the parent container, with allowance for any padding that is specified.
  2. Set the Border style applied to all four sides of the Product Recommendations unit:

    Default Applies the default border style that is specified by the associated style sheet.
    None Does not provide any visible indication of the unit borders.
    Dotted The unit border appears as a dotted line.
    Dashed The unit border appears as a dashed line.
    Solid The unit border appears as a solid line.
    Double The unit border appears as a double line.
    Groove The unit border appears as a grooved line.
    Ridge The unit border appears as a ridged line.
    Inset The unit border appears as a inset line.
    Outset The unit border appears as a outset line.
  3. If you set a border style other than None, complete the border display options:

    • Border Color - Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.

    • Border Width - Enter the number of pixels for the border line width.

    • Border Radius - Enter the number of pixels to define the size of the radius that is used to round each corner of the border.

  4. (Optional) Specify the names of CSS classes from the current style sheet to apply to the unit.

    Separate multiple class names with a space.

  5. Enter values, in pixels, for the Margins and Padding to determine the outer margins and inner padding of the unit.

    Enter the corresponding values in the diagram.

    Margins The amount of blank space that is applied to the outside edge of all sides of the unit. Options: Top / Right / Bottom / Left
    Padding The amount of blank space that is applied to the inside edge of all sides of the unit. Options: Top / Right / Bottom / Left