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

1. Aller à Boutique en ligne > Thèmes > Personnaliser

2. Accédez à Produits > Produit par défaut

3. Faites défiler vers le bas de la liste des sections

4. Cliquer sur Ajouter une section

5. Sélectionnez Recommandations de produits ou Produits connexes

6. 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