Section Produits connexes
Pour Plain Jane et Plain Jane Interactive
Ce que vous apprendrez
Comment afficher des produits connexes 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 produit 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 à 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 responsive pour mobile 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 n'est disponible que 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
Cliquer 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 aimer », « Produits connexes »)
Laisser vide pour masquer entièrement l'en-tête de la section
Par défaut : « Produits connexes »
Limite de produits
Définissez le nombre maximal de produits à afficher (1 à 8 produits)
Shopify filtre automatiquement et sélectionne 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 du produit
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 promotionnel lorsque applicable
Afficher le prix de comparaison
Afficher le prix d'origine lorsque les produits sont en promotion
Affiche les prix barrés pour plus de transparence
Apparaît automatiquement uniquement lorsque les produits ont un prix soldé
Badges produit
Afficher le badge « Épuisé »: Indique les produits indisponibles
Afficher le badge « En promotion »: Met en évidence les articles remisés
Afficher le badge « Précommande »: Signale les produits à venir
🎨 Configuration de la mise en page et du design
Disposition de la grille produit
Produits par ligne (Bureau)
Définissez combien de produits s'affichent 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 du produit
Aligner 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 produits plus 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 correspondre à la marque
Apparaît automatiquement lorsqu'il y a plus de produits que ceux affichés
Navigation tactile / par balayage
Prise en charge native du défilement tactile sur les appareils mobiles
Défilement avec inertie fluide pour une meilleure expérience utilisateur
Aucun réglage supplémentaire requis
✏️ 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 la section
Bureau : plage 16-32px
Mobile : plage 14-24px
Par défaut : 20px bureau, 18px mobile
Taille du titre 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
Activer pour rendre l'en-tête de section en gras (graisse 700)
Aide la section à se détacher du reste du contenu produit
Recommandé pour une hiérarchie visuelle claire
Titre produit en gras
Rendre les noms de produits en gras pour les mettre en valeur
Utile pour les designs minimalistes où le texte doit avoir plus de présence
Considérez l'impact sur la lisibilité pour les noms de produits longs
Lien Voir en gras
Rendre les contrôles de navigation par flèche en gras
Amélioration subtile pour la visibilité de la navigation
🎨 Personnalisation des couleurs
Couleurs de fond et de section
Couleur d'arrière-plan
Définir la couleur d'arrière-plan de la section
Utiliser transparent pour une intégration fluide à la page
Envisager des couleurs de fond subtiles pour définir la section
Couleur du titre de la section
Personnaliser la couleur du texte de l'en-tête
Doit contraster correctement avec l'arrière-plan
Généralement assorti à la couleur principale de la marque
Couleur des flèches
Définir la couleur des flèches de navigation
Doit être visible sur l'arrière-plan
Utilise souvent la couleur d'accent ou un gris neutre
Couleurs des informations produit
Couleur du titre du produit
Couleur des noms de produits
Généralement neutre (noir, gris foncé) pour la lisibilité
Doit garder un bon contraste pour l'accessibilité
Couleur du prix du produit
Couleur des informations de prix
Correspond souvent à la couleur du titre produit pour la cohérence
Peut utiliser une 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 la couleur du texte et l'arrière-plan :
Badge Précommande
Couleur du texte et couleur d'arrière-plan
Utilise souvent des tons bleus ou neutres
Doit communiquer "bientôt disponible" clairement
Badge Épuisé
Couleur du texte et couleur d'arrière-plan
Utilise typiquement des gris ou des couleurs atténuées
Communique clairement l'indisponibilité
Badge En promotion
Couleur du texte et couleur d'arrière-plan
Utilise généralement le rouge, l'orange ou l'accent de la marque
Crée un sentiment d'urgence et met en avant les économies
Couleur du prix de comparaison
Couleur pour le prix d'origine barré
Typiquement gris ou atténué pour désaccentuer
Doit rester lisible mais moins proéminent que le prix soldé
📏 Contrôles avancés d'espacement
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
Espacement interne
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 vers infos
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 vers prix
Plage : 4-40px, par défaut 8px
Espace entre le nom du produit et le prix
Garder minimal pour un regroupement d'informations compact
Interstice 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 secours
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 du magasin peuvent apparaître
La section peut être masquée si aucun produit adapté n'est trouvé
📱 Optimisation mobile
Design réactif
Mise en page mobile
Ajuste automatiquement le nombre de produits par ligne pour les écrans mobiles
Navigation tactile adaptée avec gestes de balayage
Espacements optimisés pour les cibles tactiles
Optimisation des performances
Chargement paresseux 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 inertie fluide
Indicateurs visuels clairs pour plus de 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
Afficher toujours les titres des 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 avant les informations clés
Recommandations de conception
Hiérarchie visuelle
Garder le titre de la section clair mais pas trop imposant
Veiller à ce que les images produit soient le centre d'attention
Utiliser des espacements cohérents dans toute la section
Stratégie de couleur
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 préserver leur impact
Considérations de performance
Optimisation des images
S'assurer que les produits associés ont des images optimisées
Utiliser des rapports d'aspect cohérents pour l'harmonie visuelle
Compresser les images sans sacrifier la qualité
Stratégie de chargement
La section se charge après le contenu produit principal
Repli gracieux si les recommandations échouent à se charger
Impact minimal sur la vitesse de chargement de la page
🔧 Dépannage
La section n'apparaît pas
Vérifier le statut du produit
S'assurer que vous visualisez une véritable page produit (pas une collection)
Vérifier que le produit est publié et disponible
Vérifier que le magasin possède plusieurs produits pour les recommandations
Configuration du thème
Confirmer que la section est ajoutée au modèle produit
Vérifier que la section n'est pas masquée ou désactivée
Vérifier que les limites de recommandations de produits ne sont pas définies sur 0
Aucun produit affiché
Exigences en matière de données
Le magasin a besoin de suffisamment de données produit pour les recommandations
L'algorithme nécessite du temps pour apprendre les schémas de comportement des clients
Envisager d'ajouter manuellement des produits aux collections en solution de repli
Limitations de l'API
L'API de recommandations de Shopify a des limites quotidiennes
Les magasins à fort trafic peuvent parfois voir des sections vides
Les performances de l'algorithme s'améliorent avec l'ancienneté et le trafic du magasin
Problèmes de style
Problèmes de réactivité
Tester sur de véritables appareils mobiles, pas seulement en redimensionnant le navigateur
Vérifier que les valeurs d'espacement mobile sont appropriées
Vérifier que les cibles tactiles sont suffisamment grandes pour une interaction facile
Contraste des couleurs
S'assurer que le texte reste lisible sur les arrière-plans choisis
Tester avec des outils d'accessibilité pour la conformité WCAG
Tenir compte des différentes conditions d'éclairage pour la visualisation sur mobile
📊 Impact sur les performances
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 progressive si les appels API échouent
Utilisation des données
Transfert de données additionnel 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 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 considérablement augmenter la valeur moyenne des commandes tout en apportant une réelle valeur aux clients en mettant en avant des options de produits pertinentes.
Besoin d’aide ?
💬 Rejoignez notre communauté sur Discord : https://discord.gg/hcc2GvgZc6
📧 Envoyez-nous un e-mail à : [email protected]
💻 Discutez en direct avec nous : Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web
Mis à jour