When a product is unavailable, customers often leave the site rather than searching for alternatives. With Fresh Relevance, you can use a popover SmartBlock to present similar or substitute products directly on the product page. The popover appears only when stock levels meet your defined criteria, such as zero availability, guiding visitors to other options without requiring extra navigation. This approach improves user experience and helps recover potential lost sales across any type of online store, from retail and grocery to electronics and home goods.
Before you start:
Things you need to know:
You need to have an accurate stock field data in product feeds.
Popovers may be blocked by aggressive browser pop-up settings in rare cases.
Example use case
An online store wants to help customers quickly find comparable products when the item they’re viewing is out of stock. A popover appears with recommended alternatives based on similarity, price range, or other merchandising rules. Customers can browse the suggestions instantly, reducing abandonment and keeping them engaged with the site’s product range.
Solution overview
To show popover recommendations for out-of-stock products:
Create a Recommendation SmartBlock with a popover layout.
Configure display behavior, filters, and merchandising options.
Use Slot Rules to ensure the recommendations only appear for products with zero stock.
Step-by-step guide to displaying a popover with product recommendations for out-of-stock items
1. Create a Recommendation SmartBlock
Go to Content > SmartBlocks.
Select CREATE SMARTBLOCK.
Set Placement to Website and select Product Details Page.
For Starting tactic, select Similar to Product on Page.
Select a starting Popover with products layout.
Complete the setup wizard to configure placement and name.
2. Configure Recommendations and Popover behavior
Go to the Properties tab and configure SmartBlock tags, campaign tracking, and merge parameters.
Adjust appearance in the Design tab.
Configure data sources, filtering, and merchandising in the Data Sources, Filtering, and Merchandising tabs, matching settings to your selected tactic.
In the Behavior tab, set popup display options.
Example: Set Popup Minimum Delay (Seconds) to a few seconds so it appears shortly after the page loads.
Select SAVE AND USE, then select your website slots and desired folder.
3. Use Slot Rules to show only on out-of-stock products
After creating your slot, configure the slot name and tags under Edit options, then select Save.
In the top-left Action menu, select Rules.
Drag the Product Field rule from the Current Page section into the space between Slot Displayed and your SmartBlock.
Configure the rule:
Page Type is Product Browse.
Under Product, drag another Product Field rule into the Yes line under your first rule.
Configure the field:
Target: Product(s) on Current Page
Field: Stock
Condition: That is equal to 0
Drag your SmartBlock into the Yes line under this rule.
Add a No Content block to the No line.
You can stack filters to limit recommendations to specific price brackets. For example, use filters to show products priced greater than 10 and less than 20.
4. Test and deploy
Select SAVE.
In the Action menu, select Use.
Deploy the block using the Site Editor or manually insert the provided HTML code into your site.
Best practices
Use the Similar to Product on Page tactic to ensure recommendations are highly relevant.
Test with multiple scenarios, including products with limited stock, to confirm correct triggering.
Avoid setting the popup delay too short — one to three seconds is ideal.
Consider combining stock level and price filters for more targeted suggestions.