Personyze Wiki Personyze Wiki docs
Open Personyze

Product Recommendations Slider — Clean Catalog Cards

A classic e-commerce recommendation slider: product photo on a white card with the title, live view and sold counts, and price below the image.

Updated 13 hours ago 4 min read
A
by Admin

Product Recommendations Slider — Clean Catalog Cards

Action type: Product Recommendations. Configured from: the action menu — no code required.

The Clean Catalog slider shows recommendations in the classic e-commerce style: the product photo on a white card, with the name, live view/sold counts, and price below the image. Hovering a card lifts it on a soft white panel and reveals the Add to Cart button. It fits marketplaces, supply stores, and any site with product photos on white backgrounds.

The Clean Catalog Cards recommendations slider: product photos on white cards with the title, view and sold counts, and price centered below the image
Clean Catalog Cards: photo on white, with the title, live stats, and price centered below it.
This template runs on the same engine as the Overlay Card slider — every slider, arrow, dot, autoplay, badge, and demo-mode option works identically. This page covers what is specific to this look. For the full options reference, see the Overlay Card Recommendations Slider guide.

What Defines This Look

The Clean Catalog Cards slider annotated: uncropped photo on white, low-stock badge on the photo edge, centered text block, and green circle arrows
1 Image on white, never cropped — background-size: contain, so cutouts show in full.
2 Badges overlap the photo — the red low-stock alert sits on the photo’s bottom edge; Best Seller (orange) and Popular (blue) sit at the top.
3 Centered text below the image — title, thin divider, views and sold counts (sold in orange), then the price in bold.
4 Small green circle arrows on the row’s sides.
  • Image on white, never cropped. The photo area uses background-size: contain so product cutouts show in full. If your catalog has lifestyle photos instead, switch Card Box Style to cover.
  • Text below the image, all centered: product title (2–3 lines with ellipsis), a thin divider, the views and sold counts (sold in orange), and the price in bold. These come from the Product Title, Site Statistics, and Pricing sections, which are on by default in this template.
  • Add to Cart is on by default, hidden at rest and revealed when the visitor hovers the card — the card simultaneously lifts with a soft shadow, creating the elevated white panel effect.
  • Badges overlap the photo: Best Seller in orange, Popular in blue, and the red low-stock alert at the photo’s bottom edge. New and Discount badges are also on by default.
  • Small green circle arrows on the row’s sides. Change them in Slider Arrows — pick any preset from the Arrow Style dropdown, restyle the green in Side Arrow Custom Style, or choose none to inherit your site theme’s buttons.

Quick Start

  1. Add the action and choose the Clean Catalog Cards slider template.
  2. Point the Main Product Image Column (Card Image Style) at your catalog’s image field. With no catalog connected yet, six demo products appear in the editor with a notice banner — visitors never see them, and they disappear automatically once your catalog loads.
  3. Set the visible item counts for desktop / tablet / mobile in Slider & Items Per View.
  4. The view/sold counts only display when a product clears the minimum thresholds in Site Statistics (600 weekly views / 10 weekly purchases by default) — lower them for smaller stores, or turn the block off.
  5. Preview on all three device sizes and publish.

Worth knowing up front: those statistics thresholds are the most common surprise with this template. On a low-traffic store or a new catalog, most products won’t clear 600 weekly views, so the stats row silently disappears from their cards — the widget looks broken but is behaving as configured. Lower the thresholds to match your actual traffic.

Switching Styles Without Switching Templates

The three slider templates differ only in defaults, so this one can be reshaped from the menu:

  • Turn on Show Text on Image (Text Overlay section) plus the Gradient Overlay and turn off the below-image blocks, and you have the Overlay look.
  • Recolor the card and text and you have the Dark Premium look.

Use whichever template starts closest to your target.

FAQ

The photos have white boxes around them.
Your images have opaque white backgrounds, which is exactly what this skin expects — the card is white so they blend seamlessly. If a photo shows a non-white box, the source image has a colored background; use cover in Card Box Style, or fix the image.

The stats row is missing on some cards.
Those products are below the Site Statistics thresholds. Lower Min Weekly Views / Min Weekly Purchases, or hide the block.

The Add to Cart button doesn’t add to cart.
The button calls your site’s cart integration — configure it under Add to Cart Button (cart integration code and argument), same as any Personyze recommendation widget.

Do the demo products ever show to real visitors?
No. They render only in the editor and on preview links, and only while no catalog is connected.

Related