Skip to main content

Style product relations

Product Relations are created in Data Platform. This guide explains how to style the relations in Experience Designer using a dedicated component.

  • In Conversation Studio, select a Digital Assistant with configured Relations.
  • Go to the Design tab and open Experience Designer.
  • Select the Results Page from the page selector above the canvas.
  • Drag and drop the Relations component onto the canvas:

Relations

  • In the Relations component settings, find the Partner Dev Base URL field. Enter the following URL (no matter which environment you are in):
    • https://orca-partner.zoovu.com/
  • In the Relations component settings, open the Relations dropdown.
  • Select a relation that was previously created in the Data Platform.

After you select the relation, the related products will appear on the canvas.

Relations

Style the relations component​

You can customize the appearance of the component to match your design. In the Settings panel, adjust elements like the Recommended Product Label.

For advanced styling, use the CSS tab. To modify or remove specific styles, such as the label or border, use the following special CSS classes:

  • Customize the label: .relation-product-label
  • Adjust or remove the border: .relation-product-border

It’s helpful to group your Relations component inside rows or columns.