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

# Widgets post-achat

> Ce document présente les widgets post-achat disponibles dans Aftersell et la façon dont ils sont utilisés pour construire des expériences d'upsell post-achat. Les widgets sont regroupés par portée et par fonction, chaque widget étant documenté une seule fois pour éviter les doublons.

***

<div id="funnel-wide-widgets">
  # Widgets à l'échelle du tunnel
</div>

<div id="progress-bar">
  ## Progress Bar
</div>

La **Progress Bar** montre aux clients où ils se trouvent dans le parcours post-achat.

Lorsqu'elle est activée, la barre de progression apparaît sur toutes les offres d'upsell du tunnel. Toute modification apportée à la barre de progression s'applique à l'ensemble du tunnel.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-progress-bar.gif?s=f9ee14053add6280b48524aca197a791" alt="Barre de progression post-achat avec les étapes Cart, Order placed, Special offer et Done" width="2936" height="480" data-path="images/aftersell/ppu-widgets-post-purchase-progress-bar.gif" />

**Options de configuration**

* Activez ou désactivez la barre de progression pour le tunnel
* Choisissez un style d'affichage :
  * **Minimal**
  * **Minimal with labels**
  * **Maximal**
* Sélectionnez une apparence claire ou sombre
* Ajustez les marges supérieure et inférieure pour contrôler l'espacement

***

<div id="offer-level-widgets">
  # Widgets au niveau de l'offre
</div>

Les widgets au niveau de l'offre contrôlent le contenu et le comportement d'une offre d'upsell individuelle.

Ces widgets définissent ce que le client voit à une étape d'upsell spécifique, y compris le message, l'urgence, les informations produit, les détails de prix et les actions.

Chaque offre d'un tunnel peut être personnalisée indépendamment à l'aide des widgets au niveau de l'offre, ce qui vous permet d'adapter l'expérience à chaque étape.

Ces widgets incluent :\
[Text](#text)\
[Timer](#timer)\
[Upsell Product](#upsell-product)\
[Product Selection](#product-selection)\
[Discount](#discount)\
[Badge](#badge)\
[Shipping](#shipping)\
[Image](#image)\
[Buttons](#buttons)\
[Price Breakdown](#price-breakdown)\
[Product Details](#product-details)\
[Variants](#variant-plan-options)\
[Layout](#layout)\
[Video](#video)\
[Testimonials](#testimonials)

***

<div id="text">
  ## Text
</div>

Le widget **Text** est utilisé pour les titres et les textes d'accompagnement tout au long d'une offre.

Il prend en charge un titre et un corps de texte facultatif, avec des contrôles pour la taille de police, la couleur, la graisse, l'alignement, le texte barré et l'espacement.

Utilisez la variable dynamique `{first-name}` pour personnaliser le message pour chaque client.

***

<div id="timer">
  ## Timer
</div>

Le widget **Timer** ajoute un sentiment d'urgence en affichant un compte à rebours en direct.

Tant que le minuteur tourne, l'offre reste visible. Lorsque le minuteur atteint zéro, l'offre d'upsell disparaît automatiquement et le client passe à l'étape suivante du tunnel.

***

<div id="upsell-product">
  ## Upsell Product
</div>

Le widget **Upsell Product** est le cœur de l'offre. Il définit quel produit est présenté et sert de conteneur pour tous les widgets liés au produit ci-dessous.

Tout ce qui suit se configure au sein de ce widget.

***

<div id="product-selection">
  ## Product Selection
</div>

Le widget Product Selection contrôle quel produit est affiché dans une offre d'upsell.

Vous pouvez sélectionner un produit fixe ou déterminer dynamiquement le produit d'upsell en fonction de la commande initiale du client, permettant des expériences d'upsell à la fois statiques et adaptatives.

<div id="product-type-options">
  #### Options de type de produit
</div>

* **Specific product**\
  Affiche toujours le même produit dans l'upsell.
* **Automatic upsell**\
  Sélectionne dynamiquement un produit à l'aide d'une logique d'upsell prédéfinie.
* **Most expensive in cart**\
  Utilise l'article au prix le plus élevé de la commande initiale du client.
* **Least expensive in cart**\
  Utilise l'article au prix le plus bas de la commande initiale du client.

<div id="changing-the-product">
  #### Changer le produit
</div>

Le produit sélectionné apparaît en haut du widget. Pour le changer :

1. Cliquez sur **Change product**
2. Sélectionnez un type de produit
3. Choisissez ou confirmez le produit

Lorsque vous parcourez l'onglet **Products** du sélecteur, vous pouvez cocher **Active products only** pour masquer les produits Draft et Archived de la liste. Ce filtre est désactivé par défaut et ne s'applique qu'à l'onglet Products — les Collections ne sont pas affectées.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-offer-editor-edit-product.gif?s=a281ef6837574437297ca063e861d119" alt="Éditeur d'offre Aftersell affichant le panneau Edit upsell product à côté d'un aperçu de l'offre en direct" width="948" height="480" data-path="images/aftersell/ppu-widgets-offer-editor-edit-product.gif" />

<div id="identifying-products-with-identical-names">
  #### Identifier les produits aux noms identiques
</div>

Si votre boutique compte plusieurs produits ou variantes portant le même titre, activez le bouton **Show IDs** dans le sélecteur de produits pour afficher l'ID numérique du produit Shopify et l'ID de la variante sous chaque nom. Cela permet de confirmer facilement que vous sélectionnez le bon produit.

Le bouton **Show IDs** est disponible dans l'onglet **Product** du sélecteur et est désactivé par défaut. Il n'est pas disponible dans l'onglet Collection.

***

<div id="discount">
  ## Discount
</div>

Le widget **Discount** applique et affiche les prix promotionnels.

Vous pouvez choisir entre une remise en pourcentage (%) ou une remise fixe en dollars (\$). Un texte de remise personnalisé peut être ajouté si vous le souhaitez, et la remise peut soit se référer au prix comparé du produit (compare-at price), soit l'ignorer.

<div id="bulk-discount-shortcut-for-multi-product-offers">
  ### Raccourci de remise groupée pour les offres multi-produits
</div>

Pour les offres multi-produits et de collection, une section **Discount** apparaît directement dans les paramètres du widget Upsell Products — sous la zone de sélection de produits. Cela vous offre un moyen plus rapide de définir ou de mettre à jour des remises sur plusieurs produits sans ouvrir les paramètres individuels de chaque produit.

La section est repliée par défaut. Lorsque vous la développez :

* Une liste de tous les produits de l'offre s'affiche, chacun avec une case à cocher et un badge indiquant sa remise actuelle (par exemple, `17% off` ou `$18.00 off`).
* Sélectionnez les produits à mettre à jour à l'aide des cases à cocher. Tous les produits sont sélectionnés par défaut.
* Une pastille sous la liste indique à combien de produits vos modifications s'appliqueront.
* Utilisez les champs de type et de valeur de remise pour définir la remise. Les modifications ne s'appliquent qu'aux produits sélectionnés — les produits non sélectionnés conservent leurs remises existantes.

<div id="mixed-discounts-across-products">
  #### Remises mixtes entre produits
</div>

Lorsque les produits sélectionnés ont des paramètres de remise différents, les champs affichent un texte indicatif pour signaler la variation :

* Si les produits ont des **types de remise** différents (par exemple, certains en % et d'autres en \$), le sélecteur de type affiche **Mixed**.
* Si les produits ont des **valeurs de remise** ou des types différents, le champ de valeur affiche **Multiple values** avec une note indiquant que la saisie d'une nouvelle valeur écrasera la remise actuelle de chaque produit sélectionné.

<div id="info-icon-on-product-rows">
  #### Icône d'information sur les lignes de produits
</div>

Une icône d'information (i) apparaît à côté du badge de remise d'un produit lorsque ce produit a des paramètres de remise supplémentaires configurés — comme un titre de remise personnalisé, un prix comparé ou une remise d'abonnement. Le survol de l'icône affiche un résumé de ces éléments supplémentaires.

***

<div id="badge">
  ## Badge
</div>

Le widget **Badge** met en avant des attributs clés du produit tels que la popularité ou l'urgence.

Vous pouvez sélectionner un libellé de badge prédéfini, choisir parmi plusieurs styles visuels, inclure une icône et contrôler l'emplacement du badge dans l'offre ou directement sur l'image du produit.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-offer-trending.png?fit=max&auto=format&n=SnVX3h-PpMMxQMDU&q=85&s=c7c4cf7649723721d24bffff865b6f2b" alt="Offre post-achat affichant un badge Trending au-dessus du titre du produit" width="1920" height="898" data-path="images/aftersell/ppu-widgets-post-purchase-offer-trending.png" />

Des images de badge personnalisées peuvent être téléversées depuis **Advanced badge settings** (SVG ou PNG, jusqu'à 10 Mo).

***

<div id="shipping">
  ## Shipping
</div>

Le widget **Shipping** contrôle la façon dont les frais de livraison sont communiqués.

Vous pouvez soit offrir la livraison gratuite, soit facturer la livraison en définissant un prix de livraison spécifique.

***

<div id="image">
  ## Image
</div>

Le widget **Image** contrôle la façon dont les images de produits sont affichées.

Il inclut des options pour ajuster la taille de l'image principale, ajouter une bordure, activer un carrousel d'images et téléverser une image de produit personnalisée depuis **Advanced image settings**.

***

<div id="language">
  ## Language
</div>

La section **Language** contrôle la langue utilisée pour tout le texte système de l'offre, y compris le texte des boutons, les libellés d'abonnement, les libellés de prix et les autres chaînes non modifiables.

Sélectionnez une langue dans le menu déroulant **Language** pour traduire automatiquement le texte système de cette offre. Aftersell prend en charge 32 langues.

Ce paramètre n'affecte pas les badges ni les champs de texte personnalisés — seul le texte généré par le système est traduit.

***

<div id="buttons">
  ## Buttons
</div>

Le **widget Buttons** contrôle la façon dont les clients acceptent ou refusent un upsell pendant le paiement.

Vous pouvez personnaliser le comportement et l'apparence des boutons, notamment :

* Sélectionner le **texte par défaut du bouton d'acceptation**
* Exiger un **clic de confirmation** avant qu'un upsell soit accepté
* Modifier le **style du bouton de refus** (par exemple, bouton ou lien)
* Ajuster l'**alignement des boutons** et leur largeur
* Ajouter un **texte d'accompagnement** facultatif au-dessus ou en dessous des boutons, avec des contrôles de style et la prise en charge des variables dynamiques

<div id="button-text">
  ### Texte des boutons
</div>

Vous pouvez configurer le texte du bouton d'acceptation de vos offres post-achat à l'aide du menu déroulant **Default accept button text**. Les options disponibles dépendent du type d'offre :

**Offres standard :**

* **Pay Now** — Affiche « Pay Now • \[prix total du produit] » (ou « Add Now • Free » pour les produits gratuits)
* **Accept Offer** — Affiche « Accept Offer » quel que soit le prix

**Offres Subscription Upgrade :**

* **Upgrade Subscription** — Affiche « Upgrade Subscription » (par défaut pour les nouvelles offres Subscription Upgrade)
* **Accept Offer** — Affiche « Accept Offer » quel que soit le prix
* **Pay Now** — Affiche « Pay Now • \[prix total du produit] » (ou « Add Now • Free » pour les produits gratuits)

Pour traduire le texte des boutons, utilisez la section **Language** au-dessus de la section Buttons.

<div id="button-layout-options">
  ### Options de disposition des boutons
</div>

Vous pouvez également contrôler la **position des boutons d'acceptation et de refus** l'un par rapport à l'autre. Les dispositions suivantes sont prises en charge :

* **Accept above decline** — Affiche le bouton d'acceptation au-dessus de l'option de refus
* **Decline above accept** — Affiche l'option de refus au-dessus du bouton d'acceptation
* **Accept beside decline** — Affiche les boutons d'acceptation et de refus côte à côte

Ces options de disposition vous offrent plus de flexibilité pour correspondre à l'expérience de paiement et à la hiérarchie de message souhaitées.

***

<div id="price-breakdown">
  ## Price Breakdown
</div>

Le widget **Price Breakdown** apporte de la clarté sur les prix.

Il peut afficher la livraison et les taxes, inclure des détails supplémentaires comme le sous-total et les remises, et être aligné ou positionné près des boutons de paiement pour une clarté maximale.

<div id="hide-shipping-adjustment-line">
  ### Masquer la ligne d'ajustement de livraison
</div>

Lorsque votre offre est configurée en tant que replacement upsell (en utilisant le paramètre « Replace item in original order with upsell »), le détail des prix inclut une ligne **Shipping adjustment** qui reflète toute différence de frais de livraison entre le produit d'origine et le produit de remplacement.

Vous pouvez supprimer cette ligne à l'aide de la case **Hide shipping adjustment line**, qui n'apparaît dans la section Price Breakdown que lorsqu'un replacement upsell est configuré. Ce paramètre est désactivé par défaut, les offres existantes ne sont donc pas affectées.

* Lorsque la case est cochée, la ligne d'ajustement de livraison est masquée dans le détail des prix du client.
* Lorsqu'elle est décochée, la ligne d'ajustement de livraison s'affiche normalement.

Ce paramètre n'affecte que la ligne d'ajustement de livraison des offres de replacement upsell. La ligne de livraison standard des offres sans remplacement n'est pas affectée.

***

<div id="product-details">
  ## Product Details
</div>

Le widget **Product Details** contrôle la présentation des informations clés du produit.

Il prend en charge les notes d'avis produits (masquées automatiquement en l'absence d'avis), un sélecteur de quantité facultatif et la possibilité d'ignorer l'offre si le produit figure déjà dans la commande d'origine.

Les titres et les prix des produits sont entièrement stylisables et prennent en charge certaines variables dynamiques, notamment `{product}`, `{original-price}`, `{current-price}`, `{savings}` et `{savings-line}`.

Une description d'offre facultative peut être ajoutée pour renforcer la valeur ou l'urgence.

<div id="product-review-star-colors">
  ### Couleurs des étoiles des avis produits
</div>

Lorsque **Show product reviews rating** est activé, vous pouvez personnaliser les couleurs de l'affichage des étoiles :

* **Star color** — la couleur des étoiles pleines (actives). Par défaut : `#fdcc0d` (jaune).
* **Empty star color** — la couleur des étoiles vides (inactives). Par défaut : `#d1d5db` (gris clair).

Pour modifier les couleurs, ouvrez les paramètres du widget **Product Details**, activez **Show product reviews rating** et utilisez les champs de couleur pour définir vos valeurs hexadécimales préférées.

<div id="quantity-selector-presets">
  ### Préréglages du sélecteur de quantité
</div>

Lorsque le sélecteur de quantité est activé, vous pouvez configurer une **quantité prédéfinie** pour contrôler combien d'unités sont affichées ou autorisées lorsque l'offre s'affiche. Les options de préréglage suivantes sont disponibles :

* **Fixed** — Définit une quantité spécifique de départ pour le client. Le sélecteur de quantité est masqué et le client ne peut pas modifier la quantité.
* **Percentage of purchased quantity** — Définit la quantité comme un pourcentage du nombre d'unités que le client a initialement achetées.
* **Minimum quantity** — Définit un plancher pour la quantité. Le client démarre à cette valeur et peut l'augmenter.
* **Maximum quantity** — Définit un plafond pour la quantité. Le client démarre à 1 et ne peut pas dépasser le maximum configuré (jusqu'à 20). Un message indiquant la quantité maximale pour l'article est affiché au client.

<div id="description-position">
  ### Position de la description
</div>

Pour les offres à produit unique, vous pouvez contrôler l'emplacement de la description du produit par rapport aux boutons CTA :

* **Default (above buttons)** — La description apparaît au-dessus des boutons d'acceptation et de refus
* **Below buttons** — La description apparaît en dessous des boutons d'acceptation et de refus

Ce paramètre vous permet d'ajuster la disposition pour mieux correspondre à votre hiérarchie de message et à vos préférences de design.

***

<div id="variant-plan-options">
  ## Variant & plan options
</div>

Le widget **Variant & Plan Options** contrôle la visibilité des variantes, leur sélection et le verrouillage des formules d'abonnement.

Vous pouvez afficher ou masquer les variantes en rupture de stock, masquer l'intégralité du produit si toutes les variantes sont indisponibles et contrôler si les options de variantes à choix unique sont affichées. **Les paramètres avancés vous permettent de masquer entièrement le sélecteur de variantes**.

Les options de présélection de variantes incluent la correspondance intelligente (Smart matching) avec l'achat initial, Unselected, qui exige une sélection de l'utilisateur, ou First available variant.

Pour les produits avec plusieurs options de variantes, toutes les options sont affichées et une variante en stock est présélectionnée lorsqu'elle est disponible ; les options en rupture de stock sont affichées comme indisponibles. Pour les produits avec une seule option de variante, les options en rupture de stock sont masquées.

<div id="subscription-plan-locking">
  ### Verrouillage de la formule d'abonnement
</div>

Lorsque vous proposez des produits en abonnement avec plusieurs formules d'abonnement, vous pouvez verrouiller l'offre sur une formule spécifique. Cela empêche les clients de changer de formule d'abonnement pendant l'expérience post-achat, garantissant qu'ils reçoivent exactement l'option d'abonnement que vous avez configurée.

**Pour verrouiller une formule d'abonnement :**

1. Dans la section **Variant & Plan Options**, repérez le menu déroulant **Lock subscription plan**
2. Sélectionnez une formule spécifique dans le menu déroulant
3. La formule est désormais verrouillée — les clients verront le nom de la formule sous forme de texte statique au lieu d'un menu déroulant modifiable

<Frame>
  <img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-variant-plan-options.gif?s=8851a3d937b3f732660588f555e8743b" alt="Panneau Variant and Plan Options avec le menu déroulant Lock subscription plan" width="848" height="1080" data-path="images/aftersell/ppu-widgets-variant-plan-options.gif" />
</Frame>

**Lorsqu'une formule est verrouillée :**

* Les clients voient le nom de la formule affiché sous forme de texte
* Le menu déroulant de sélection de formule est masqué
* Les clients ne peuvent pas changer de formule d'abonnement
* Si la formule verrouillée n'est plus disponible dans Shopify, l'offre revient élégamment à l'affichage de toutes les formules disponibles

**Réinitialisation automatique :**

Le paramètre de formule verrouillée se réinitialise automatiquement si vous changez l'option d'achat du produit en achat unique uniquement (en supprimant l'option d'abonnement).

<div id="variant-selector-position">
  ### Position du sélecteur de variantes
</div>

Vous pouvez contrôler l'emplacement du sélecteur de variantes par rapport aux boutons CTA :

* **Above CTA buttons (default)** — Le sélecteur de variantes apparaît au-dessus des boutons d'acceptation et de refus
* **Below CTA buttons** — Le sélecteur de variantes apparaît en dessous des boutons d'acceptation et de refus

Lorsque le sélecteur de variantes et la description du produit sont tous deux positionnés en dessous des boutons CTA, vous pouvez contrôler leur ordre :

* **Variant selector first** — Le sélecteur de variantes apparaît avant la description du produit
* **Description first** — La description du produit apparaît avant le sélecteur de variantes

Vous pouvez également ajuster les marges supérieure et inférieure du sélecteur de variantes pour affiner l'espacement et créer la disposition visuelle souhaitée.

***

<div id="layout">
  ## Layout
</div>

Le widget **Layout** contrôle la structure globale et l'espacement de l'upsell.

Vous pouvez choisir entre une disposition à une ou deux colonnes, ajuster la largeur maximale de la mise en page et affiner les marges supérieure et inférieure pour créer une expérience claire et lisible.

***

<div id="video">
  ## Video
</div>

Le widget **Video** ajoute à une offre une vignette cliquable qui ouvre un lecteur vidéo hébergé dans un nouvel onglet, avec un arrière-plan stylisé et un bouton pour revenir à l'upsell. La vidéo se lit dans un nouvel onglet plutôt qu'en ligne, l'offre d'upsell reste donc ouverte dans l'onglet d'origine.

Le widget prend également en charge une **couleur d'arrière-plan** pour correspondre à votre marque ou concentrer l'attention sur le lecteur, ainsi que des **paramètres de mise en page** pour l'alignement (gauche, centre, droite) et les marges supérieure et inférieure.

Pour prévisualiser l'expérience client, cliquez sur la vignette dans l'**aperçu de l'offre** de l'éditeur. Le lecteur vidéo hébergé s'ouvre dans un nouvel onglet exactement comme il le fera sur la boutique, vous pouvez donc vérifier la vignette, le CTA et les comportements de fermeture avant de publier.

<div id="browser-compatibility">
  ### Compatibilité des navigateurs
</div>

Le widget vidéo ouvre le lecteur dans un nouvel onglet. Sur ordinateur, cela fonctionne toujours, le widget s'affiche donc toujours.

Sur mobile, c'est l'inverse : Aftersell n'affiche le widget que dans les navigateurs qu'il reconnaît comme capables d'ouvrir un nouvel onglet sans faire sortir le client du checkout. Cela couvre les navigateurs mobiles natifs — Safari, Chrome, Firefox et d'autres navigateurs bien connus — ainsi que les navigateurs intégrés de Facebook et Instagram.

**Tous les autres navigateurs mobiles masquent le widget.** Cela inclut les navigateurs intégrés comme l'application Google, TikTok et Pinterest, les webviews génériques et tout ce qu'Aftersell ne reconnaît pas. Comme les navigateurs non reconnus sont masqués plutôt qu'affichés, l'ensemble des environnements où le widget n'apparaîtra pas n'est pas une liste fixe — un navigateur qu'Aftersell n'a jamais vu auparavant le masque également.

Là où le widget est masqué, vous pouvez téléverser une **image de repli (Fallback image)** à afficher à sa place — une image promotionnelle statique ou un visuel de marque, par exemple. Elle est affichée sans lien ni bouton de lecture. Si aucune image de repli n'est définie, rien ne s'affiche à la place du widget.

<Tip>
  Définissez une **Fallback image** sur chaque widget vidéo que vous publiez. Comme tout ce qui n'est pas reconnu est masqué, vos sources de trafic seules ne vous diront pas si certains clients ne voient pas le widget — et sans image de repli, ces clients ne voient rien du tout.
</Tip>

<div id="video-source">
  ### Source vidéo
</div>

Le widget lit une seule vidéo provenant de l'une des deux sources. Utilisez le bouton bascule **Upload** / **Link** dans les paramètres du widget pour choisir quelle source le lecteur utilise :

* **Upload** — glissez-déposez ou sélectionnez un fichier MP4, WebM ou MOV (jusqu'à 50 Mo) pour l'héberger directement dans vos fichiers Shopify (Shopify Files). Après le téléversement, Shopify traite le fichier et un aperçu apparaît dans l'éditeur.
* **Link** — collez une URL YouTube, une URL Vimeo ou un lien direct vers un fichier vidéo hébergé (par exemple, un MP4 sur votre propre CDN).

Vous pouvez renseigner les deux, mais seule la source sélectionnée dans le bouton bascule est lue — l'autre reste derrière son onglet et n'est **pas** utilisée comme solution de repli automatique. Si une seule source est définie, cette source est lue quel que soit le bouton bascule.

Vous devez définir au moins une source — une vidéo téléversée ou un lien vidéo — avant de pouvoir enregistrer le widget.

<div id="supported-link-formats">
  #### Formats de liens pris en charge
</div>

Le champ de lien accepte les formats suivants :

* **YouTube** — utilisez l'URL standard de la vidéo (par exemple, `https://youtu.be/VIDEO_ID` ou `https://www.youtube.com/watch?v=VIDEO_ID`). Les URL YouTube Shorts (`youtube.com/shorts/...`) ne sont pas prises en charge — ouvrez la vidéo sur YouTube et utilisez plutôt le lien de partage.
* **Vimeo** — utilisez l'URL standard de la vidéo (par exemple, `https://vimeo.com/VIDEO_ID`). Les URL de showcase, ainsi que les pages de chaîne ou de profil qui ne pointent pas vers une vidéo spécifique, ne sont pas prises en charge — utilisez l'URL de la vidéo individuelle depuis sa barre d'adresse. Une URL de chaîne ou de groupe qui inclut l'ID numérique de la vidéo fonctionne.
* **Fichier direct** — une URL HTTPS accessible publiquement pointant vers un fichier vidéo (par exemple, un MP4 sur votre CDN).

<div id="link-validation">
  #### Validation des liens
</div>

L'éditeur valide votre lien à deux moments :

* **Lorsque vous quittez le champ** — si la forme de l'URL est manifestement incorrecte (par exemple, un lien YouTube Shorts ou une URL de showcase Vimeo), une erreur en ligne explique quoi utiliser à la place.
* **Lorsque vous enregistrez** — l'éditeur vérifie auprès du fournisseur vidéo que la vidéo est intégrable. Si la vidéo est privée, supprimée ou si l'intégration est désactivée, l'enregistrement est bloqué et la raison est affichée sur le champ de lien. Corrigez le lien et enregistrez à nouveau pour continuer.

Si la vérification du fournisseur est indisponible (par exemple, en raison d'un problème réseau), l'enregistrement se poursuit sans blocage.

<div id="shopify-files-permission">
  #### Autorisation Shopify Files
</div>

Le téléversement d'une vidéo nécessite l'autorisation `write_files`. Si cette autorisation n'a pas été accordée, une bannière apparaît dans la zone de téléversement avec un bouton **Update**. Cliquez dessus pour accorder l'autorisation et activer les téléversements.

<div id="upload-processing">
  #### Traitement du téléversement
</div>

Après avoir déposé ou sélectionné un fichier, l'outil de téléversement affiche **Uploading…** pendant le transfert du fichier, puis **Processing…** pendant que Shopify le transcode. Un aperçu apparaît une fois le traitement terminé. Vous pouvez continuer à modifier les autres paramètres du widget pendant le traitement de la vidéo.

Vous ne pouvez pas enregistrer un widget dont la seule source est une vidéo encore en cours de traitement — l'enregistrement est bloqué jusqu'à la fin du transcodage, ou jusqu'à ce que vous ajoutiez un lien vidéo à utiliser comme source entre-temps. Si vous annulez les modifications ou fermez l'éditeur avant d'enregistrer, tous les téléversements en cours sont supprimés de Shopify Files.

Les liens vidéo sont validés lorsque vous enregistrez le widget.

<div id="thumbnail-and-watch-video-cta">
  ### Vignette et CTA de visionnage
</div>

Téléversez l'image que les clients verront dans l'offre avant d'ouvrir la vidéo. Un CTA de visionnage est automatiquement placé sur la vignette pour attirer l'attention sur l'action de lecture. Vous pouvez styliser le texte du libellé du CTA pour correspondre à votre marque. Les vignettes ne sont pas générées automatiquement à partir de la vidéo — elles doivent être téléversées.

Vous pouvez également téléverser une **vignette réservée au mobile**. Lorsqu'elle est définie, la vignette mobile est affichée sur les appareils mobiles et la vignette par défaut est utilisée sur ordinateur, vous pouvez donc adapter l'image à chaque taille d'écran.

<div id="fallback-image">
  ### Image de repli
</div>

Le paramètre **Fallback image** vous permet de téléverser une image à afficher lorsque le widget vidéo est masqué parce que le navigateur du client ne peut pas ouvrir le lecteur — voir [Compatibilité des navigateurs](#browser-compatibility). L'image de repli est affichée sans lien ni superposition de lecture ; c'est une image statique uniquement.

Si aucune image de repli n'est téléversée, rien ne s'affiche à la place du widget.

<div id="autoplay">
  ### Lecture automatique
</div>

Le bouton bascule **Autoplay** contrôle si la vidéo démarre automatiquement à l'ouverture du lecteur hébergé.

Lorsque la lecture automatique est activée, la vidéo démarre **en sourdine**. La plupart des navigateurs modernes bloquent la lecture automatique des vidéos avec son tant que le client n'a pas interagi avec la page, la lecture en sourdine est donc nécessaire pour que la lecture automatique se déclenche de manière fiable. Les clients peuvent réactiver le son de la vidéo à l'aide des commandes du lecteur une fois qu'elle a démarré.

Si vous préférez que l'audio soit lu dès la première image, laissez la lecture automatique désactivée et comptez sur le client pour cliquer manuellement sur lecture.

<div id="closing-the-video">
  ### Fermer la vidéo
</div>

Il existe trois façons pour un client de fermer le lecteur hébergé et de revenir à l'offre d'upsell :

* **Bouton Back to offer** — un bouton sous le lecteur qui ferme l'onglet et revient à l'upsell.
* **Double-clic n'importe où** — un double-clic n'importe où sur l'arrière-plan ferme le lecteur.
* **Fermeture automatique à la fin** — lorsque la lecture de la vidéo se termine, le lecteur se ferme automatiquement.

Comme la vidéo s'ouvre dans un nouvel onglet, la fermeture du lecteur ferme cet onglet — l'upsell reste dans l'onglet d'origine.

<div id="language-and-translations">
  ### Langue et traductions
</div>

Les textes de la page du lecteur vidéo — le libellé du bouton de retour à l'offre, les indications pour ordinateur et mobile, ainsi que le titre et le message affichés lorsque la vidéo est indisponible — suivent le paramètre **Language** de l'offre et peuvent être personnalisés sous **Settings > Translations**.

***

<div id="testimonials">
  ## Testimonials
</div>

Le widget **Testimonials** affiche de vrais avis produits sur votre offre post-achat pour instaurer la confiance et conforter la décision du client d'accepter un upsell.

Les avis proviennent de votre application d'avis connectée. Le widget apparaît dans le sélecteur de l'éditeur d'offre sous le nom **« Testimonials »** avec une icône d'étoile.

Pour utiliser ce widget, vous devez avoir une application d'avis connectée dans **Settings > Product Reviews**. Les applications prises en charge incluent Judge.me, Klaviyo, Okendo et Yotpo. Consultez [Intégrations d'applications d'avis](/fr/aftersell/checkout_widget_types#review-app-integrations) pour les instructions de configuration.

<div id="selection-modes">
  ### Modes de sélection
</div>

Le widget Testimonials prend en charge deux modes :

* **Manual** — Vous sélectionnez un ensemble d'avis à afficher. Les avis sont présentés dans l'ordre où vous les avez enregistrés.
* **Dynamic** — Les avis sont automatiquement extraits du cache synchronisé de votre application d'avis en fonction des produits de l'offre d'upsell. Les avis sont liés aux produits de l'offre, pas à la commande d'origine du client.

<div id="configuration-options">
  ### Options de configuration
</div>

* **Review app** — Sélectionnez l'application d'avis connectée depuis laquelle extraire les avis.
* **Mode** — Choisissez Manual ou Dynamic.
* **Minimum rating** — Définissez la note minimale en étoiles pour l'affichage des avis (par exemple, 4 étoiles et plus).
* **Display toggles** — Affichez ou masquez les éléments individuels des avis :
  * Note en étoiles
  * Titre de l'avis
  * Nom de l'auteur
  * Date de l'avis
  * Badge d'acheteur vérifié
* **Truncate review text** — Définissez une longueur maximale en caractères pour le texte des avis. Les avis dépassant cette limite sont tronqués avec des points de suspension.
* **Max reviews to show** — Définissez le nombre d'avis affichés, de 1 à 3.
* **Layout** — Disposez les avis à l'**horizontale** (côte à côte) ou à la **verticale** (empilés).
* **Padding** — Ajustez l'espacement autour du widget.

<div id="dynamic-mode-and-review-syncing">
  ### Mode dynamique et synchronisation des avis
</div>

En mode dynamique, Aftersell importe les avis depuis votre application d'avis et les stocke pour qu'ils puissent être affichés dans l'offre. La première importation a lieu automatiquement dans les 24 heures suivant la connexion de votre application d'avis, puis une fois par semaine ensuite.

Pour importer les avis immédiatement, allez dans **Settings > Product Reviews** et cliquez sur **Sync now** pour votre application d'avis.

<div id="verified-buyer-badge">
  ### Badge d'acheteur vérifié
</div>

Lorsque le badge d'acheteur vérifié est activé, un libellé **« Verified buyer »** est affiché sur les avis éligibles. Ce libellé est automatiquement traduit dans la langue définie pour l'offre et prend en charge 32 langues.

***

<div id="adding-additional-widgets">
  ## Ajouter des widgets supplémentaires
</div>

Les widgets peuvent être ajoutés **au-dessus ou en dessous du widget Upsell Product**, ce qui vous permet de contrôler le flux d'informations avant ou après le produit lui-même.

Les widgets supplémentaires pouvant être ajoutés incluent :

* **Image** — Affichez une image d'accompagnement pour renforcer visuellement l'offre.
* **Text** — Ajoutez un texte d'accompagnement pour communiquer les messages clés.
* **Text & Image** — Combinez texte et visuels pour mettre en avant la valeur ou expliquer l'offre.
* **Extra Buy Button** — Ajoutez un appel à l'action supplémentaire pour encourager l'acceptation de l'offre.
* **Trust Badge** — Affichez des signaux de confiance tels que des garanties, la sécurité ou des indicateurs de crédibilité.
* **FAQs** — Répondez aux questions courantes des clients pour réduire la friction et augmenter la confiance.

Pour ajouter un widget :

1. Choisissez si vous voulez que le widget apparaisse **au-dessus ou en dessous** du widget Upsell Product
2. Cliquez sur **Add widget** dans la section sélectionnée
3. Sélectionnez et configurez le widget que vous souhaitez inclure

***

Pour en savoir plus sur ce que sont les offres post-achat, comment elles fonctionnent et comment commencer à les utiliser avec Aftersell, consultez [cet article pour plus d'informations](/fr/aftersell/post_purchase_overview).

***

Le comportement et l'apparence des widgets sont limités aux options de configuration disponibles dans l'éditeur.\
Des personnalisations supplémentaires ne sont pas prises en charge en raison des limitations de Shopify.

***

<div id="need-help">
  ## Besoin d'aide ?
</div>

Si vous avez des questions ou besoin d'assistance pour configurer vos offres post-achat, notre équipe d'assistance est là pour vous aider. Vous pouvez nous contacter à tout moment via le chat intégré à l'application ou par e-mail.
