OptiMonk can put your store's own products — their pictures, names and prices — straight into your popups, so you can design an offer around real products instead of uploading them one by one. This is the product recommender, and it is what powers upsell, cross-sell and cart-abandonment popups.
1. Ask for a popup with products in it
You no longer pick an "Increase sales" template and drag a Product element onto it. You describe the offer.
Click New campaign in the left menu.
Describe what you want — for example "a cart-abandonment popup for yourstore.com showing three products from the visitor's cart with a 10% code".
The assistant asks a few clarifying questions, then shows four concepts with a picture each.
Open the one you like and follow the steps from its header: Next: targeting, then Build it.
💡 Say how many products you want in the brief. The number of product cards comes from the design and cannot be changed afterwards in the panel — the panel simply reports it: "{count} product card(s) — from the design".
2. Open the product settings
Open Campaigns in the left menu and click your campaign.
Open the variant and click Drag & drop editor.
Click the product row on the canvas. The right-hand panel opens on the Visual tab with the header Product recommender.
The panel opens with the rule that matters:
This is the OM product component. Its cards are filled by the runtime at display time (in a dynamic mode straight from the shop), so a product name, price or picture typed over on the canvas would be silently discarded — edit a card by clicking it, or from the list below. The number of cards comes from the design; it cannot be changed here.
3. Choose the Mode
The Mode dropdown decides where the products come from:
Manual (fixed products) — you choose the exact products yourself.
Most viewed — your most viewed products.
Last visited — the products this visitor looked at.
Products in the cart — what this visitor has in their cart right now.
Smart recommendation — a personalised recommendation.
The four dynamic modes need your store connected. Without a connection they are greyed out with a store needed hint and the panel explains why:
The dynamic modes need your store connected to OptiMonk.
Click Why? for the full answer:
Most viewed, Last visited, Products in the cart and Smart recommendation each pick the products live, from your store's own data. Without that connection the popup would have nothing to fill the cards with, and OptiMonk hides the whole campaign rather than showing empty ones.
Manual always works, with or without a store.
Connecting your store
Connect the store in the OptiMonk admin under Settings → Insert code: pick your platform there (Shopify, Shoprenter, WooCommerce, Unas, Gomag, MerchantPro) and finish the connection — on Shopify it happens by installing the OptiMonk app. The separate Integrations page is for e-mail/marketing tools, not for the store.
Some platforms ask for an API key during that connection (Unas and Gomag a single key, MerchantPro an API user and password). Once the key is saved you see Connected — we can keep your product catalog in sync. Once the store is connected, the dynamic modes become selectable here and the cards fill themselves.
4. Pick products by hand
Under the Mode dropdown every card is listed with its thumbnail, name and price. Click one to open it.
From the store's catalog sits at the top of the card editor: search with Search product… and click a product to fill the card in one go. If there is no cached catalog for the domain, the editor says so — No cached catalog for this domain — fill the card's fields in by hand below — and you type the values in.
Below that, every field of the card:
| Field | What it is |
|---|---|
| Name | The product name |
| Price | The current price |
| Original price | The crossed-out price, if you show one |
| SKU | The product's SKU |
| Button label | The text on the card's button |
| Image URL | The product picture |
| Product page URL | Where the card's button takes the visitor |
A field the design didn't lay out is disabled and labelled not laid out by the design — that card simply doesn't display it.
Click Save to keep your changes, Cancel to drop them.
💡 Open the product in a new tab is a switch on the main panel, above the card list: it applies to every card.
5. Style the card's button
The card's button has its own Button (CTA) section on the panel:
Width — Automatic, Full width or Fixed (with a Width (px) value)
Height (0 = automatic), Font size, Font family (Inherited (card font) or one of the editor fonts)
Text color, Background, Hover background, Hover text color
Horizontal padding, Vertical padding, Corner radius
Everything else about how the cards look — their layout, borders, spacing — comes from the design. Ask for those on the AI tab: "make the product cards two-column".
6. Good to know
Save before you leave. Click Save & Exit in the editor's top bar. Nothing reaches your visitors before that.
Watch the card count warning. If the design and the stored settings disagree, the panel warns you: The settings declare {declared} products but the row holds {actual}. The build writes the real count back on the next change; a mismatch would hide the campaign.
Without a store you can still upsell. Use Manual mode and fill each card in by hand — name, price, picture, link. It takes a few extra minutes compared to a synced catalog, and it works on any platform.