The product-page widget is the heart of AI Product Recommendations. It shows products that go with the one being viewed, and it’s also where the plugin records product views, which is how it learns what shoppers look at together.

In this tutorial we’ll add it to your product page template and check what shoppers see.

#Steps in short

1. Add a Product Review element set to AI Product Recommendations.
2. Set the element’s Min Height to about 100 px.
3. Publish, then open a product on your store.

#1. Add the widget to your product template

In the page builder, open your product page template (Storefront → Templates, then the Products tab). From Elements → Single Product, add the Product Review element where you want the widget — despite its name, it shows any plugin’s product-page widget. In its Content settings, under Review Plugin, set Plugin to AI Product Recommendations rather than leaving it on Auto (first available).

Put it where you want suggestions to appear — usually below the product description. On the product template, the widget knows which product is being viewed.

#2. Keep empty space to a minimum

In the canvas the widget is only a placeholder; on your storefront it grows to fit the recommendations.

The element keeps 400 px of space by default, even where the widget has nothing to show. Under Advance → Container, set Min Height to about 100 px — the widget still grows to fit what it shows.

#3. Publish and check a product page

Press Save, then Publish. Saving on its own keeps your changes as a draft, and the orange Unpublished changes pill reminds you they aren’t live yet.

Then open a product on your store. Shoppers see your heading (“You may also like” by default) and a row of product cards, each with a small label saying why it’s there: BOUGHT TOGETHER, CUSTOMERS ALSO VIEWED, SIMILAR or TRENDING. Clicking a card opens that product.

To see the widget’s look without leaving the dashboard, use the Widget tab on the AI Recommendations page.