Product recommendations as clean, clickable cards — the same engine as the Buy Together family, without the bundle concept: no current-product anchor, no toggles, and no running total. Each card links straight to its product and carries its own Add to Cart button that appears on hover (like the sliders) and confirms with a modern toast.
How this template works
- Three layouts. Horizontal (a card row, the default — it sizes itself to its cards), vertical (stacked list rows), and compact (a mini strip with small photos, names, and prices).
- Per-card Add to Cart. Each card has its own button. Show Add to Cart controls when it appears: hover (the default — fades in when the shopper hovers the card, always visible on touch screens) or always. Clicking it adds that single product and shows a confirmation: modern (dark rounded toast with a check icon), system (the built-in Personyze notification), or custom (your own JS from the Success and Error Action fields).
- Cards are clickable. Clicking anywhere on a card (outside the button or the name link) opens the product page, respecting the Open Product Links In setting.
- Limit by items or rows. Limit By chooses between a fixed number of products (Max Items Shown, default 4) or a number of full rows (Max Rows Shown, default 1) — however many cards fit per row at the current width. The rest hide behind a collapsible Show N more link.
- Style accents and look presets. Four accents (light, gold, bold, ocean) plus Title Look, Buttons Look, Text Font, and Item Info Order presets. Every color and font remains individually overridable in its own style field.
- Live demo mode. Seven realistic demo products appear while designing — enough to demonstrate the Show More link and hover buttons; site visitors never see them.
Badges, social proof, and product info
- Badges with sensible defaults. Discount percent (hidden at 0), NEW (added in the last 14 days), Popular and Bestseller (top 5%), and low-stock (5 or fewer) — each threshold, text, and style is editable.
- Social proof lines. Per-card “viewed today” and “bought today” counts with a visibility scope.
- Product info lines. Extra catalog fields (brand, custom columns) under the product name.
Loading, popups, and stability
- Loading skeleton shimmer rows show until recommendations arrive.
- Smooth Reveal keeps the widget invisible until its size settles, then fades it in — no jumping while the page loads.
- Popup Hugs Widget shrinks an oversized popup frame to fit the widget; turn it off for full-width banner popups.
- Style-proof rendering. The template’s styles are engineered to survive aggressive site CSS, while per-element customizations made in the editor still take priority.
Good to know
- Row limiting measures the real layout. With Limit By: rows, the visible set is computed from where cards actually land after render, so it adapts to any container width; it is computed once per page load.
- Central pricing. One price format select and one pair of currency-symbol fields apply everywhere prices appear.
- Saved template cards freeze their code. Re-save your copy in Your templates after major updates.
Related
- Buy Together — Bundle Builder with Live Total — the same cards with the full bundle concept: anchor product, toggles, and live totals.
- Bought Together — Classic Strip — photo strip, total box, and checkbox list.
- Templates — the full template library overview.