Display recommended Products with Web Product Relationships

If recommended products should be displayed on the product page at least one recommende product relationship should be available. This page contains all information required to be able to associate a product to multiple recommended product and display them in the shop. Recommendations are two way relationships. Meaning product X is recommend for product Y and vice versa.

Add New Product Relationship action to Web Product layout

There is a custom action button which provides the ability to associate a Web Product to multiple other Web Products. If it's not on the page it's possible to add it with the following steps:

1. Go to Salesforce setup -> Object Manager -> Web Product.
2. In the Page Layouts section open de layout assigned to the user which should be able to add recommended products.
3. Add the Lightning Action 'New Product Relationship' to the 'Salesforce Mobile and Lightning Experience Actions'. Override the default if necessary.
4. Save the layout.

Add related products list to Web Product layout

To prevent having two related lists on the web product object page there is a component that displays all relationships where the specific product is either specified in the 'From' or 'To' field. Having this component on the Web Product object page helps to quickly identify the relationships associated to the web product. To add it to the page execute the following steps:

1. Go to Salesforce setup -> Lightning App Builder.
2. Open the web product page that is in use or create a new one.
3. Add the 'Product Relationships' component on the required location.
4. Save the page.

Create product relationships

Make sure the 'New Product Relationship' action is on the assigned page layout. For configuring the product to product relationship execute te following steps:

1. Go to the web product which should have associated recommended products.
2. Click on the 'New Product Relationship' action, it's in the lightning action section on the right top of the object page.
3. Choose 'Recommended' in the 'Type' field .
4. Select the Web Product that needs to be recommended in the 'Web Product To' field.

Add component to product page

To display recommended products in the shop the 'Recommended Products' component should be on the 'Web Product Details' page in the shop. In order to do this execute the following steps:

1. Go to Salesforce setup -> Feature Settings -> Digital Experiences -> Sites.
2. On the site that represents the shop click 'Builder'.
3. In the 'Page' section (left top corner) search for 'Web Product Details' and open it.
4. Open the component panel (lightning icon left in the page) and search for 'Recommended Products'
5. Drag it onto the page in a horizontaly oriented section, like the footer section.
6. Save and publish the site.