Un carrousel d’images pleine largeur avec le nom du produit, le sous-titre et le prix affichés directement sur la photo, au-dessus d’un dégradé qui garantit la lisibilité — un look éditorial haut de gamme pour les catalogues de mode, de maison et de lifestyle.
Il partage son moteur avec le Product Slider & Grid : les quatre mêmes accents de style, les badges, les effets de survol, la lecture automatique, le zoom d’image, la seconde image au survol, ainsi que les réglages centralisés du format de prix et de la 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 Show Text on Image et activez Show Product Title et Show Price : il devient un slider classique, avec les cartes sous l’image.
Fonctionnement de ce modèle
Les accents de style, les Catalog Fields, le mode démo en direct et la tarification centralisée fonctionnent exactement comme dans le Product Slider & Grid — voir Fonctionnement de ce modèle sur cette page, et Options du slider pour les flèches, les points et les rangées de la grille (ici, le nombre d’éléments, les points de rupture et Layout — Slider or Grid se trouvent sous Widget Layout).
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 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.