Un carrousel d’images pleine largeur avec le nom du produit, le sous-titre et le prix affichés directement sur la photo, sur un dégradé de lisibilité — un style éditorial premium pour les catalogues de mode, de maison et d’art de vivre.
Il partage son moteur avec le Product Slider : les mêmes quatre Style accents, badges, effets au survol, lecture automatique, zoom sur l’image, seconde image au survol, et les réglages centralisés de format de prix et de devise. Deux réglages définissent son identité : Show Text on Image et Show Gradient Overlay, tous deux activés par défaut avec une zone photo plus haute et trois cartes par vue. Désactivez Text on Image et il devient un slider classique à cartes avec texte sous l’image.
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.