Personyze Wiki Personyze Wiki docs
Open Personyze
Product Recommendation Templates

Product Slider & Grid — 4 Style Accents, Fully Customizable

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

The complete product carousel: one template that covers classic sliders, multi-row scrolling grids, and badge-rich merchandising cards. Pick a Style accent (light, gold, bold, ocean) and every card, badge, button, and price recolors in one click.

What’s included

  • Multi-row grids (Rows setting), side or title-bar arrows, pagination dots, scrollbar, autoplay with hover-pause, drag-to-scroll, and snap control.
  • Corner badges (discount / sale percent, price drop, low stock) and a movable badge stack (New, Popular, Best Seller, time-limited offers, custom data).
  • Star ratings with review counts, weekly and daily view/sales statistics with three looks (divided, plain, pill), a social-proof ticker, and a countdown timer.
  • Hover effects: card shadow, image zoom, second-image fade, a hover overlay with buttons, a bottom slide-up panel, and an animated Add to Cart.
  • Product text: title with style presets for the widget heading, brand/subtitle line, description, custom data column, per-unit price, payments line, options link, link button, wishlist.
  • Card Info Order (standard / brand-first / price-first) and a View-All link in the title bar.

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.