Recommendation Widget

Recommendation Block · Product Recommendation Widget

Definition

A recommendation widget is the UI component on a site page that displays algorithmically selected products as a carousel, a grid or a list. It is the delivery surface, not the algorithm — the same widget can be driven by any recommendation strategy.

The recommendation widget and its place in the funnel

The recommendation widget is where the algorithm meets the shopper. A personalization engine can
assemble a perfect selection, but without a UI component to display it, nobody sees it.

The widget does three jobs in the e-commerce funnel:

Retention — offers alternatives when the current product is not what the shopper wanted.
Monetisation — cross-sell and upsell raise average order value.
Return — reminds the shopper of products they viewed or left in the cart.

Types and formats

Format	Description	Suits
Carousel	Horizontal scroll, 3–6 cards visible	Product page, homepage, mobile
Grid	2–4 cards per row, fixed block	Cart, pop-up
Compact list	Text plus thumbnail, no full cards	Sidebar, footer
Full-width block	Wide, banner-style format	Homepage, hero area

Placement by page type

PDP (product page): the primary home for recommendation widgets. The standard pattern is two
widgets — Similar items (alternatives) and Frequently bought together (an addition to the purchase).
Position: below the main product content, above the reviews.

Homepage: a personalized widget driven by the shopper’s history. For new visitors, trending
products or bestsellers.

Cart: cross-sell against the cart contents. Placed below the item list so it does not pull
attention away from checkout.

404 and empty search: Recently viewed or Popular products — this is what keeps the shopper from
being lost at a dead end.

Technical integration formats

<!-- Client-side snippet: container plus script -->
<div id="gf-widget" data-strategy="similar" data-item-id="SKU-12345"></div>
<script src="//cdn.platform.ai/widget.js" async></script>

For server-side rendering (Next.js, Nuxt, other SSR frameworks): call the recommendations API on
the server while the page is being generated, so the products are rendered straight into the HTML
with no flicker on load.

Tip: add skeleton placeholders while the widget loads — they remove layout shift and read as a
faster page, even when the actual load time has not changed.

Frequently asked questions

How many recommendation widgets are acceptable on one page?

A product page usually carries two: Similar items and Frequently bought together. The homepage carries one or two. A category listing more often carries one. Putting three or more widgets on a page splits attention and lowers the CTR of each individual block. The right number is settled with an A/B test.

Which widget format performs better — carousel or grid?

A carousel saves vertical space and suits mobile. A grid lets shoppers compare products at a glance without scrolling. On mobile the carousel is usually preferable; on desktop it depends on the page context. Both formats are worth running as A/B variants.

How is a recommendation widget integrated?

The standard route is a JavaScript snippet: place a `<div id="rec-widget">` container where the block should appear and load the platform script. On load, the script requests recommendations through the API, receives a product list and renders the cards. For SSR and headless architectures, integrate server-side through the API and render on the server.

Gravity Field