Des recommandations de produits sous forme de cartes cliquables épurées — le même moteur que la famille Buy Together, sans la notion de lot : pas d’ancre sur le produit en cours, pas d’interrupteurs et pas de total cumulé. Chaque carte renvoie directement à son produit et porte son propre bouton Add to Cart, qui apparaît au survol (comme sur les sliders) et confirme l’ajout par une notification toast moderne.
Fonctionnement de ce modèle
- Trois dispositions. Horizontal (une rangée de cartes, par défaut — elle se dimensionne d’après ses cartes), vertical (des rangées de liste empilées) et compact (une mini-bande avec de petites photos, les noms et les prix).
- Add to Cart sur chaque carte. Chaque carte a son propre bouton. Show Add to Cart contrôle quand il apparaît : hover (par défaut — il apparaît en fondu quand l’acheteur survole la carte, et reste toujours visible sur les écrans tactiles) ou always. Un clic ajoute ce seul produit via le code Ajout rapide au panier de votre compte et affiche une confirmation : modern (une notification toast sombre aux coins arrondis, avec une coche), system (la notification intégrée de Personyze) ou custom (votre propre JavaScript, saisi dans les champs On Success et On Error).
- Les cartes sont cliquables. Un clic n’importe où sur une carte (en dehors du bouton ou du lien du nom) ouvre la page produit, en respectant le réglage Open Product Links In.
- Limiter par éléments ou par rangées. Limit By choisit entre un nombre fixe de produits (Max Items Shown, 4 par défaut) et un nombre de rows complètes (Max Rows Shown, 1 par défaut) — quel que soit le nombre de cartes qui tiennent sur une rangée à la largeur actuelle. Les autres se cachent derrière un lien repliable Show N more.
- Accents de style et préréglages de look. Quatre accents (light, gold, bold, ocean), plus les préréglages Title Look, Buttons Look, Text Font et Item Info Order. Chaque couleur et chaque police restent modifiables individuellement dans leur propre champ de style.
- Mode démo en direct. Sept produits de démonstration réalistes apparaissent pendant la conception — assez pour montrer le lien Show More et les boutons au survol ; les visiteurs du site ne les voient jamais.
Badges, preuve sociale et informations produit
- Des badges aux réglages par défaut raisonnables. Pourcentage de remise (masqué à 0), NEW (ajouté au cours des 14 derniers jours), Popular et Bestseller (top 5 %), et stock faible (5 ou moins) — chaque seuil, texte et style est modifiable.
- Lignes de preuve sociale. Des compteurs « vus aujourd’hui » et « achetés aujourd’hui » sur chaque carte, avec une portée de visibilité.
- Lignes d’informations produit. Des champs supplémentaires du catalogue (marque, colonnes personnalisées) sous le nom du produit.
Chargement, popups et stabilité
- Le squelette de chargement affiche des rangées scintillantes jusqu’à l’arrivée des recommandations.
- Smooth Reveal garde le widget invisible jusqu’à ce que sa taille se stabilise, puis le fait apparaître en fondu — aucun saut pendant le chargement de la page.
- Popup Hugs Widget réduit un cadre de popup trop grand pour l’ajuster au widget ; désactivez-le pour les popups de type bannière en pleine largeur.
- Un rendu à l’épreuve des styles. Les styles du modèle sont conçus pour résister au CSS agressif des sites, tandis que les personnalisations par élément faites dans l’éditeur restent prioritaires.
Bon à savoir
- La limitation par rangées mesure la mise en page réelle. Avec Limit By: rows, l’ensemble visible est calculé d’après l’endroit où les cartes se placent réellement après le rendu ; il s’adapte donc à n’importe quelle largeur de conteneur. Il est calculé une fois par chargement de page.
- Tarification centralisée. Un seul sélecteur de format de prix et une seule paire de champs de symbole monétaire s’appliquent partout où des prix apparaissent.
- Les cartes de modèles enregistrées figent leur code. Réenregistrez votre copie dans Mes modèles après les mises à jour majeures.
Voir aussi
- Buy Together — constructeur de lots avec total en direct — les mêmes cartes avec toute la notion de lot : produit d’ancrage, interrupteurs et totaux en direct.
- Bought Together — bande classique — bande de photos, encadré du total et liste à cases à cocher.
- Bouton d’ajout rapide au panier — le code qu’exécute le bouton Add to Cart.
- Modèles — la vue d’ensemble de toute la bibliothèque de modèles.