Personyze Wiki Personyze Wiki docs
Open Personyze
Product Recommendation Templates

Vertical Product List — Photo-Left or Stacked, 4 Style Accents

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 2 weeks ago 2 min read
A
by Admin

Products as stacked rows — built for sidebars, narrow columns, cart pages, and blog placements where a carousel doesn’t fit.

The List Card Layout setting (in Card & Image) switches between two arrangements: photo-left — the classic list row with the image beside the details — and stacked — image on top with details below, as full-width cards. Everything else is the full slider feature set: four Style accents, badges, ratings, statistics, hover effects, per-unit price, Card Info Order, and one-place catalog field mapping.

How this template works

This template family is built around four ideas:

  • Style accents. The first setting, Style accent (light, gold, bold, ocean), recolors cards, badges, buttons, prices, dots, and scrollbars together in one click. Every color is still individually overridable in its own style field afterwards.
  • Catalog Fields in one place. The Catalog Fields section (second in the menu) maps every product column the template uses — images, URL, title, brand, both price columns, rating, description, inventory, discount percent, dates, and custom fields. Mappings are global: setting a column there updates every element that uses it. Stores with fully custom feeds can rewire the whole widget from this single section.
  • Live demo mode. While designing, realistic demo products appear automatically (visitors never see them). The first demo card is a live showcase: click any element on it to style it, and every toggle — badges, Add to Cart, overlays, statistics, description, per-unit price — visibly responds on it.
  • Central pricing. The Pricing section has one Price Format select (standard / european / rounded / rounded-european) and one pair of currency-symbol fields that apply everywhere prices appear, including the on-image overlay. Products without a price show nothing — no orphan currency symbols.

Good to know

  • Items per device respond to the container, not just the screen. The visible item counts (desktop / tablet / mobile) are applied from the widget’s own width, so they work correctly in the editor’s device preview, on real phones, and even inside narrow sidebars.
  • Text on Image removes duplicates automatically. While the overlay is on, the title, brand line, and price below the photo hide by themselves.
  • Hover styles are separate fields. If you change a button’s base color, mirror it in the matching Hover Style field for a consistent hover.
  • Saved template cards freeze their code. If you keep your own copy in Your templates, actions created from it use the code as it was when saved — re-save the card after major updates.