Le carrousel de produits complet : un seul modèle qui couvre les sliders classiques, les grilles défilantes sur plusieurs rangées et les cartes de merchandising riches en badges. Choisissez un Style accent (light, gold, bold, ocean) et chaque carte, badge, bouton et prix change de couleur en un clic.
Ce qui est inclus
- Grilles sur plusieurs rangées (réglage Rows), flèches latérales ou dans la barre de titre, points de pagination, barre de défilement, lecture automatique avec pause au survol, défilement par glisser et contrôle de l’alignement.
- Badges d’angle (pourcentage de remise ou de solde, baisse de prix, stock faible) et une pile de badges déplaçable (New, Popular, Best Seller, offres limitées dans le temps, données personnalisées).
- Notes en étoiles avec nombre d’avis, statistiques hebdomadaires et quotidiennes de vues/ventes en trois styles (divisé, simple, pastille), un défilant de preuve sociale et un compte à rebours.
- Effets au survol : ombre de la carte, zoom sur l’image, fondu vers une seconde image, calque au survol avec boutons, panneau qui glisse depuis le bas et Add to Cart animé.
- Texte produit : titre avec préréglages de style pour le titre du widget, ligne marque/sous-titre, description, colonne de données personnalisées, prix unitaire, ligne de paiements, lien vers les options, bouton de lien, liste de souhaits.
- Card Info Order (standard / marque en premier / prix en premier) et un lien View-All dans la barre de titre.
Fonctionnement de ce modèle
Cette famille de modèles repose sur quatre idées :
- Accents de style. Le premier réglage, Style accent (light, gold, bold, ocean), recolore ensemble les cartes, badges, boutons, prix, points et barres de défilement en un clic. Chaque couleur reste ensuite modifiable individuellement dans son propre champ de style.
- Les champs du catalogue au même endroit. La section Catalog Fields (deuxième du menu) associe chaque colonne produit utilisée par le modèle — images, URL, titre, marque, les deux colonnes de prix, note, description, stock, pourcentage de remise, dates et champs personnalisés. Les associations sont globales : définir une colonne à cet endroit met à jour chaque élément qui l’utilise. Les boutiques aux flux entièrement personnalisés peuvent recâbler tout le widget depuis cette seule section.
- Mode démo en direct. Pendant la conception, des produits de démonstration réalistes apparaissent automatiquement (les visiteurs ne les voient jamais). La première carte de démonstration est une vitrine vivante : cliquez sur n’importe quel élément pour le styliser, et chaque option — badges, Add to Cart, calques, statistiques, description, prix unitaire — y réagit visiblement.
- Prix centralisés. La section Pricing comporte une seule liste Price Format (standard / european / rounded / rounded-european) et une paire de champs de symbole monétaire qui s’appliquent partout où des prix apparaissent, y compris sur le calque de l’image. Les produits sans prix n’affichent rien — pas de symbole monétaire orphelin.
Bon à savoir
- Le nombre d’éléments par appareil dépend du conteneur, pas seulement de l’écran. Le nombre d’éléments visibles (ordinateur / tablette / mobile) s’applique d’après la largeur du widget lui-même : il fonctionne donc correctement dans l’aperçu par appareil de l’éditeur, sur de vrais téléphones, et même dans des barres latérales étroites.
- Text on Image supprime automatiquement les doublons. Tant que le calque est actif, le titre, la ligne de marque et le prix sous la photo se masquent d’eux-mêmes.
- 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 Vos 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.