Use in Creative
Product recommendation component features within Fanplayr's Creative Editor.
Last updated
Product recommendation component features within Fanplayr's Creative Editor.
Last updated
High-level concepts related to this component:
Displays a list of products in a grid The number of products shown is based on the amount of space available and the size of the product template defined.
Product template The styling of items in the list is controlled by the product template. This allows users to design the overall size of a product as well as its image, text and call to action.
List navigation Left and right navigation arrows will appear if there are more products to show.
Clicking products When a user clicks a product their browser is navigated to the corresponding product page. This action is also tracked in Insights.
Widget presentation is dependent on this component When a recommendations component is used in a widget, the widget will wait for the product recommendations to be returned from the service before displaying the widget.
These properties control which recommendation AI model is used and how many products are requested from the recommendation service.
Type: Recommendation AI Model
The recommendation AI model to use:
General models:
Frequently Bought Together
Others You May Like
Recommended For You
Recently Viewed
Product ranking models:
Ranked by Views
Ranked by Carts
Ranked by Purchases
Ranked by Revenue
Note: Only models that are enabled on your account and have completed training will be available for selection.
Type: Integer
The minimum number of products required. This can be used to ensure that at least a certain number of products are available to render from the recommendation AI model. If the recommendation service is not able to return enough products, the widget will not render.
For AI models other than Recently Viewed, we recommend using a minimum of 5 or more products to ensure there is enough engaging content for users to see.
Type: Integer
The maximum number of products to request from the service.
This value is only a suggested number of products for the service to query and there is no guarantee that this maximum number of products will be returned. We suggest keeping the maximum number below 30 to reduce query response times.
Type: Integer
Applies to: Product ranking recommendations only
The number of days of history to use when querying for the top ranked products, starting from today. Valid values are between 1 and 30, where "1" will query up to the past 24 hours of data and "2" will query up to the past 48 hours of data etc.
Type: Integer
Applies to: Product ranking recommendations only
Limits the results to only products whose price is greater than or equal to the start price. Leave empty for no limit.
Type: Integer
Applies to: Product ranking recommendations only
Limits the results to only products whose price is less than or equal to the end price. Leave empty for no limit.
Type: Text
Applies to: Product ranking recommendations only
Limits the results to only products of the specified category name. This can also be configured to use the current page category.
These properties relate to the overall dimensions of a product.
Type: Dimension (pixels)
The width of a single product.
The component will use its overall width and the product width to determine how many products can be visibly rendered at once. Any remaining products will be hidden and the user will be shown arrow buttons to navigate the list.
For example, if the component is 800px wide and the product width is 150px then up to 5 products can be shown at once.
Type: Dimension (pixels)
The height of a single product.
The component will use its overall height and the product height to determine how many product rows can be shown.
For example, if the component is 500px tall and the product height is 200px then up to 2 rows of products can be shown if needed.
Type: Dimension (pixels)
The minimum amount of spacing to surround each product with. This is used to add separate between adjacent products in the list or rows.
Type: Border
Standard border style.
Type: Border radius
Standard boarder radius style.
Type: Color
The background color of the product.
Type: Dimension (pixels)
Adds horizontal spacing to the edges of the component which is used to push the product grid towards the center.
Type: Dimension (pixels)
The height of the image.
The image will always take up the full width of the product, but the height of the image is adjustable.
Type: Color
The background color to use for any transparent parts of the product image.
Type: Background size
Standard background size style. Controls whether the image is scaled to take up all available space (potentially clipping part of the image) or scaled down to ensure all of the image is visible.
Type: Rich text
Text element which allows rich customization options. Supports the following variables which can be added using the Insert Variable action :
{{ productRec.name }} - The current product name.
{{ productRec.price }} - The current product price, including the currency symbol.
{{ productRec.url }} - The current product url.
{{ productRec.rank }} - The current product rank. E.g. 1, 2, 3.
Type: Margin
Spacing to add to the outside of the text area. This adds space between the image and button.
Type: Boolean
Whether to show or hide the call to action button.
Type: Margin
Spacing to add to the outside of the button. This adds spacing from the product text above the button.
Type: Padding
Spacing to add to the inside of the button.
Type: Border
Standard border style.
Type: Border radius
Standard border radius style.
Type: Rich text
Button text. Supports the same variables as Description Text.
Type: Color
Button text color.
Type: Color
Button background color.
These buttons appear on the left and right side of the component when there are more products to show than can be visibly displayed.
Type: Border
Standard border style.
Type: Border radius
Standard border radius style. (Hint: Set radius to 50% to make the button a circle)
Type: Padding
Spacing to add to the inside of the button.
Type: Dimension (pixels)
Horizontal spacing to add between the navigation button and the edge of the component.
Type: Color
Button background color.
Type: Dimension (pixels)
The overall size of the arrow.
Type: Dimension (pixels)
The thickness of the arrow.
Type: Color
The color of the arrow.
