> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Bloc d'upsells
> Le bloc Upsells d'Aftersell Cart — des offres de produits choisies par une stratégie, affichées dans le tiroir.
> 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.
Contrairement au bloc [**Product add-on**](/fr/aftersell/cart/product-add-on-block), qui affiche toujours un produit que vous choisissez, Upsells est piloté par une Strategy qui décide quoi afficher.
## Comportement
* 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.
## Réglages
| Réglage | Ce qu'il contrôle | Par défaut |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| **Title** | Titre en texte enrichi au-dessus des offres. Prend en charge le gras, l'italique, l'alignement et la couleur. | `You may also like` |
| **Add button text** | Le libellé du bouton d'ajout de chaque produit. | `Add` |
| **Strategy** | La Strategy qui choisit les produits à afficher. | Une stratégie Shopify AI, attribuée pour vous |
| **Layout** | **Carousel** ou **List**. | Carousel |
| **Maximum products** | Combien de produits afficher au maximum. Accepte `1` à `12`. | `4` |
| **Show compare-at price** | Afficher ou non un prix comparé barré. | Activé |
| **Show product reviews** | Afficher ou non les notes en étoiles et le nombre d'avis sur chaque carte d'upsell. Les notes proviennent des metafields de produit de votre application d'avis et n'apparaissent que lorsque des données d'avis valides existent. | Désactivé |
### Applications d'avis prises en charge
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.
## Design
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.
### Style du texte
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 :
| Réglage | Ce qu'il contrôle |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text color** | Couleur de l'élément de texte sélectionné. |
| **Font** | **Theme font** (hérite de la police de votre thème) ou **Custom font** (saisissez le nom d'une police déjà chargée par votre thème). Disponible pour **Heading** uniquement. |
| **Size** | Taille de la police en pixels. |
| **Weight** | Graisse de la police : Light, Regular, Medium, Semibold ou Bold. |
| **Line height** | Interligne exprimé en multiplicateur de la taille de la police (par exemple, `1.4`). |
| **Letter spacing** | Espacement des lettres en pixels. Les valeurs négatives resserrent le texte. |
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.
Cliquer directement sur un élément de texte dans l'aperçu du panier le met en surbrillance et ouvre automatiquement ses contrôles dans le panneau.
### Couleurs des tuiles
| Réglage | Ce qu'il contrôle | Par défaut |
| ------------------------- | ----------------------------------------------------------- | ----------- |
| **Tile background color** | Le remplissage de fond de chaque carte de produit d'upsell. | Transparent |
| **Tile border color** | La couleur de bordure de chaque carte de produit d'upsell. | `#F6F6F7` |
### Avis
Lorsque **Show product reviews** est activé, vous pouvez personnaliser les couleurs des étoiles depuis la section **Reviews** du panneau Design.
| Réglage | Ce qu'il contrôle | Par défaut |
| -------------------- | --------------------------------------- | ---------- |
| **Star color** | La partie remplie de chaque étoile. | `#FDCC0D` |
| **Empty star color** | La partie non remplie de chaque étoile. | `#D1D5DB` |
## Placement et limites
* **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.
## Sélectionner une stratégie
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.
## Gérer une stratégie sélectionnée
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.
## Modèle personnalisé
Prend en charge un [modèle personnalisé](/fr/aftersell/cart/custom-templates) depuis son onglet Code, qui remplace le balisage intégré de ce bloc par votre JSX. Voici les props qu'il reçoit.
### Contenu du bloc
| Prop | Type | À quoi elle sert |
| --------------- | ---------------------- | ------------------------------------------------------------------------------------------- |
| `title` | `string` | Titre de la section. |
| `addButtonText` | `string` | Libellé du bouton d'ajout au panier. |
| `layout` | `'carousel' \| 'list'` | Défilement horizontal, ou retour à la ligne. Branchez votre balisage sur cette valeur. |
| `upsells` | `UpsellCard[]` | Les produits prêts à l'affichage. Voir [la forme de la carte](#the-upsell-card) ci-dessous. |
| `isLoading` | `boolean` | `true` pendant que les produits d'upsell sont encore en cours de récupération. |
### Ajout au panier
| Prop | Type | À quoi elle sert |
| ----------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------- |
| `selectVariant` | `(productId: string, variantId: number) => void` | Sélectionne une variante pour un produit. |
| `handleAdd` | `(productId: string) => void` | Ajoute au panier la variante sélectionnée de ce produit. |
| `addingProductId` | `string \| null` | Le produit en cours d'ajout, pour que vous puissiez désactiver seulement son bouton. `null` au repos. |
### Contrôles du carrousel
Pertinent uniquement lorsque `layout` vaut `'carousel'`.
| Prop | Type | À quoi elle sert |
| -------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `trackRef` | `{ current: HTMLDivElement \| null }` | Attachez-la à votre zone de défilement avec `ref={props.trackRef}` pour que les flèches puissent la faire défiler. |
| `atStart` | `boolean` | `true` lorsque la piste est à son bord de départ. Désactivez la flèche gauche. |
| `atEnd` | `boolean` | `true` lorsque la piste est à son bord de fin. Désactivez la flèche droite. |
| `scrollByCard` | `(direction: 1 \| -1) => void` | Fait défiler la piste d'une carte vers la gauche (`-1`) ou la droite (`1`). |
### La carte d'upsell
Chaque entrée de `upsells` :
| Champ | Type | À quoi il sert |
| ------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productId` | `string` | GID du produit. Utilisez-le comme clé React et comme cible d'ajout au panier. |
| `title` | `string` | Titre du produit. |
| `description` | `string` | Description en texte brut. `''` lorsque le produit n'en a pas. |
| `url` | `string \| null` | URL de la page produit. `null` lorsqu'indisponible. |
| `imageUrl` | `string \| null` | Image mise en avant. `null` lorsque le produit n'en a pas. |
| `selectedVariantImageUrl` | `string \| null` | L'image propre à la variante sélectionnée. `null` lorsque la variante n'en a pas — repliez-vous sur `imageUrl`. |
| `variantTitle` | `string \| null` | Les valeurs d'options de la variante sélectionnée (par ex. `Medium / Blue`), déjà résolues. `null` lorsque la variante n'a pas de véritable titre — vide ou le placeholder `Default Title` de Shopify. Un produit avec une seule variante nommée renvoie tout de même ce nom, protégez-vous donc avec `{upsell.variantTitle && …}` plutôt que de vous appuyer sur `hasMultipleVariants`. |
| `priceLabel` | `string` | Prix à afficher, déjà formaté. Le prix soldé en cas de réduction, sinon le prix de la variante. |
| `compareAtLabel` | `string \| null` | Prix d'origine barré, déjà formaté. `null` lorsqu'il n'y a rien à barrer. |
| `discountLabel` | `string \| null` | Libellé de réduction en ligne tel que `(20% off)`. `null` sans réduction. |
| `review` | `object \| null` | `{ rating, count, stars }`, où `stars` correspond à 5 URL d'images pré-rendues avec le remplissage fractionnaire intégré. Affichez chacune comme un élément image. `null` lorsque les avis sont désactivés ou que le produit n'en a pas. |
| `options` | `Array<{ name, values }>` | Groupes d'options, pour construire des sélecteurs ou des pastilles. |
| `variants` | `array` | Les combinaisons de variantes. Voir ci-dessous. |
| `selectedVariantId` | `number` | La variante actuellement sélectionnée. Passez-la à `selectVariant`. |
| `hasMultipleVariants` | `boolean` | S'il faut afficher un sélecteur de variantes tout court. |
| `vendor` | `string` | Le fournisseur du produit. |
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 }]`).
**La disponibilité est par combinaison, pas par option.** `options` vous donne les groupes à afficher, mais la possibilité d'acheter une sélection donnée réside dans l'entrée correspondante de `variants`. Résolvez la combinaison choisie par le client dans `variants` et conditionnez sur l'`availableForSale` de cette entrée, plutôt que de supposer que chaque valeur d'`options` est commandable.
`priceLabel` et `compareAtLabel` sont déjà formatés pour l'affichage, tandis que `variants[].price` et `variants[].compareAtPrice` sont des chaînes brutes dans l'unité principale de la devise. Ne mélangez pas les deux : affichez les libellés, et n'utilisez les valeurs brutes que pour les comparaisons.
## Design
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](/fr/aftersell/cart/design-settings).