Bloc d'upsells

Le bloc Upsells affiche des offres de produits dans le tiroir du panier, choisies par une Strategy que vous sélectionnez. Lorsqu’un client ouvre le panier, le bloc fait apparaître les produits que votre Strategy renvoie en fonction du contenu actuel du panier et des règles de ciblage que vous avez configurées.

Augmentez le panier moyen en présentant des offres de produits pertinentes au moment où les clients ouvrent leur panier, grâce à une Strategy qui choisit quoi afficher en fonction du contenu du panier et de vos règles de ciblage.

• Les produits sont récupérés en direct en fonction du panier actuel du client, donc les offres reflètent ce qui se trouve réellement dans le panier.
• Toute la section se masque lorsqu’aucun produit ne se résout — aucune Strategy attachée, la Strategy ne renvoie rien, ou aucun des produits renvoyés n’est achetable. Les clients ne voient jamais une section Upsells vide.
• Si une offre renvoyée comporte une réduction, le client voit un prix barré honnête et un badge de réduction, et la réduction est appliquée au paiement.

Les applications d’avis basées sur les metafields suivantes sont prises en charge : Shopify Product Reviews, Junip, Okendo, Growave, Fera, Stamped, Loox, REVIEWS.io, Automizely Reviews, Judge.me, Ali Reviews, Trustoo, Rivo, Rivyo et Vitals. Yotpo n’est pas pris en charge car il utilise une API distincte plutôt que les metafields de produit. Le bloc Upsells dispose de surcharges de design par bloc dans son panneau Design. Elles remplacent les réglages de design globaux du panier pour ce bloc uniquement. Laisser une valeur vide hérite du réglage global. Le bloc Upsells comprend une section Text dans ses paramètres Design. Utilisez-la pour contrôler la typographie de chaque élément de texte sur chaque carte d’upsell. Sélectionnez un élément de texte dans le sélecteur pour ajuster ses paramètres : Les éléments de texte que vous pouvez styliser sont regroupés par catégorie : Heading

• Heading — le titre de section au-dessus des cartes d’upsell (par exemple, You may also like). Prend également en charge une famille de police personnalisée. Le gras et la couleur sont définis dans l’éditeur de texte enrichi ci-dessus.

Product

• Product title — le nom du produit sur chaque carte d’upsell.
• Review count — le nombre d’avis affiché lorsque Show product reviews est activé.

Pricing

• Price — le prix actuel sur chaque carte.
• Compare-at price — le prix d’origine barré.
• Discount — le libellé de réduction (par exemple, 20% off).

Laisser un champ vide conserve la valeur par défaut de l’élément. Lorsque Show product reviews est activé, vous pouvez personnaliser les couleurs des étoiles depuis la section Reviews du panneau Design.

• Région : corps ou bas.
• Maximum : 1 par état de panier. Le panier rempli et le panier vide ont chacun le leur.
• État : panier rempli et panier vide.
• Non ajouté par défaut. Non verrouillé — vous pouvez le retirer ou le masquer.

Un bloc Upsells n’arrive pas vide : si aucune Strategy n’est définie, Aftersell résout la stratégie Shopify AI de votre boutique (en la créant si vous n’en avez pas encore) et la renseigne, de sorte que le bloc fonctionne immédiatement. Ouvrez le sélecteur Strategy pour la changer. Le sélecteur comporte deux groupes : Quick start

• Create strategy from selected products — choisissez directement des produits spécifiques et une Strategy est créée automatiquement pour vous.
• Create strategy from scratch — ouvre l’éditeur de Strategy pour que vous puissiez construire des règles sans quitter l’éditeur de panier.

Strategies

• Shopify AI recommendations — crée une Strategy adossée aux propres recommandations de Shopify, nommée Shopify AI recommended products partout où elle apparaît ensuite. Cette entrée disparaît une fois que vous en avez une, car une boutique n’a jamais besoin que d’une seule stratégie Shopify AI.
• Vos Strategies existantes, listées par nom. Tapez dans le champ de recherche pour les filtrer.

Une fois une Strategy sélectionnée, son nom apparaît sur la ligne de stratégie à l’intérieur du bloc. Une fois une Strategy attachée, un bouton ••• (points de suspension) apparaît sur la ligne de stratégie. Cliquez dessus pour ouvrir le menu d’actions :

• Edit strategy — ouvre l’éditeur de Strategy dans un nouvel onglet, afin que votre session de l’éditeur de panier et vos modifications non enregistrées restent intactes. Cette option n’est pas disponible pour la stratégie recommandée par l’IA de Shopify, qui est gérée automatiquement et n’a pas de règles modifiables.
• Remove from upsell — détache la Strategy de ce bloc. La Strategy elle-même n’est pas supprimée ; elle reste disponible dans votre liste de Strategies.

Modifier une Strategy dans un nouvel onglet n’affecte pas la session de l’éditeur de panier — vous pouvez revenir à l’onglet de l’éditeur de panier et continuer la configuration sans perdre votre travail. Prend en charge un modèle personnalisé depuis son onglet Code, qui remplace le balisage intégré de ce bloc par votre JSX. Voici les props qu’il reçoit. Pertinent uniquement lorsque layout vaut 'carousel'. Chaque entrée de upsells : Chaque entrée de variants porte id, title, price et compareAtPrice (bruts, non formatés, dans l’unité principale de la devise sous forme de chaînes), availableForSale, imageUrl, sku et selectedOptions ([{ name, value }]). Stylisez ce bloc via sa section Design dans le panneau de réglages. Ce sont des surcharges par bloc qui se superposent à votre design global et y retombent lorsqu’elles sont vides. Que sont les réglages de design ? Apprenez-en plus ici : Réglages de design.