This page describes every storefront recommendation widget: what the shopper sees, and every setting with its default. For the steps to place a widget, see Add widgets to your theme.
The widgets at a glance
Widget | Where the shopper sees it | How you place it |
|---|---|---|
Recommendations widget | Any page section: homepage, product page, collection page, and more. | The Recommendations app block. |
Bought Together bundle | The product page. | The Bought together app block. |
Cart page recommendations | The cart page. | The Cart recommendations app block. |
Cart drawer recommendations | The slide-out cart drawer. | A checkbox in the app embed settings. See Add widgets to your theme. |
Recently viewed | Any page section: product page, cart page, 404 page, and more. | The Recently viewed app block. |
Checkout & after-purchase widgets | Checkout and the pages after purchase. | The Shopify checkout editor. See Checkout & after purchase. |
Search widgets | The search modal and the search results page. | See Search widgets. |
Collection filters | Collection pages. |
The three layouts
Every recommendation widget renders its products in one of three layouts. Each app block has a Layout setting with these options:
Layout | What the shopper sees |
|---|---|
Carousel | One scrolling row of cards, with Previous and Next arrows. Pagination dots and autoplay are optional. |
Grid | Fixed rows of cards. The default is 4 columns on desktop and 2 on mobile. |
List (compact) | Small rows with a thumbnail, title, and price. Made for narrow spaces. No badges or swatches. The rows use the Widget background color from Design, when you set one. |
The option App default follows the Default layout that you set in Design. Carousel behavior — arrows, dots, autoplay — is set once for all widgets. See Style your widgets.
The recommendations widget
The Recommendations block is the main widget. You can place it on any page, more than once. Each block picks its own model, so one product page can show two different widgets.
Setting | What it does | Default |
|---|---|---|
Recommendation model | Which model fills this block. Automatic (best for this spot) shows the suggested model for the block's Placement. With Placement on Automatic — match the page, it shows the suggested model for the page: Similar Products on a product page, Smart Mix on the homepage, Complete your cart on the cart page. When auto-pick is on for the placement, auto-pick chooses the model. The other 14 options always show their model — see the list below. | Automatic (best for this spot) |
Custom model slug (optional) | The slug of an active Custom Blend. It overrides Recommendation model above. A custom blend needs a product page. | Blank |
Layout | Carousel, grid, or list for this block. | App default |
Star rating | Show or hide the review-app rating on each card. App default follows Show rating stars in Design → Cards. | App default |
Number of products | How many products to show (4 to 20). | 8 |
Section title | The heading above the widget. Leave blank for an automatic title from the model. | Blank (automatic) |
Placement | Which surface this block is standing in for, chosen from a dropdown — it drives analytics, per-surface styling, and auto-placement. Leave it on Automatic and the app works it out from the page. It used to be a free-text box, where a single typo would quietly drop the widget out of auto-placement and styling. | Automatic — match the page |
Card overrides | Five dropdowns that change this block only: Desktop columns (2 to 6), Product badges, Variant swatches, and Quick add-to-cart (Show or Hide), and Products shown elsewhere (don't repeat products other widgets on the page show, or allow repeats). App default keeps the app-wide setting: Desktop columns from Design, and Quick add-to-cart, badges and swatches from Design → Cards. Products shown elsewhere has no app-wide setting; its default is don't repeat. | App default |
The 14 models in the dropdown
Each option links to the page that explains its model. The order is the order of the dropdown. Automatic (best for this spot) is first in the dropdown. It is not a model: it lets the app choose (see above).
Option in the theme editor | Model in this guide |
|---|---|
Smart Mix | |
Trending now | |
Best sellers | |
Recently viewed | |
Similar products | |
On sale | |
New arrivals | |
Back in stock | |
Frequently bought together | |
Complete the Look | |
Complete your cart | |
Replenishment | |
Premium Picks | |
Up Next |
The Recommendations block and its settings in the theme editor.
The Frequently Bought Together bundle widget
The Bought together block shows a bundle on the product page. The app builds the bundle from real order history. The shopper sees:
- The current product plus its bundle partners, joined with a plus sign.
- A checkbox on each product. The current product stays selected.
- A Total price for the selected products.
- A savings line, for example Save $12.00, when selected products have sale prices.
- An Add all to cart button. It shows Added! on success.
Setting | What it does | Default |
|---|---|---|
Star rating | Show or hide the review-app rating on each card. App default follows Show rating stars in Design → Cards. | App default |
Number of products | Bundle size, including the current product (2 to 6). | 3 |
Section title | The heading above the bundle. Leave blank for the automatic title, Frequently Bought Together, in the shopper's language. | Blank (automatic) |
The bundle widget: checkboxes, total price, savings, and one add-all button.
Cart page recommendations
The Cart recommendations block is a cart-aware widget for the cart page. It reads the shopper's live cart and recommends products that fit the basket. On an empty cart, the widget stays hidden.
Setting | What it does | Default |
|---|---|---|
Recommendation model | One of:
| Automatic (best for this spot) |
Custom model slug (optional) | The slug of an active Custom Blend. It overrides Recommendation model above and combines the blend's picks for every product in the cart. | Blank |
Layout | Carousel, grid, or list for this block. | App default |
Star rating | Show or hide the review-app rating on each card. App default follows Show rating stars in Design → Cards. | App default |
Number of products | How many products to show (4 to 20). | 8 |
Section title | The heading above the widget. Leave blank for an automatic title from the model. | Blank (automatic) |
Placement | Chosen from a dropdown. On the cart page the useful choice is Cart drawer, which shares analytics and auto-placement with the slide-out drawer strip. Leave it on Automatic and the app works it out from the page. | Automatic — match the page |
Card overrides | Five dropdowns that change this block only: Desktop columns (2 to 6), Product badges, Variant swatches, and Quick add-to-cart (Show or Hide), and Products shown elsewhere (don't repeat products other widgets on the page show, or allow repeats). App default keeps the app-wide setting: Desktop columns from Design, and Quick add-to-cart, badges and swatches from Design → Cards. Products shown elsewhere has no app-wide setting; its default is don't repeat. | App default |
Cart drawer recommendations
This widget puts a recommendation strip inside the slide-out cart drawer. It needs no layout change — you turn it on with the checkbox Show recommendations in cart drawer in the app embed settings. The steps are in Add widgets to your theme.
The same drawer can also carry a cart goal bar — “Spend $12.50 more for free shipping” — with up to five steps. It is configured in the dashboard rather than in the app embed settings, and it is a separate feature from this strip. See Cart goal bar.
Setting | What it does | Default |
|---|---|---|
Show recommendations in cart drawer | Turns the strip on or off. | Off |
Recommendation model | One of:
| Automatic (best for this spot) |
Custom model slug (optional) | The slug of an active Custom Blend. It overrides the drawer model above. | Blank |
Number of products | How many products to show (2 to 8). | 4 |
Section title | The heading above the strip. Leave blank for an automatic title from the model. | Blank (automatic) |
Drawer selector (advanced) | A CSS selector for themes the app cannot detect. Leave blank to auto-detect. | Blank |
Recently viewed
The Recently viewed block shows the products the shopper opened on this browser. Most recent first. It is memory, not prediction. Shoppers use it to return to products they compared.
The app keeps the list in the shopper's own browser. The list holds up to 20 products, for up to 30 days. It holds product IDs only. Every price and image is fetched fresh each time the block appears, so nothing goes stale.
The block hides itself until the shopper has viewed two or more products. On a product page, the block leaves out the product the shopper is looking at.
This block does not call the recommendation service. So it works when the shopper declines tracking consent, and it works in a new tab. It is not the same as the Recently viewed option in the Recommendations block model dropdown. See Models: personalized.
Setting | What it does | Default |
|---|---|---|
Layout | Compact strip shows a small card with the image, title and price only. Carousel shows the full product card. | Compact strip |
Number of products | How many products to show (4 to 20). | 12 |
Section title | The heading above the block. Leave blank for the automatic title in the shopper's language. | Blank (automatic) |
Product card elements
Every widget builds its display from product cards. A card always shows the product image, title, and price. Sale prices show next to the crossed-out original price. The elements below are optional. You control them from the styling screens — see Style your widgets.
Badges
A card shows at most one badge. A sale badge wins over the other types.
Badge | When it shows |
|---|---|
Sale | The compare-at price is higher than the price. The badge shows the percent saved, for example -25%. If Show compare-at price is set to Hide in Design → Cards, the badge reads Sale. |
New | The product has the tag |
Trending | The product has the tag |
Low Stock | Inventory is at or below the low-stock threshold. The default threshold is 10. |
Sold Out | The product is unavailable. The card also dims. |
Turn badges on or off, and set the threshold, in Design → Cards.
Variant swatches
Swatches show a product's options under the price. Colors render as filled circles. Other options render as text chips. When the shopper picks a swatch, the card updates its price and image. Each option shows up to 5 swatches, then a +N link to the product page.
You can map option names like "Sage Green" to exact colors or images. See the Swatches tab of Design in Style your widgets.
Quick add button
The Add to cart button on a card adds one unit to the cart. When a product has several variants and the shopper has not picked one, the button opens the product page instead. This prevents a wrong-variant add. Turn it on with Quick add-to-cart in Design → Cards.
Quick view
The Quick view button appears on the card image when the shopper hovers, on desktop only. It opens a small dialog with the image, price, swatches, an add-to-cart button, and a View full details link. Turn it on with Quick view in Design → Cards.
Wishlist button from your wishlist app
PersonalizerAI cards do not have their own wishlist or save button. If you run a wishlist app such as Swym or Wishlist King, you can put that app's button on the cards through the After image card slot. This step needs a developer — see Build your own widget.
When a shopper adds a product to the wishlist, the app counts it as a strong interest signal. It helps that product rank in Trending Now and in the shopper's personalized results. The wishlist itself stays in your wishlist app. PersonalizerAI does not store it and does not show it back.
More card elements
- Star ratings — shows the review score. Needs a connected reviews app. See Integrations.
- Hover swap — shows the product's second image on hover.
- Vendor and product type — small text lines above the title.
- Subscription available — a small pill for products with a selling plan.
One product card with a badge, swatches, the quick add button, and Quick view on hover.
Related pages
- Add widgets to your theme — how to place each widget.
- Checkout & after purchase — the widgets beyond the storefront.
- Style your widgets — colors, layouts, and card elements.
- Bundles & bundle discounts — automatic discounts for the bundle widget.
- Search widgets — the search modal and results page.