Skip to main content
All CollectionsRecommendationsFAQ
Mini-Cart And Add-To-Cart Pop-Up Recommendations
Mini-Cart And Add-To-Cart Pop-Up Recommendations
Dan Macarie avatar
Written by Dan Macarie
Updated over a week ago

Using a mini cart in your store and showcasing cross and upsells as part of this is a great way to incrementally increase the average order value in your store.

Nosto can filter products by a huge variety of attributes within each recommendation type. So typically you want to use the cart based recommendation algorithm to show relevant products that go well with the cart contents, then filter by price to ensure that products shown are relatively affordable compared with the basket contents.  Nosto recommendations within this feature have been driving increases in basket value but also conversion rate. Typically the conversion rate of these elements can be 2-10% higher than the site conversion rate!

Add to cart pop-up featuring cross-sellers


Mini-cart dropdown element featuring cross-sellers


How to get started?
The technical implementation requires a tiny customisation added to your site itself, because mini-cart drop down elements and site’s native add-to-cart pop-ups are practically always loaded dynamically and not as a part of the page load. This means that without re-initiating Nosto’s javascript, we’re unable to produce the recommendation as data about cart content or recommendation is not changed between a browser and Nosto, respectively.

A technical solution and prerequisite to include recommendations to dynamically loaded elements is to re-initiate Nosto’s javascript by calling a function, which sends the cart content as tagging to Nosto and simultaneously loads the recommendation to position on the site. For further technical reference and to get started, please read Nosto’s Javascript API documentation. A recommendation itself is positioned to the desired element by adding a recommendation placeholder to place where you want to display the visible recommendation similarly to any recommendation on the site. Design is adjusted just like any other recommendation on your site.
As a checklist:

  • Create a new recommendation slot and design it to fit to your element

  • Add the recommendation placeholder to the desired location

  • Create the cart tagging dynamically within the element

  • Call Nosto’s Javascript API which pushes tagging to Nosto and loads the recommendation in a browser when your mini-cart element or add to cart pop-up is loaded

Did this answer your question?