Add Content - Product Recommendations

Last update: Tue Sep 19 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

Beginner
Intermediate
User

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.

NOTE

The Page Builder Product Recommendations content type is supported in Adobe Commerce 2.4.4 and later and available in the Product Recommendations metapackage versions 3.0.x or later. To add Page Builder support for Product Recommendations, see the installation information. This content type is not available for Magento Open Source.

NOTE

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

Product Recommendations toolbox

Tool

Icon

Description

Move

img-md
w-25

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

Settings

img-md
w-25

Opens the Edit Product Recommendation page, where you can choose the recommendation unit and change the properties of the container.

Hide

img-md
w-25

Hides the current product recommendation container and its content.

Show

img-md
w-25

Shows the hidden product recommendation container and its content.

Duplicate

img-md
w-25

Makes a duplicate copy of the product recommendation container and its content.

Remove

img-md
w-25

Deletes the product recommendation container and its content from the stage.

NOTE

Hidden elements are stored in the database and invisible to customers. However, these elements are visible to search engines and other bots that crawl your site. They are also returned as part of the content if requested through an API call with an attribute of invisibility, unless you remove them from the stage.

Add an existing recommendation unit

Make sure you have already created a recommendation unit for the Page Builder page type.

NOTE

You can create recommendation units for the Page Builder page type only in the default store view.

Open the page, block, or dynamic block in edit mode.
Expand the Content section and click Edit with Page Builder or inside the content preview area to open the Page Builder workspace.
In the Page Builder panel under Layout, drag a Row placeholder to the stage.

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

img-md
w-600 modal-image

Do one of the following:

Click Edit Product Recommendation.

Hover over the empty container to display the toolbox and click the Settings (

img-md
w-20

) icon.

img-md
w-600 modal-image

In the Selection section, click Select.

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.

img-md
w-600 modal-image

In the upper-right corner, click Add Selected.

The name of the selected product recommendation appears in the Selection section of the Edit Product Recommendation page.

Make any changes necessary to the Advanced settings.

img-md
w-600 modal-image

When complete, do the following:
- If working with a fully maximized browser window, click the Close Full Screen ( ) icon in the upper-right corner of the workspace.
- Click Save to apply the settings and return to the Page Builder workspace.
When you return to the stage, product placeholder images appear in the container.

Edit recommendation unit settings

Hover over the recommendation unit container to display the toolbox and click the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.

img-md
w-600 modal-image

Make any changes necessary to the Advanced settings.
When complete, click Save to apply the settings and return to the Page Builder workspace.

Duplicate a recommendation unit

Hover over the recommendation unit container to display the toolbox and click the Duplicate (+---------------------------+ | img-md | +===========================+ | w-20 | +---------------------------+ | | +---------------------------+) icon in the toolbox.

The duplicate appears just below the original.
To move the duplicated recommendation unit to a new position, hover over the container and click the Move (+----------------------+ | img-md | +======================+ | w-20 | +----------------------+ | | +----------------------+) icon in the toolbox.
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

Hover over the recommendation unit container and click the Remove (+------------------------+ | img-md | +========================+ | w-20 | +------------------------+ | | +------------------------+) icon in the toolbox.
When prompted to confirm, click OK.

Advanced settings

To control the positioning of the Product Recommendations unit within the parent container, choose the Alignment:

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
Option	Description
`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.

Set the Border style that is applied to all four sides of the Product Recommendations unit:

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
Option	Description
`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 an inset line.
`Outset`	The unit border appears as an outset line.

If you set a border style other than None, complete the border display options:

table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
Option	Description
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.

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

Separate multiple class names with a space.

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.

table 0-row-2 1-row-2 2-row-2 layout-auto
Container area	Description
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`

recommendation-more-help

85b60248-86a4-4d5f-9933-5179643f608d