Une grille de produits à défilement horizontal : au lieu d’une seule rangée de cartes, le widget affiche deux rangées ou plus, et chaque colonne de cartes défile latéralement d’un bloc. Elle place bien plus de produits dans le même espace d’écran — idéal pour les sections « Vous aimerez peut-être » des pages catégorie, des pages d’accueil, et partout où un slider à plat paraît trop clairsemé. Les cartes adoptent le style Clean Catalog : cartes blanches avec la photo du produit, le titre, le prix, les badges et un bouton Add to Cart toujours visible, avec des boutons fléchés ronds dans la barre de titre.
Démarrage rapide
- Ajoutez l’action et choisissez le modèle Product Grid Slider.
- Faites pointer Main Product Image Column (Item Image) vers le champ d’image de votre catalogue. Tant qu’aucun catalogue n’est connecté, six produits de démonstration apparaissent dans l’éditeur avec une bannière d’avertissement — les visiteurs ne les voient jamais, et ils disparaissent dès que votre catalogue est chargé.
- Définissez le nombre de rangées dans Slider & Items Per View → Rows (voir ci-dessous).
- Choisissez le nombre de colonnes visibles par appareil (Items Visible — Desktop / Tablet / Mobile).
- Prévisualisez sur toutes les tailles d’appareil, puis publiez.
Le réglage Rows
Le champ Rows accepte un mot par rangée :
auto auto— deux rangées (par défaut)auto— une rangée : le slider classique à une seule rangéeauto auto auto— trois rangées
auto signifie que chaque rangée est aussi haute que son contenu. Avancé : remplacez auto par des hauteurs fixes pour imposer des rangées uniformes — par exemple 260px 260px donne deux rangées d’exactement 260 px. Vous pouvez combiner les valeurs.
Les produits remplissent chaque colonne de haut en bas, puis continuent dans la colonne suivante — avec 2 rangées, les produits 1 et 2 forment la première colonne, 3 et 4 la deuxième, et ainsi de suite. Le widget demande jusqu’à 24 produits pour garder plusieurs rangées remplies.
Fonctionnement du défilement
La grille défile horizontalement par colonnes. Les clics sur les flèches et les points avancent d’une vue complète à la fois, et chaque pas de colonne fait défiler une colonne entière de produits — avec 2 rangées, un pas de colonne avance de 2 produits. Le défilement tactile et par glisser, l’alignement magnétique, la lecture automatique facultative et la barre de défilement facultative fonctionnent exactement comme dans les sliders à une rangée. Par défaut, ce modèle affiche des boutons fléchés ronds dans la barre de titre (à côté du titre du widget) ; les flèches latérales classiques sont disponibles via une option.
Largeur des cartes et plancher minimal
La largeur des colonnes est calculée automatiquement à partir d’Items Visible pour chaque point de rupture, avec un plancher Minimum Card Width (200 px par défaut) pour que les cartes ne soient jamais écrasées sur les petits écrans — lorsque la largeur calculée descendrait sous ce plancher, le widget affiche moins de colonnes et fait défiler à la place.
Produits de démonstration — l’ensemble par défaut
Même logique que pour les autres modèles de recommandation : six produits de démonstration ne s’affichent que dans les contextes d’aperçu (l’éditeur Personyze et les liens d’aperçu) lorsqu’aucun catalogue n’est connecté, avec une bannière d’avertissement. Les vrais visiteurs ne les voient jamais, et les vrais produits prennent automatiquement le relais dès que votre catalogue renvoie des résultats. Une seule option le contrôle : Widget Layout → Demo Products (Preview Only).
Ce qui est commun avec les autres sliders
Les badges avec le système d’empilement automatique dans les coins, les prix soldés barrés, les notes en étoiles, le cœur de liste de souhaits, les lignes de statistiques et l’Add to Cart avec notifications de confirmation sont les mêmes sections éprouvées que dans les autres sliders de recommandation, configurées de la même façon. La référence complète se trouve dans le guide principal du slider : Slider de recommandations — guide complet. Dans ce modèle, le bouton Add to Cart est toujours visible sur la carte (au lieu d’apparaître au survol), ce qui convient à la disposition plus dense de la grille.
FAQ
La grille n’affiche qu’une seule rangée. Vérifiez Slider & Items Per View → Rows : le champ doit contenir un mot par rangée, par ex. auto auto pour deux rangées. Si le champ a déjà été modifié, la valeur enregistrée remplace la valeur par défaut du modèle.
Les rangées peuvent-elles avoir des hauteurs différentes ? Par défaut, chaque rangée s’adapte à son contenu. Pour des rangées uniformes, utilisez des hauteurs fixes dans le champ Rows, par ex. 260px 260px.
Combien de produits mon algorithme doit-il renvoyer ? Le widget en demande jusqu’à 24. Pour une grille à 2 rangées bien remplie, assurez-vous que votre algorithme et sa solution de repli peuvent fournir au moins 8 à 12 produits.
Puis-je l’utiliser comme un slider classique à une rangée ? Oui — réglez Rows sur auto et il se comporte exactement comme le slider Clean Catalog à une rangée.