Des recommandations de produits sous forme de cartes épurées et cliquables — le même moteur que la famille Buy Together, sans le concept de lot : pas d’ancrage sur le produit actuel, pas de cases à cocher, et pas de total cumulé. Chaque carte renvoie directement à son produit et comporte son propre bouton Add to Cart, qui apparaît au survol (comme dans les sliders) et confirme par une notification moderne.
Fonctionnement de ce modèle
- Trois dispositions. Horizontal (une rangée de cartes, par défaut — elle s’ajuste à ses cartes), vertical (des lignes de liste empilées) et compact (une mini-bande avec petites photos, noms et prix).
- Add to Cart par 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, toujours visible sur écran tactile) ou always. Un clic ajoute ce seul produit et affiche une confirmation : modern (notification sombre arrondie avec une coche), system (la notification intégrée de Personyze) ou custom (votre propre JS depuis les champs Success et Error Action).
- Les cartes sont cliquables. Un clic n’importe où sur une carte (hors du bouton ou du lien du nom) ouvre la page produit, en respectant le réglage Open Product Links In.
- Limiter par nombre d’articles ou de rangées. Limit By choisit entre un nombre fixe de produits (Max Items Shown, 4 par défaut) et un nombre de rangées complètes (Max Rows Shown, 1 par défaut) — autant de cartes qu’il en tient par rangée à la largeur actuelle. Le reste se cache derrière un lien repliable Show N more.
- Accents de style et préréglages d’apparence. 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 reste modifiable individuellement dans son 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 valeurs par défaut raisonnables. Pourcentage de remise (masqué à 0), NEW (ajouté au cours des 14 derniers jours), Popular et Bestseller (5 % les plus performants) et stock faible (5 ou moins) — chaque seuil, texte et style est modifiable.
- Lignes de preuve sociale. Nombre de « vus aujourd’hui » et « achetés aujourd’hui » par carte, avec une portée de visibilité.
- Lignes d’informations produit. Des champs de catalogue supplémentaires (marque, colonnes personnalisées) sous le nom du produit.
Chargement, popups et stabilité
- Squelette de chargement : des lignes scintillantes s’affichent 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 bannière pleine largeur.
- Un rendu résistant aux styles. Les styles du modèle sont conçus pour résister aux CSS de site agressives, tandis que les personnalisations d’éléments faites dans l’éditeur restent prioritaires.
Bon à savoir
- La limitation par rangées mesure la disposition réelle. Avec Limit By: rows, l’ensemble visible est calculé d’après l’endroit où les cartes atterrissent réellement après le rendu : il s’adapte donc à toute largeur de conteneur ; il est calculé une fois par chargement de page.
- Prix centralisés. Une seule liste de format de prix et une 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 Vos modèles après les mises à jour majeures.
Voir aussi
- Achetés ensemble — composeur de lot avec total en direct — les mêmes cartes avec le concept de lot complet : produit d’ancrage, cases à cocher et totaux en direct.
- Achetés ensemble — bande classique — bande de photos, encadré du total et liste à cocher.
- Modèles — la vue d’ensemble de toute la bibliothèque de modèles.