Les produits en rangées empilées — conçu pour les barres latérales, les colonnes étroites, les pages panier et les emplacements de blog où un carrousel ne tient pas. Chaque rangée affiche la photo, le titre et le prix, avec des badges, des notes en étoiles facultatives, un bouton d’ajout rapide au panier et un compte à rebours sur les offres à durée limitée. Un bouton Show More dévoile le reste quelques éléments à la fois.
Fonctionnement de ce modèle
- Deux dispositions. List Layout → Form Position bascule entre side — la rangée classique de barre latérale, avec une vignette à côté du texte (Thumbnail Width et Height (Side Layout), 96px par défaut) — et stacked — l’image en haut et le texte en dessous, sous forme de cartes complètes. Space Between Items règle l’espacement entre les rangées.
- Show More. Les Items Shown Initially (3 par défaut) sont visibles d’emblée, et chaque clic sur le bouton en dévoile Items Revealed Per Click de plus (3 par défaut). Une fois tout affiché, le bouton devient Show Less et replie la liste. Show More Button Position vaut center, left, right ou full width ; désactivez Show More Button pour afficher tous les éléments d’un coup.
- Listes Top 10. Numbering (Top-10 Style) → Show Item Numbers place un badge numéroté sur chaque élément, pour les listes de classement.
- Accents de style. Style accent (light, gold, bold, ocean) recolore ensemble la numérotation, le titre, les étoiles, les boutons et les fonds des éléments ; gold donne le look sombre haut de gamme. Chaque couleur reste modifiable individuellement dans son propre champ de style.
- Badges. Les badges Popular, Best Seller, New, temporels et personnalisés (issus du flux) partagent une même pile — en haut à gauche par défaut, déplaçable avec Badge Stack Corner. Les autres gardent leur propre coin : Discount en haut à droite, Price Drop en bas à droite, Low Stock en bas à gauche, et le cœur de liste d’envies en haut à droite. Un badge Back-in-Stock se trouve dans la section New Badge.
- Le compte à rebours. Le Time-based Offer Badge lit le Offer End Date Field (un horodatage Unix dans votre catalogue), peut décompter en direct (Show Countdown Timer) et se masque de lui-même une fois la date passée.
- Catalog Fields et tarification centralisée. Catalog Fields (deuxième entrée du menu) associe chaque colonne produit utilisée par le modèle, une fois par site. La section Pricing comporte un seul sélecteur Price Format (standard, european, rounded, rounded-european) et une seule paire de champs de symbole monétaire pour tous les prix de la liste.
- Ajout au panier. Dans Quick add to cart, Button Action choisit Add to cart (uses your cart integration) — le réglage par défaut, qui exécute le code Ajout rapide au panier de votre compte — ou Open the product page, un simple lien. Quick Add to Cart — Cart Integration Argument est transmis à ce code comme second argument.
- Produits de démonstration. Demo Products (Preview Only) affiche six produits d’exemple pendant la conception, avant qu’un catalogue ne soit connecté. Ils n’apparaissent que dans l’éditeur Personyze et sur les liens d’aperçu ; dès que votre catalogue charge plus d’un produit, ce sont vos produits qui s’affichent. Les visiteurs ne les voient jamais.
Bon à savoir
- Les styles de survol sont des champs distincts. Si vous changez la couleur de base d’un bouton, reportez-la dans le champ Hover Style correspondant pour un survol cohérent.
- Les cartes de modèles enregistrées figent leur code. Si vous conservez votre propre copie dans Mes modèles, les actions créées à partir d’elle utilisent le code tel qu’il était lors de l’enregistrement — réenregistrez la carte après les mises à jour majeures.
Voir aussi
- Product Slider & Grid — les mêmes produits sous forme de carrousel ou de grille défilante.
- Recommendation Cards — une rangée, une liste ou une bande de cartes.
- Bouton d’ajout rapide au panier — le code qu’exécute le bouton d’ajout au panier.
- Galerie de modèles — tous les designs prêts à l’emploi.