Réussi
Produits complémentaires
Mettez en avant des options additionnelles pertinentes grâce à des mises en page responsives et à un style de carte produit flexible.
- Documentation Shopify sur les sections et les blocs
- Documentation Company XYZ sur les paramètres de mise en page
- Documentation Company XYZ sur les paramètres des commandes du diaporama
- Documentation Company XYZ sur les paramètres des en-têtes
- Documentation Company XYZ sur les paramètres des cartes produit
- Documentation Company XYZ sur les paramètres des cartes
- Documentation Company XYZ sur les paramètres de l’espacement de section
- Documentation Company XYZ sur les paramètres des arrière-plans de section
- Documentation Company XYZ sur les paramètres des séparateurs
- Documentation Company XYZ sur les paramètres de visibilité
- Documentation Company XYZ sur les paramètres des largeurs de mise en page
Utilisez cette section pour afficher des produits qui s’accordent bien avec le produit actuel, comme des accessoires, des lots ou des articles de réapprovisionnement. Elle est particulièrement utile lorsque vous souhaitez augmenter les achats additionnels sans interrompre le parcours d’achat principal. Pour une vue d’ensemble plus large du fonctionnement des sections du thème, consultez la documentation Shopify sur les sections et les blocs
Cette section affiche uniquement les produits qui ont été configurés comme recommandations complémentaires dans l’application Search & Discovery.
Les produits en rupture de stock, ou déjà présents dans le panier, sont automatiquement exclus de la liste.
Paramètres de base
Section intitulée « Paramètres de base »Utilisez Nombre d’articles pour contrôler le nombre de recommandations affichées. Si vous souhaitez que la section renvoie l’ensemble complet disponible, utilisez 0 pour autoriser tous les articles correspondants jusqu’à la limite de la section.
Un nombre de produits plus réduit permet de garder la zone compacte près du formulaire d’achat. Un nombre plus élevé est plus pertinent lorsque vous souhaitez une expérience de navigation plus complète dans une grille ou un diaporama plus large.
Paramètres de mise en page
Section intitulée « Paramètres de mise en page »Ces paramètres contrôlent la manière dont les recommandations sont organisées sur ordinateur, tablette et mobile. Pour le comportement commun de mise en page, consultez la référence des paramètres de mise en page.
Vous pouvez choisir une mise en page distincte par appareil, ce qui est utile lorsque vous souhaitez une grille facile à comparer sur les grands écrans et un diaporama adapté au balayage sur les écrans plus petits. Les paramètres de colonnes aident à équilibrer la taille des cartes avec le nombre de produits que les clients peuvent voir en même temps.
Si vous n’avez pas besoin d’une mise en page distincte pour tablette, laissez la tablette suivre la configuration de l’ordinateur afin de faciliter la gestion de la section.
Paramètres du diaporama
Section intitulée « Paramètres du diaporama »Lorsqu’un appareil utilise une mise en page en diaporama, ces paramètres contrôlent la manière dont les clients parcourent les recommandations. Pour les options d’interaction partagées, consultez la référence des contrôles du diaporama.
L’animation par défaut est le choix le plus flexible pour la navigation entre plusieurs cartes. Fade crée une présentation plus simple, une carte à la fois, qui paraît plus calme, mais réduit la quantité de contenu pouvant être affichée en même temps.
La lecture automatique peut ajouter du mouvement, mais il vaut généralement mieux l’utiliser avec précaution dans les recommandations de produits. Si vous l’activez, choisissez un délai qui laisse suffisamment de temps pour lire les noms des produits et les prix.
La navigation, la pagination et les aperçus de la diapositive suivante aident à indiquer que davantage de produits sont disponibles. L’aperçu de la diapositive suivante est particulièrement utile sur les appareils tactiles, mais il ne s’applique pas lorsque l’animation fade est utilisée.
L’animation Fade force une présentation à une seule diapositive. Elle désactive également la pagination et les aperçus de la diapositive suivante.
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres d’en-tête
Section intitulée « Paramètres d’en-tête »La référence des paramètres d’en-tête couvre les contrôles d’en-tête partagés utilisés ici. Dans cette section, l’en-tête introduit la zone de recommandations avec un titre, une légende facultative, un texte d’accompagnement et un bouton facultatif.
Gardez le titre court afin que les produits restent au centre de l’attention. Ajoutez un bouton uniquement lorsqu’il offre une prochaine étape claire, comme la consultation d’une collection liée plus large.
Paramètres de carte
Section intitulée « Paramètres de carte »La référence des paramètres de carte produit et la référence des paramètres de carte expliquent les contrôles partagés utilisés ici. Ces paramètres vous permettent de remplacer uniquement pour cette section la présentation habituelle des cartes produit.
Utilisez-les pour rendre les produits complémentaires plus simples, plus compacts ou plus promotionnels que les cartes ailleurs. Des ratios d’image cohérents donnent généralement le résultat le plus net, en particulier lorsque plusieurs produits apparaissent côte à côte.
Les choix de CTA et de sélecteur de variante modifient le niveau d’action effectué directement dans la section. Si vous activez la sélection de variantes, assurez-vous que les options sont faciles à comprendre d’un coup d’œil.
Les couleurs de superposition de bannière ne comptent que lorsque le style de carte est défini sur Banner. Pour toute modification de couleur de carte, vérifiez soigneusement le contraste afin que les titres, les prix et les actions restent lisibles.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »La référence des paramètres d’espacement couvre les contrôles d’espacement partagés utilisés dans cette section. Utilisez l’espacement pour contrôler la proximité des recommandations par rapport au contenu produit environnant.
Un espacement plus serré aide la section à rester liée à la zone du produit principal. Un espacement plus important est plus adapté lorsque vous souhaitez qu’elle soit perçue comme un bloc de contenu distinct.
Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »La référence des paramètres d’arrière-plan de section explique les options d’arrière-plan partagées utilisées ici. Vous pouvez ajouter une couleur, un dégradé, une image ou une vidéo pour faire ressortir la zone de recommandations.
C’est particulièrement utile lorsque vous souhaitez une séparation visuelle plus marquée avec le reste de la page produit. Si vous ajoutez une image ou une vidéo d’arrière-plan, veillez à ce que les cartes restent faciles à lire et évitez les arrière-plans qui concurrencent les visuels des produits.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »La référence des paramètres de séparateur couvre les contrôles de ligne partagés utilisés ici. Les séparateurs supérieur et inférieur donnent plus de structure à la section sans ajouter de traitement d’arrière-plan complet.
C’est une bonne option lorsque la page présente déjà suffisamment de contraste visuel et n’a besoin que d’une séparation légère autour des recommandations.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »La référence des paramètres de visibilité explique les contrôles d’affichage responsifs partagés. Dans cette section, ils sont surtout utiles lorsque vous souhaitez différentes stratégies de recommandations sur ordinateur et sur mobile.
Utilisez-les avec précaution afin que les clients ne perdent pas l’accès à des suggestions d’options additionnelles utiles sur les appareils les plus importants pour votre boutique.
Paramètres de largeur
Section intitulée « Paramètres de largeur »La référence des paramètres de largeur couvre les contrôles de largeur partagés utilisés ici. La largeur du contenu influe sur le nombre de cartes pouvant tenir confortablement sur une ligne, tandis que la largeur de section est surtout importante lorsque vous utilisez un arrière-plan ou souhaitez un traitement visuel plus large.
Les mises en page plus larges conviennent généralement aux ensembles de produits plus importants et aux grilles à plusieurs colonnes. Des largeurs plus étroites peuvent aider à concentrer l’attention sur un nombre plus réduit de recommandations.
Conseils d’utilisation
Section intitulée « Conseils d’utilisation »- Configurez d’abord les recommandations. Si la section semble vide, vérifiez que des produits complémentaires ont été attribués dans l’application Search & Discovery. Si aucune recommandation éligible n’est disponible, la section n’imposera pas d’état vide complet.
- Choisissez la mise en page par appareil. Vérifiez les mises en page sur ordinateur et sur mobile, car les contrôles de grille et de diaporama peuvent modifier l’alignement, la visibilité, la navigation et la quantité de contenu affichée en même temps.
- Conservez les valeurs par défaut lorsque vous souhaitez un style de secours. Laissez les couleurs d’arrière-plan, les dégradés et les médias non définis si vous souhaitez que la section adopte un rendu plus simple. Les remplacements explicites rendent la zone plus autonome.
- Examinez les médias avec attention. Si vous utilisez des médias différents pour l’ordinateur et le mobile, vérifiez le recadrage, la lisibilité et le chargement afin que les cartes produit restent claires sur les deux affichages.
- Prévisualisez avec de vrais produits. Testez la section sur des produits qui disposent de plusieurs recommandations pour confirmer l’espacement, les quantités et le comportement du diaporama.