When using Dynamic Product Feed logic to generate personalized recommendations, you need to utilize the DPF outcomes screen to properly display those recommendations at the end of an experience.
Before you begin
Determine that you're using the DPF logic type.
Ensure your dynamic product feed is properly configured and connected to your Jebbit account.
Prepare your product data with relevant fields such as product name, image URL, price, and any custom attributes you wish to display.
Select your display method
There are multiple ways to display product recommendations:
Outcome with Dynamic Products (Grid): Displays a primary outcome at the top with additional recommendations in a grid below.
Outcome with Dynamic Products (Carousel): Displays a primary outcome at the top with additional recommendations in a carousel below.
Dynamic Product Feed (Grid): Displays a grid with multiple recommendations
The method of display you select depends entirely on your preference and recommendation strategy. For example, if you want to guide users to purchase a specific item among a suite, you may select the outcome screen with a primary and a carousel displaying the other related products.
Add a pre-formatted Dynamic Product Feed outcome screen
The screen library contains pre-formatted outcome screens for easier configuration. To add one to any experience:
Click the + Add button from the screen selector.
Expand the Outcomes & Products category.
Select either:
Outcome with Dynamic Products (Grid)
Outcome with Dynamic Products (Carousel)
Dynamic Product Feed (Grid)
Click Add.
Tip: If you're using DPF but your products aren't displaying correctly, double check that you have added a DPF display element and not a "products" display element. That element type is meant to be used with matching and scoring outcomes.
Add a Product Feed Display element
To add a feed display below your primary outcome image:
Select the screen you want to modify from the screen selector.
Click Add Elements.
Under Dynamic Product Feed, click Product Feed Display.
Under Layout, select either:
Carousel: All images left to right for horizontal browsing.
Grid: All images displayed in a table format for evenly spaced tiles.
Stacked: All images vertical, typically requires linear scrolling.
Set the maximum number of products you want to display
Note: Max allowed is 24. Make sure the number entered does not exceed the total number of products in your product feed
Configure display settings for carousel
Set the navigation style (at least one navigation type is required.) Under Navigation, select one or more:
Arrows: Choose between circular and minimal styling and set the color.
Dot navigation: Set contrasting colors for active stat and inactive state.
Product Peek: Displays a hint of products on either side.
Under labels, check the boxes to indiciate which labels will display (make sure you have the displayed labels included in your product feed):
Image
Title
Description
Price
Redirect button
Custom product feed labels
Turn on or off the Clickable container. When turned on, this allows the user to click anywhere on the container to open the linked product.
Check the Set max number of lines box to standardize the length of the title and description.
Configure display settings for stacked or grid
Under labels, check the boxes to indiciate which labels will display (make sure you have the displayed labels included in your product feed):
Image
Title
Description
Price
Redirect button
Custom product feed labels
Turn on or off the Clickable container. When turned on, this allows the user to click anywhere on the container to open the linked product.
Check the Fix button alignment vertically box to ensure vertical alignment remains fixed and does not adjust based on other elements.
Check the Set max number of lines box to standardize the length of the title and description.
Best practice: Use carousels when showcasing a wide variety of items quickly. Use grids or stacked layouts for more deliberate browsing or when text content needs more space.
Group displayed products by category
Instead of displaying individual products, you can group them into categories to help users explore more targeted options. This option is available for all three display formats. To turn it on:
Select the product feed display element
In the editor window, scroll to Listing Type.
Click Group into categories.
Under Category 1, expand the dropdown and select one of the options. This is the first category that will display.
Enter the number of products to display within the category.
Check the Description box to display the description.
Click Add category and repeat the steps to add additional categories to the screen.
Check the box Group remaining products if you want to prioritize a couple categories and then display all remaining products together.
Tip: To reorder the display of categories, select the element on the screen and use the arrows in the toolbar to move them up or down.
Preview and test
Use the Preview feature to interact with your product feed and ensure everything is rendering properly. Check the experience on both desktop and mobile views to confirm:
Products are laid out correctly in your chosen format.
The right fields are displayed.
Font styles, buttons, and image sizes look polished and responsive.
Outcomes appear where and when they should.
FAQ
What happens to layout on mobile?
Layouts automatically adjust to optimize for screen size. Carousels switch to vertical stacking for smoother scrolling, and elements rearrange to preserve usability.