Convert Visitors 
3 min read 
Entire Store 
Just like every other web-innovation, the inventor of product recommendations in e-commerce remains disputable. However, Amazon absolutely has claim to pioneering their titles such as “Customers Who Bought This Also Bought” and making them an integral part of their own (and practically every) webstore.
That being said, throughout the years, Amazon has not dramatically changed their approach in terms of recommendation web-design. Horizontal and vertical product blocks filled with details like ratings and slashed prices are as easily associated with the ecommerce giant as the Swoosh-logo is to Nike.
Examples of Responsive Design Done Right
Perhaps because of Amazon’s massive influence and the fact it is simple to build a responsive design which collapses horizontal blocks into swipeable single-product elements on mobile devices, many ecommerce websites have adopted the very same design patterns when it comes to recommendations: See examples below from Amazon (not a Nosto client) and Best Buy (also not a Nosto client):
While there are other options, which we will explore through a few examples below, regular horizontal (and vertical) elements are practical and when deployed accordingly, they can massively help visitors to explore the inventory as seen on Alex & Alexa’s product page below (desktop computer). Below that, best sellers on Tucker NYC’s homepage (mobile device) highlight what chic New Yorker ladies are currently shopping and viewing.
Leveraging Nosto’s Flexible Onsite Product Recommendations
To explore the full flexibility of Nosto’s templating system for Onsite Product Recommendations (especially useful for visually compelling fashion brands), we can’t think of a smarter design-example than Finisterre. Thumbing the big product image is required to scroll, which consequently reveals the product name and price as a layer on the image. The same effect is achieved on a desktop by hovering the mouse over the image.
Left: Mobile experience and thumbing effect. Right: Desktop and mouse on-hover
Desktop screen sizes from 11” allow much more creative freedom as seen on Unif and Paper London examples below. Recommendations are structured on a masonry grid, a bit similar to the Pinterest photo cascade. On both, the mouse on-hover action makes the recommendation more inspirational, interactive, and an integral part of the page and browsing experience.
Below: Unif and masonry grid featuring five recommended products
Below: Paper London and similar masonry design with three top products
A key benefit to the masonry grid (especially for fashion retailers) is the possibility to customize landing pages by deploying fully personalized and dynamic recommendations which look like inspirational promotional banners, stretching from one edge of the screen to the other. This uses the power of AI and automatically produces a practically infinite number of landing pages, all recommending the right products to each individual. While conventional design has its time and place, brands sensitive to the negative concept of five-and-dime stores typically prefer a more subtle approach. This is especially true on key landing pages such as the homepage and category pages.
Finally, to demonstrate how Nosto recommendations can be deployed in a niche vertical, Prime Loops, a UK based music store for artists, helps their key customer group of music producers listen to trending samples and beats directly on the homepage by clicking play directly in the recommendation.
