Build a product recommendation engine in Bubble showing Customers also bought, category-based suggestions, recently viewed items, and manually featured products. This tutorial covers tracking user browsing behavior, creating recommendation logic with searches and tags, and displaying suggestions in Repeating Groups to increase average order value.
Overview: Setting Up Product Suggestions in Bubble
Product suggestions increase engagement and sales by showing users items they are likely to want. This tutorial builds four recommendation patterns: co-purchase suggestions, category-based recommendations, recently viewed products, and admin-curated featured items.
Prerequisites
- A Bubble app with a Product Data Type and catalog
- User accounts with purchase or browsing history
- Basic understanding of Repeating Groups and searches
Step-by-step guide
Track product views and purchases
Track product views and purchases
Create a Data Type called ProductView with fields: Product (Product), User (User), Viewed_At (date). When a user visits a product detail page, create a ProductView record in the Page is loaded workflow. For purchases, your Order/LineItem records already track which products were bought. Add a Tags field (list of text) to Products for category-based matching.
Expected result: Product views are logged for each user, providing data for recommendations.
Build Customers also bought suggestions
Build Customers also bought suggestions
On the product detail page, find other products frequently purchased alongside the current product. Search for LineItems where Product = Current page Product, then get the Order for each. Search for other LineItems in those same Orders where Product is not Current page Product. Display these products in a horizontal Repeating Group labeled Customers also bought. Sort by frequency (products that appear in the most co-orders rank higher).
Pro tip: Pre-compute co-purchase data in a nightly backend workflow to avoid expensive real-time queries. Store results in a Related_Products list field on each Product.
Expected result: A Customers also bought section shows products frequently purchased together.
Add category-based and tag-based suggestions
Add category-based and tag-based suggestions
Below the product details, add a Repeating Group labeled You might also like with Source: Do a search for Products where Category = Current page Product's Category AND Unique ID is not Current page Product's Unique ID, limit 4. For tag-based matching, search Products where Tags contains any of Current page Product's Tags. This shows products in the same category or with overlapping tags.
Expected result: Category and tag-based product suggestions appear on every product detail page.
Display recently viewed products
Display recently viewed products
On the product detail page or homepage, add a Recently Viewed section. Search for ProductViews where User = Current User, sorted by Viewed_At descending, limit 8. Display each ProductView's Product in a horizontal Repeating Group. To avoid showing the current product, add a constraint: Product is not Current page Product. This gives users a quick way to return to products they browsed earlier.
Expected result: A recently viewed section shows products the user has browsed, sorted by most recent.
Create admin-curated featured products
Create admin-curated featured products
Add a Featured (yes/no) field and a Featured_Sort (number) field to the Product Data Type. Build an admin page where you can toggle Featured on products and set their sort order. On the homepage or category pages, add a Featured Products section: Search Products where Featured = yes, sorted by Featured_Sort ascending. This gives you manual control over what appears in the prime recommendation spots. For AI-powered recommendation engines, RapidDev can help integrate machine learning services.
Expected result: Admins can manually curate featured products that appear prominently in the app.
Complete working example
1PRODUCT SUGGESTIONS — WORKFLOW SUMMARY2=======================================34DATA TYPES:5 Product (extended): Tags (list of text), Featured (yes/no),6 Featured_Sort (number), Related_Products (list of Products)7 ProductView: Product, User, Viewed_At (date)89CO-PURCHASE SUGGESTIONS:10 1. Find LineItems for current Product11 2. Get Orders containing those LineItems12 3. Find other Products in the same Orders13 4. Display in horizontal RG, sorted by frequency14 Optimization: Pre-compute in nightly backend workflow1516CATEGORY SUGGESTIONS:17 Search Products: Category = Current Product's Category18 Exclude current product, limit 41920RECENTLY VIEWED:21 Search ProductViews: User = Current User22 Sorted by Viewed_At desc, limit 823 Display each ProductView's Product2425FEATURED PRODUCTS:26 Search Products: Featured = yes27 Sorted by Featured_Sort ascending28 Admin page: toggle Featured and set sort orderCommon mistakes when building product suggestions in Bubble
Why it's a problem: Computing co-purchase suggestions in real-time on every page load
How to avoid: Pre-compute related products nightly and store them in a Related_Products list field on each Product.
Why it's a problem: Showing the current product in its own suggestion list
How to avoid: Add a constraint excluding the current product's Unique ID from all suggestion searches.
Why it's a problem: Not limiting the number of suggestions shown
How to avoid: Limit Repeating Groups to 4-8 items for suggestion sections.
Best practices
- Pre-compute co-purchase data in nightly backend workflows for performance
- Exclude the current product from all suggestion Repeating Groups
- Limit suggestions to 4-8 products per section for visual clarity
- Use horizontal Repeating Groups for suggestion carousels
- Track product views to power recently viewed and personalized recommendations
- Allow admin curation of featured products for seasonal or promotional control
- Use tags for cross-category suggestions when products share attributes
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add product recommendations to my Bubble.io e-commerce app including customers also bought, category suggestions, and recently viewed. Help me design the data model and search logic.
Create a product detail page with three suggestion sections: Customers also bought (from co-purchase data), You might also like (same category), and Recently Viewed (from browsing history). Each section should be a horizontal Repeating Group.
Frequently asked questions
How many product views should I store?
Keep 90 days of ProductView records. Delete older ones in a weekly backend workflow to manage database size.
Can I use AI for product recommendations?
Yes. Send user behavior data to an AI API via the API Connector for personalized recommendations. The AI returns product IDs that you display in a Repeating Group.
How do I A/B test different suggestion algorithms?
Create an Option Set for suggestion methods. Assign users randomly to a method and track click-through rates per method to determine which performs better.
Do product suggestions affect Workload Units?
Each search in a suggestion section consumes WUs. Pre-computing recommendations and storing them as list fields reduces WU consumption significantly.
How do I track if users click on suggestions?
Create a SuggestionClick Data Type. When a user clicks a suggested product, log which suggestion section they clicked from. Analyze click-through rates per section.
Can RapidDev build advanced recommendation engines?
Yes. RapidDev can integrate machine learning services for collaborative filtering, content-based recommendations, and real-time personalization in Bubble apps.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation