Personyze Wiki Personyze Wiki docs
Open Personyze

Vertical Product List — Clean Catalog

A vertical recommendation list for sidebars and narrow sections: white cards with photo, title, price, badges, and Add to Cart, in side or stacked layout, with a progressive Show More…

Updated 4 hours ago 4 min read
A
by Admin

Vertical Product List — Clean Catalog

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

A vertical recommendation list for sidebars, popups, and narrow page sections. Products show as white cards with the photo, title, price, badges, and an Add to Cart button, in one of two layouts: a thumbnail beside the text (side) or the image above the text (stacked). A Show More button reveals the list progressively.

The Vertical Product List annotated: thumbnail, title and price column, badges on the thumbnail, low-stock badge, and the Show More button
1 The thumbnail (side layout) — 72–96px, adjustable.
2 Title and price to its right.
3 Badges sit on the thumbnail — Best Seller here.
4 The red low-stock alert, auto-stacked in its corner.
5 Show More reveals the next batch; it becomes Show Less once everything is visible.
This page is the full reference for all three vertical list templates — Dark Premium and Compact Minimal run on the same engine with different defaults. Badges, pricing, ratings, wishlist, and Add to Cart work exactly as in the slider templates; their full reference is in the Overlay Card Recommendations Slider guide.

Quick Start

  1. Add the action and choose the Vertical Product List template.
  2. Point the Main Product Image Column (Item Image) 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 once your catalog loads.
  3. Pick the Item Layout in List Layout: side for a compact sidebar list, stacked for full cards.
  4. Set Items Shown Initially and Items Revealed Per Click in the Show More section.
  5. Preview on all device sizes and publish.

The Two Layouts

  • side — thumbnail on the left (72–96px, size adjustable), text and price to its right. The classic “You may like” sidebar pattern; works in very narrow spaces.
  • stacked — full-width image on top (height adjustable), text below. Effectively a single-column card feed; best when the widget has 300px+ of width.

One dropdown switches between them; every other option works in both. The widget’s overall width is capped in Widget Layout → Container Style (420px by default).

How Show More Works

The list renders up to 12 products but displays only the initial count (default 3) — this limit is applied at the moment the page renders, so visitors never see a flash of the full list. Each Show More click reveals the configured number of additional items (default 3). Once everything is visible the button reads Show Less, and one click collapses back to the initial count. The button hides itself when there’s nothing to expand, and both labels are editable.

Numbering (Top-10 Style)

Turn on Item Numbers to badge each item 1, 2, 3… — for “Top 10 this week” style lists. The counter tracks visible items, so numbering stays correct as Show More reveals more. The badge is a styleable circle anchored to the item’s corner.

Heads-up: the number shares the top-left area with the badge stack. If you use both numbering and badges, move one — either the badge stack (Badge Stack Corner dropdown) or the number (in Number Badge Style) — or they’ll overlap.

Demo Products

Same logic as the sliders, with Show More included:

  1. Demo items render only in preview contexts — the Personyze editor and _S_T= preview links. Real visitors never see them; a live site with no catalog shows an empty widget.
  2. In preview with no catalog connected, the six demo products replace the editor’s placeholder row, and the Show More flow works on them exactly as it will on real products — 3 shown, reveal on click.
  3. The moment a real catalog returns more than one product, real products take over everywhere.
  4. One toggle controls it: Widget Layout → Demo Products (Preview Only). Safe to leave on.

What’s Shared With the Sliders

Badges (with the auto-stacking corner system), Pricing with sale strikethrough, Star Ratings, Add to Cart with toast confirmations, and the Wishlist heart are the same proven sections as the slider templates — configured identically, and documented in the shared guide. The image area supports contain (full product visible on white) or cover fit, plus a subtle zoom on hover.

FAQ

Only 3 items show and I expected more.
That’s Items Shown Initially — raise it, or visitors click Show More.

The numbers overlap a badge.
Both default to the top-left. Move the badge stack to another corner (Badge Stack Corner) or reposition the number badge in Number Badge Style.

Can I make it horizontal?
No — use the slider templates for horizontal rows; this engine is built for vertical lists.

Items look too tall / short in stacked mode.
Image Area Size (Stacked Layout) controls the photo height; side mode has its own thumbnail width/height fields.

Related