Le carrousel de produits principal de la galerie : un seul modèle qui fonctionne comme un slider classique sur une rangée ou comme une grille défilante jusqu’à quatre rangées, avec prix et remises, notes en étoiles, badges de stock et un bouton Add to cart rapide sur chaque carte. Choisissez un Style accent (light, gold, bold, ocean) et chaque carte, badge, bouton et prix se recolore en un clic.
Ce qui est inclus
- Slider ou grille. Layout — Slider or Grid : 1 correspond au slider classique sur une seule rangée, 2 à 4 à une grille qui défile latéralement. Flèches sur les côtés ou dans la barre de titre, points de pagination, barre de défilement, lecture automatique qui se met en pause au survol, défilement par glisser et contrôle de l’accrochage — voir Options du slider.
- Densité. Un seul contrôle (Compact, Standard, Roomy) redimensionne ensemble l’image, les espacements et la marge intérieure des boutons. Il prend le pas sur les contrôles de taille individuels ; remettez-le sur Standard et ce sont eux qui reprennent la main.
- Badges. Des badges de coin (pourcentage de remise / soldes, baisse de prix, stock faible), une pile de badges déplaçable (New, Back in Stock, Popular, Best Seller, une offre à durée limitée avec compte à rebours, des données personnalisées issues de votre flux), et trois badges libres avec votre propre texte sous More Badges.
- Preuve sociale. Notes en étoiles avec nombre d’avis, statistiques hebdomadaires et quotidiennes de consultations et de ventes dans trois styles (divided, plain, pill), un défileur de preuve sociale et un compte à rebours.
- Effets de survol. Ombre de la carte, zoom de l’image, seconde image au survol, calque de survol avec boutons, panneau qui glisse depuis le bas, et un bouton d’action qui apparaît en glissant au survol (toujours visible sur les écrans tactiles).
- Texte du produit. Titre, ligne de marque ou de sous-titre, description, une colonne de données personnalisée, prix unitaire, ligne de paiement, badge d’économie, lien d’options, bouton lien et cœur de liste d’envies. Card Info Order (standard, brand-first, price-first) ordonne les lignes sous l’image ; Title Style Preset (plain, accent-bar, underline, boxed, eyebrow) met en forme le titre du widget, et un lien View-All peut se placer dans la barre de titre.
Fonctionnement de ce modèle
Ce modèle et l’Overlay Slider & Grid reposent sur quatre idées :
- Accents de style. Style accent (light, gold, bold, ocean), dans la première section du menu, recolore ensemble les cartes, les badges, les boutons, les prix et les points en un clic. Light et ocean conviennent aux sites clairs ; gold et bold sont les looks sombres haut de gamme — les cartes sombres aux prix et boutons dorés, c’est simplement l’accent gold. Chaque couleur peut ensuite encore être modifiée dans son propre champ de style.
- Les Catalog Fields 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, nombre d’avis, description, stock, pourcentage de remise, catégorie, date de fin d’offre et champs personnalisés. Définir une colonne à cet endroit met à jour tous les éléments qui l’utilisent : une boutique au flux entièrement personnalisé peut ainsi recâbler tout le widget depuis cette seule section.
- Mode démo en direct. Pendant la conception, six produits de démonstration apparaissent (les visiteurs ne les voient jamais). La première carte de démonstration sert de vitrine interactive : cliquez sur n’importe quel élément pour le styliser, et chaque interrupteur — badges, bouton d’action, calques, statistiques, description, prix unitaire — réagit visiblement sur elle. Voir Produits de démonstration.
- Tarification centralisée. La section Pricing comporte un seul sélecteur Price Format (standard, european, rounded, rounded-european) et une seule paire de champs de symbole monétaire qui s’appliquent partout où un prix apparaît, y compris sur le calque posé sur l’image. Un produit sans prix n’affiche rien — pas de symbole monétaire orphelin.
Options du slider
Elles se trouvent dans la section Slider & Navigation, sauf Space Between Cards, qui se trouve dans Widget Layout.
| Option | Ce que cela fait | Par défaut |
|---|---|---|
| Layout — Slider or Grid | 1 = le slider classique sur une seule rangée. 2, 3 ou 4 = une grille : les produits remplissent chaque colonne de haut en bas (avec 2 rangées, les produits 1 et 2 forment la première colonne), et les colonnes défilent latéralement. | 1 |
| Items Visible — Desktop / Tablet / Mobile | Combien de cartes (dans une grille, de colonnes) s’affichent à la fois. Les décimales fonctionnent : 1.15 sur mobile affiche un bout de la carte suivante comme indice de balayage. |
4 / 3 / 1 |
| Tablet Breakpoint (px) / Mobile Breakpoint (px) | En dessous de ces largeurs, ce sont les nombres tablette et mobile qui s’appliquent. | 1024 / 640 |
| Swipe Strip — Minimum Card Width | Un plancher pour la largeur des cartes. Quand la rangée est trop étroite pour contenir le nombre choisi à cette largeur, les cartes la conservent et la rangée défile au lieu de les comprimer. | 120px |
| Space Between Cards | L’espace entre les cartes. Utilisez une longueur simple comme 24px, et non sel() : l’espacement est appliqué au premier affichage, avant le calcul des valeurs responsives. |
24px |
| Swipe Strip — Scroll Behavior | x mandatory s’arrête toujours sur le bord d’une carte ; x proximity ne s’accroche que lorsque la rangée s’arrête près d’un bord ; none défile librement. |
x mandatory |
| Swipe Strip — Items Per Arrow Click | De combien se déplace chaque clic de flèche et chaque pas de lecture automatique : de 1 à 4 cartes, ou full, qui déplace exactement l’ensemble visible à la taille d’écran actuelle (2 sur un téléphone qui en affiche 2, 4 sur un ordinateur qui en affiche 4). |
1 |
| Arrows on Sides (Classic) | De grandes flèches centrées sur les bords gauche et droit de la rangée. Arrows — Side Arrow Offset les déplace à l’extérieur de la rangée (valeur négative, par ex. -10px) ou par-dessus les cartes (valeur positive). |
Activé, 6px |
| Swipe Strip — Title-Bar Arrows | Des boutons ‹ › compacts à droite du titre du widget. Nécessite que la barre de titre soit affichée. | Désactivé |
| Arrows — Arrow Style | Des looks prêts à l’emploi, chacun avec son propre survol : circle (cercle clair), dark, pill, outline, soft. none laisse le thème de votre site styliser les flèches. Pour ajuster un préréglage, ajoutez du CSS dans Arrows — Side Arrow Custom Style avec !important sur chaque propriété qui doit l’emporter. |
circle |
| Swipe Strip — Fade Arrows at Ends Hide Arrows on Touch Devices |
Atténue et désactive la flèche arrière au début de la rangée et la flèche avant à la fin. Masque toutes les flèches sur les téléphones et les tablettes, où le balayage est naturel. | Activé / Activé |
| Swipe Strip — Pagination Dots | Des points cliquables sous la rangée. Ils n’apparaissent que s’il y a plus d’une page à faire défiler, et se reconstruisent quand le widget est redimensionné. | Activé |
| Swipe Strip — Scrollbar | Une fine barre de défilement sous la rangée, avec sa propre hauteur et ses propres couleurs de curseur et de piste. | Désactivé |
| Drag to Scroll with Mouse | Les visiteurs sur ordinateur peuvent saisir la rangée et la faire glisser, comme sur un écran tactile. Un glissement ne compte jamais comme un clic sur un produit. | Activé |
| Swipe Strip — Autoplay Interval (ms) | Avance toutes les N millisecondes, par ex. 4000 ; 0 ou vide la désactive. Elle se met en pause quand le visiteur survole ou touche le slider. Swipe Strip — Autoplay Loops to Start décide de ce qui se passe à la dernière carte : revenir à la première (on) ou s’arrêter (off). |
Désactivé ; boucle activée |
Comment les cartes sont dimensionnées
Vous ne définissez pas de largeur de carte. Elle est calculée à partir du nombre de cartes que vous voulez voir :
card width = (row width − (items visible − 1) × gap) ÷ items visibleet elle ne descend jamais sous Swipe Strip — Minimum Card Width. La hauteur des cartes, leurs coins et la façon dont la photo remplit la carte se règlent dans Card & Image → Card Box Style (Height, Corners, Image Fit) — la valeur par défaut height: sel(280px, 220px) donne à l’ordinateur et au mobile leur propre hauteur.
Le nombre de produits que reçoit le widget est défini par la recommandation elle-même : Recommandations à afficher dans sa carte Sortie, jusqu’à 12. Avec 2 rangées et 12 produits, la grille compte six colonnes à faire défiler.
Produits de démonstration
Six produits d’exemple vous permettent de concevoir avant qu’un catalogue ne soit connecté. Ils n’apparaissent que dans l’éditeur Personyze et sur les liens d’aperçu, et seulement tant que le widget a au plus une carte produit réelle ; dès que votre catalogue en renvoie davantage, vos produits prennent le relais. Les visiteurs ne les voient jamais. L’interrupteur est Widget Layout → Demo Products (Preview Only), et il peut rester activé sans risque.
Le bouton d’ajout au panier
Dans Add to Cart & View Buttons, Button Action décide de ce que fait le bouton de la carte. Add to cart (uses your cart integration), le réglage par défaut, met le produit dans le panier du visiteur sans quitter la page ; Open the product page est un simple lien, pour un catalogue sans intégration de panier. Add to cart exécute le code Ajout rapide au panier enregistré pour votre compte, et Quick Add to Cart — Cart Integration Argument est transmis à ce code comme second argument. On Success et On Error — Custom JavaScript remplacent la notification toast par défaut « Added to cart » par votre propre code.
Bon à savoir
- Le nombre d’éléments par appareil suit le widget, pas seulement l’écran. Sur un ordinateur, un slider placé dans une barre latérale étroite passe de lui-même au nombre tablette ou mobile, car les nombres s’appliquent d’après la largeur du widget lui-même.
- Text on Image supprime automatiquement les doublons. Tant que Show Text on Image est activé, 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.
Voir aussi
- Overlay Slider & Grid — le même moteur, avec le nom et le prix sur la photo.
- Vertical Product List — une liste empilée pour les barres latérales et les colonnes étroites.
- Bouton d’ajout rapide au panier — le code qu’exécute le bouton d’ajout au panier.
- Assistant de recommandations de produits — choisir ce que le widget recommande.
- Galerie de modèles — tous les designs prêts à l’emploi.