Section produits associés
Pour Plain Jane et Plain Jane Interactive
Ce que vous apprendrez
Comment afficher des produits liés avec un carrousel à défilement horizontal
Options de personnalisation avancées pour la mise en page, la typographie et les espacements
Comment configurer les recommandations de produits et la navigation
Bonnes pratiques pour améliorer le cross-selling et l'upselling
🎯 Qu'est-ce que la section Produits connexes ?
Le Section Produits connexes est un carrousel de recommandations de produits dynamique qui apparaît sur les pages produits pour présenter des produits liés, complémentaires ou similaires. Cette section utilise le moteur de recommandations de produits intégré de Shopify pour suggérer automatiquement des produits pertinents aux clients, aidant ainsi à augmenter la valeur moyenne des commandes et à améliorer l'expérience d'achat.
Fonctionnalités clés :
Recommandations de produits automatiques basées sur l'algorithme de Shopify
Carrousel à défilement horizontal avec flèches de navigation
Options d'affichage des produits personnalisables (titres, prix, badges)
Contrôles avancés de typographie et d'espacement
Conception adaptée aux mobiles avec navigation tactile
Chargement des données produit en temps réel
Disponible dans :
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
💡 Remarque: Cette section est uniquement disponible sur les pages produit et utilise l'API de recommandations de produits de Shopify.
🔧 Comment ajouter la section Produits connexes
Aller à Boutique en ligne > Thèmes > Personnaliser
Accédez à Produits > Produit par défaut
Faites défiler vers le bas de la liste des sections
Cliquez sur Ajouter une section
Sélectionnez Recommandations de produits ou Produits connexes
Configurez les options d'affichage et le style
⚠️ Important: Cette section n'apparaît que sur de véritables pages produit, pas dans l'aperçu de l'éditeur de thème lors de la visualisation des collections ou de la page d'accueil.
📋 Contenu et options d'affichage
En-tête de section
Titre de la section
Personnalisez le texte du titre (par ex. « Vous pourriez aussi aimer », « Produits connexes »)
Laisser vide pour masquer complètement l'en-tête de la section
Par défaut : « Produits connexes »
Limite de produits
Définissez le nombre maximum de produits à afficher (1 à 8 produits)
Shopify filtre et sélectionne automatiquement les produits les plus pertinents
Par défaut : 4 produits
Affichage des informations produit
Afficher les titres des produits
Activer/désactiver les noms de produits
Essentiel pour l'identification des produits
Recommandé : garder activé
Afficher les prix des produits
Afficher le prix du produit sous les titres
Aide les clients à prendre des décisions éclairées
Inclut l'affichage du prix remisé lorsque applicable
Afficher le prix comparatif
Afficher le prix d'origine lorsque des produits sont en promotion
Affiche le prix barré pour plus de transparence
Apparaît automatiquement uniquement lorsque les produits ont un prix promotionnel
Badges produit
Afficher le badge « Épuisé »: Indique les produits indisponibles
Afficher le badge « Promotion »: Met en évidence les articles remisés
Afficher le badge « Précommande »: Marque les produits à venir
🎨 Configuration de la mise en page et du design
Disposition de la grille produit
Produits par ligne (Bureau)
Définissez le nombre de produits affichés sur les écrans de bureau (1 à 6 produits)
Par défaut : 4 produits
Recommandation : 3-4 pour un équilibre visuel optimal
Produits par ligne (Mobile)
Contrôlez l'affichage mobile (1 à 3 produits)
Par défaut : 2 produits
Le mobile active automatiquement le défilement horizontal
Alignement du texte produit
Alignez les titres et prix des produits : Gauche, Centre ou Droite
L'alignement centré crée une apparence plus soignée
L'alignement à gauche offre une meilleure lisibilité pour les noms de produit longs
Contrôles de navigation
Navigation par flèches
Flèches gauche/droite intégrées pour la navigation sur bureau
Couleur des flèches personnalisable pour s'adapter à la marque
Apparaît automatiquement lorsque le nombre de produits est supérieur à l'affichage
Navigation tactile/gestes
Prise en charge native du défilement tactile sur appareils mobiles
Défilement avec élan fluide pour une meilleure expérience utilisateur
Aucune configuration supplémentaire requise
✏️ Personnalisation de la typographie
Tailles de police
Tous les éléments de texte peuvent être personnalisés séparément pour le bureau et le mobile :
Taille du titre de section
Bureau : plage 16-32px
Mobile : plage 14-24px
Par défaut : 20px bureau, 18px mobile
Taille du titre du produit
Bureau : plage 12-20px
Mobile : plage 10-16px
Par défaut : 14px bureau, 12px mobile
Taille du prix produit
Bureau : plage 12-18px
Mobile : plage 10-14px
Par défaut : 14px bureau, 12px mobile
Options de graisse de police
Titre de section en gras
Activez pour rendre l'en-tête de section en gras (poids 700)
Aide la section à se démarquer du contenu produit
Recommandé pour une hiérarchie visuelle claire
Titre de produit en gras
Rendre les noms de produits en gras pour mettre en évidence
Utile pour les designs minimalistes où le texte doit avoir plus de présence
Tenir compte de l'impact sur la lisibilité des noms de produits plus longs
Lien Voir en gras
Rendre les contrôles de navigation par flèches en gras
Amélioration subtile pour la visibilité de la navigation
🎨 Personnalisation des couleurs
Couleurs d'arrière-plan et de section
Couleur d’arrière-plan
Définissez la couleur d'arrière-plan de la section
Utilisez transparent pour une intégration fluide à la page
Envisagez des couleurs d'arrière-plan subtiles pour définir la section
Couleur du titre de la section
Personnalisez la couleur du texte de l'en-tête
Doit contraster correctement avec l'arrière-plan
Correspond généralement à la couleur principale de la marque
Couleur des flèches
Définissez la couleur des flèches de navigation
Doit être visible par rapport à l'arrière-plan
Utilise souvent une couleur d'accent ou un gris neutre
Couleurs des informations produit
Couleur du titre du produit
Couleur pour les noms de produits
Généralement neutre (noir, gris foncé) pour la lisibilité
Doit maintenir un bon contraste pour l'accessibilité
Couleur du prix produit
Couleur des informations de prix
Correspond souvent à la couleur du titre pour la cohérence
Peut utiliser la couleur d'accent pour mettre en évidence le prix
Couleurs des badges produit
Chaque type de badge a des contrôles séparés pour le texte et la couleur de fond :
Badge Précommande
Couleur du texte et couleur de fond
Utilise souvent des tons bleus ou neutres
Doit communiquer clairement « bientôt disponible »
Badge Épuisé
Couleur du texte et couleur de fond
Utilise généralement des gris ou des couleurs atténuées
Communique clairement l'indisponibilité
Badge Promotion
Couleur du texte et couleur de fond
Utilise habituellement du rouge, orange ou l'accent de la marque
Crée un sentiment d'urgence et met en évidence les économies
Couleur du prix comparatif
Couleur pour le prix d'origine barré
Généralement gris ou atténué pour dé-emphasiser
Doit rester lisible mais moins proéminent que le prix soldé
📏 Contrôles d'espacement avancés
Espacement de la section
Espacement supérieur
Bureau : plage 0-200px, par défaut 20px
Mobile : plage 0-100px, par défaut 16px
Contrôle l'espace au-dessus de l'ensemble de la section
Espacement inférieur
Bureau : plage 0-200px, par défaut 20px
Mobile : plage 0-100px, par défaut 16px
Contrôle l'espace en dessous de l'ensemble de la section
Espacements internes
Espacement entre l'en-tête et les produits
Plage : 8-80px, par défaut 32px
Espace entre le titre de la section et la grille de produits
Aide à créer une séparation visuelle et de la respiration
Espacement image / informations
Plage : 8-80px, par défaut 24px
Espace vertical entre l'image du produit et les informations textuelles
Affecte la connexion visuelle entre l'image et les détails
Espacement titre / prix
Plage : 4-40px, par défaut 8px
Espace entre le nom du produit et le prix
Gardez minimal pour un regroupement d'informations serré
Espacement entre produits
Bureau : plage 8-160px, par défaut 16px
Mobile : plage 8-160px, par défaut 16px
Espace horizontal entre les produits dans le carrousel
🚀 Comment fonctionnent les recommandations de produits
L'algorithme de Shopify
La section Produits connexes utilise l'algorithme d'apprentissage automatique de Shopify pour déterminer quels produits afficher :
Facteurs de recommandation :
Produits fréquemment achetés ensemble
Produits consultés ensemble durant la même session
Catégories et balises de produits similaires
Relations de produits complémentaires
Schémas de comportement des clients
Mises à jour automatiques :
Les recommandations s'améliorent avec le temps à mesure que davantage de données sont collectées
Aucune configuration manuelle requise pour les relations entre produits
L'algorithme s'adapte aux tendances saisonnières et aux préférences des clients
Comportement de repli
Lorsque les données sont insuffisantes pour des recommandations :
La section peut afficher des produits de la même collection
Des produits aléatoires de l'inventaire peuvent apparaître
La section peut être masquée si aucun produit approprié n'est trouvé
📱 Optimisation mobile
Conception responsive
Mise en page mobile
Ajuste automatiquement le nombre de produits par ligne pour les écrans mobiles
Navigation adaptée au toucher avec gestes de balayage
Espacements optimisés pour les cibles tactiles
Optimisation des performances
Chargement différé (lazy loading) pour améliorer la vitesse de la page
Images compressées pour un chargement plus rapide
JavaScript minimal pour un défilement fluide
Expérience utilisateur
Défilement avec élan fluide
Indicateurs visuels clairs pour signaler la présence d'autres produits
Images et informations produit faciles à toucher
💡 Bonnes pratiques
Stratégie de contenu
Placement de la section
Ajouter près du bas des pages produit
Placer après le contenu principal du produit mais avant le pied de page
Envisager d'ajouter après les avis produit si disponibles
Informations produit
Toujours afficher les titres de produits pour plus de clarté
Inclure les prix pour une expérience d'achat transparente
Utiliser les badges de manière stratégique pour mettre en évidence les informations clés
Recommandations de conception
Hiérarchie visuelle
Garder le titre de la section clair sans le rendre trop dominant
Veiller à ce que les images produits soient le principal point d'attention
Utiliser un espacement cohérent dans toute la section
Stratégie de couleurs
Maintenir la cohérence de la marque avec les couleurs existantes des pages produit
Assurez un contraste suffisant pour l'accessibilité
Utiliser les badges de promotion avec parcimonie pour conserver leur impact
Considérations de performance
Optimisation des images
S'assurer que les produits liés ont des images optimisées
Utiliser des rapports d'aspect cohérents pour une harmonie visuelle
Compresser les images sans sacrifier la qualité
Stratégie de chargement
La section se charge après le contenu principal du produit
Repli gracieux si les recommandations ne parviennent pas à se charger
Impact minimal sur la vitesse de chargement de la page
🔧 Dépannage
Section n'apparaît pas
Vérifier l'état du produit
Assurez-vous de visualiser une véritable page produit (pas une collection)
Vérifier que le produit est publié et disponible
Vérifier que la boutique comporte plusieurs produits pour les recommandations
Configuration du thème
Confirmer que la section est ajoutée au gabarit produit
Vérifier que la section n'est pas masquée ou désactivée
Vérifier que la limite de recommandations de produits n'est pas définie sur 0
Aucun produit affiché
Exigences en matière de données
La boutique a besoin de suffisamment de données produit pour les recommandations
L'algorithme a besoin de temps pour apprendre les comportements des clients
Envisager d'ajouter manuellement des produits aux collections en tant que solution de repli
Limitations de l'API
L'API de recommandations de Shopify a des limites quotidiennes
Les boutiques à fort trafic peuvent parfois voir des sections vides
Les performances de l'algorithme s'améliorent avec l'âge et le trafic de la boutique
Problèmes de style
Problèmes de réactivité
Testez sur de véritables appareils mobiles, pas seulement en redimensionnant le navigateur
Vérifiez que les valeurs d'espacement mobile sont appropriées
Vérifiez que les cibles tactiles sont suffisamment grandes pour une interaction facile
Contraste des couleurs
Assurez-vous que le texte reste lisible sur les arrière-plans choisis
Testez avec des outils d'accessibilité pour la conformité WCAG
Prenez en compte différentes conditions d'éclairage pour la consultation mobile
📊 Impact sur la performance
Comportement de chargement
Chargement asynchrone
Le contenu de la section se charge après le rendu initial de la page
Ne bloque pas le contenu principal de la page produit
Dégradation élégante si les appels API échouent
Utilisation des données
Transfert de données supplémentaire minimal
Informations produit mises en cache lorsque possible
Appels API optimisés vers les serveurs de Shopify
Considérations SEO
Valeur du contenu
Fournit des opportunités supplémentaires de liens internes
Aide les moteurs de recherche à comprendre les relations entre produits
Peut améliorer le temps passé sur le site et réduire le taux de rebond
Vitesse de la page
Impact minimal sur les métriques principales de chargement de la page
La section se charge de manière progressive
Optimisé pour les Core Web Vitals mobiles
La section Produits connexes est un outil puissant pour augmenter les ventes et améliorer l'expérience client. Lorsqu'elle est correctement configurée, elle peut augmenter significativement la valeur moyenne des commandes tout en apportant une véritable valeur aux clients en faisant apparaître des options de produits pertinentes.
Une fois les comptes hérités activés, utilisez les pages de documentation de cette section pour styliser chaque partie de l'expérience client.
Besoin d'aide ? 💬 Rejoignez notre communauté sur Discord :
https://discord.gg/hcc2GvgZc6 📧 Envoyez-nous un e-mail à :
[email protected] 💻 Chat en direct avec nous :
Mis à jour