Component
Product recommendation component features within Fanplayr's Creative Editor.
Examples
Concepts
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.
General properties
These properties control which recommendation AI model is used and how many products are requested from the recommendation service.
Recommendation type
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.
Minimum products
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.
Maximum products
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.
Number of days
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.
Start price
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.
End price
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.
Category
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.
Product properties
These properties relate to the overall dimensions of a product.
Width
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.
Height
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.
Gutter
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.
Border
Type: Border
Standard border style.
Border radius
Type: Border radius
Standard boarder radius style.
Background
Type: Color
The background color of the product.
X-Padding
Type: Dimension (pixels)
Adds horizontal spacing to the edges of the component which is used to push the product grid towards the center.
Image properties
Height
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.
Background
Type: Color
The background color to use for any transparent parts of the product image.
Background size
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.
Description properties
Text
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.
Margin
Type: Margin
Spacing to add to the outside of the text area. This adds space between the image and button.
Button properties
Show
Type: Boolean
Whether to show or hide the call to action button.
Margin
Type: Margin
Spacing to add to the outside of the button. This adds spacing from the product text above the button.
Padding
Type: Padding
Spacing to add to the inside of the button.
Border
Type: Border
Standard border style.
Border radius
Type: Border radius
Standard border radius style.
Text
Type: Rich text
Button text. Supports the same variables as Description Text.
Text color
Type: Color
Button text color.
Background
Type: Color
Button background color.
Navigation button properties
These buttons appear on the left and right side of the component when there are more products to show than can be visibly displayed.
Border
Type: Border
Standard border style.
Border radius
Type: Border radius
Standard border radius style. (Hint: Set radius to 50% to make the button a circle)
Padding
Type: Padding
Spacing to add to the inside of the button.
X-Offset
Type: Dimension (pixels)
Horizontal spacing to add between the navigation button and the edge of the component.
Background
Type: Color
Button background color.
Arrow size
Type: Dimension (pixels)
The overall size of the arrow.
Arrow width
Type: Dimension (pixels)
The thickness of the arrow.
Arrow color
Type: Color
The color of the arrow.
Last updated
