Products as stacked rows — built for sidebars, narrow columns, cart pages, and blog placements where a carousel doesn’t fit. Each row shows the photo, title and price, with badges, optional star ratings, a quick Add to cart button, and a countdown on time-limited offers. A Show More button reveals the rest a few at a time.
How this template works
- Two arrangements. List Layout → Form Position switches between side — the classic sidebar row, with a thumbnail beside the text (Thumbnail Width and Height (Side Layout), 96px by default) — and stacked — the image on top and the text below, as full cards. Space Between Items sets the gap between rows.
- Show More. Items Shown Initially (default 3) are visible at first, and each click on the button reveals Items Revealed Per Click more (default 3). Once everything is visible the button becomes Show Less and collapses back. Show More Button Position is center, left, right, or full width; switch Show More Button off to show every item at once.
- Top-10 lists. Numbering (Top-10 Style) → Show Item Numbers puts a numbered badge on each item, for ranking lists.
- Style accents. Style accent (light, gold, bold, ocean) recolors the numbering, title, stars, buttons, and item backgrounds together; gold is the dark premium look. Every color is still individually overridable in its own style field.
- Badges. Popular, Best Seller, New, time-based and custom (feed) badges share one stack — top-left by default, movable with Badge Stack Corner. The rest keep corners of their own: Discount top-right, Price Drop bottom-right, Low Stock bottom-left, and the wishlist heart top-right. A Back-in-Stock badge sits in the New Badge section.
- The countdown. The Time-based Offer Badge reads the Offer End Date Field (a Unix timestamp in your catalog), can count down live (Show Countdown Timer), and hides itself once the date passes.
- Catalog Fields and central pricing. Catalog Fields (second in the menu) maps every product column the template uses, once per site. The Pricing section has one Price Format select (standard, european, rounded, rounded-european) and one pair of currency-symbol fields for every price in the list.
- Add to cart. In Quick add to cart, Button Action chooses Add to cart (uses your cart integration) — the default, which runs your account’s Quick add to cart code — or Open the product page, an ordinary link. Quick Add to Cart — Cart Integration Argument is handed to that code as its second argument.
- Demo products. Demo Products (Preview Only) shows six sample products while you design, before a catalog is connected. They appear only in the Personyze editor and on preview links; once your catalog loads more than one product, your products show instead. Visitors never see them.
Good to know
- 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 My Templates, actions created from it use the code as it was when saved — re-save the card after major updates.
Related
- Product Slider & Grid — the same products as a carousel or scrolling grid.
- Recommendation Cards — a row, list or strip of cards.
- Quick Add to Cart Button — the code the Add to cart button runs.
- Template Gallery — every ready-made design.