Product Recommendations Widget for Websites

What it solves & why businesses use it

One of the drop-off points in e-commerce is choice overload or simply not seeing the right product. A product recommendations widget helps guide users toward relevant items based on what they’re browsing. It solves key friction points:

• Helps users find what they’re looking for faster.


• Suggests related or complementary products.


• Keeps users exploring the site longer.

When & how to use it

A product recommendations widget works best when you want to guide visitors toward featured or high-margin products. Showcase bestsellers, seasonal picks, related products, or promotions to help users discover what’s worth checking out. This works for both new visitors and returning shoppers. Use it in these scenarios:

• On the homepage to highlight ‘Sale of the day/week’ or favorites.


• On category pages to spotlight trending or high-margin products.

A built-in widget works best when you want the product recommendations to feel like a natural part of the page. Add ‘Our bestsellers’, ‘Recently restocked’, or ‘Customers love these’ to the pages where users expect to browse. Use a floating box when you want to grab attention without interrupting the flow. It’s perfect for spotlighting weekly promos or limited-time offers with specific products. These product recommendations need to feel relevant and well-timed. Trigger ideas:

• Scroll depth (after 50%) to catch users already exploring.


• Inactivity (60 seconds idle) to re-engage attention.


• Time on page or site (with at least 20 seconds delay) to make sure the content isn’t overwhelming right away.

How it looks

Product recommendations widgets are designed to be visual, clear, and quick to scan. The goal is to showcase a few standout items without overwhelming the user. It usually shows one to three products with a small image, price, short label, and a CTA.

Pairs well with

Recommend products widgets well combined with first-purchase discount popups, free shipping, or BOGO offers. Use them alongside social proof (like reviews or ratings) to give hesitant shoppers a final push.

How to set it up

Let’s put together a product recommendations widget — it’ll only take a few minutes, and the result is totally worth it.

Step 1: Pick a template

No need to build from scratch. Claspo has over 1000 pre-made templates for all kinds of goals. Just pick one that fits what you need — layout, fonts, buttons already set up for high engagement. You just need to add your content and branding.

Step 2: Customize it

Your widget should feel like it belongs on your site, especially when it’s embedded, like the one we’re using here. Claspo’s drag-and-drop editor makes that super simple. Click any element to open its settings on the right. For example, to change the image you should just click it and upload your own (PNG, JPEG, WebP, or GIF). You can also choose whether the image has rounded corners or square — totally up to your style.

Next, click on the title and body text, and you’ll see all the customization options — font, size, color, spacing.

For the CTA button, head to the Style tab to adjust the color, shape (round or sharp), hover effect, and text.

The most important part — make sure the button leads to the right product page. To do that, go to General > Action on click > Add action > Open URL, then paste in your link.

Step 3: Set up placement

Since this is an embedded widget, you’ll want to choose exactly where it goes. Our editor will guide you through it step-by-step. Just expand the ‘How to find a CSS selector’ section if you need help.

Once everything’s in place, choose your display settings and click ‘Test widget’ to preview how it looks on your site (don’t worry — only you can see it). Happy with how it looks? Hit ‘Next’ and let’s choose a page for displaying the widget. In the Triggering tab, scroll to the ‘On pages’ section, click Add condition > URL > Equals, and enter the appropriate URL.