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

# Comment configurer les widgets de checkout

> Guide complet étape par étape pour configurer les widgets de checkout dans Aftersell, incluant tous les types de widgets, les options de placement et les bonnes pratiques de conversion pour mobile et ordinateur

Ce guide vous explique comment configurer et placer les widgets de checkout dans Aftersell, de l'activation des widgets à l'optimisation du placement dans Shopify Checkout pour des taux de conversion maximaux..

**Remarque :** Les widgets de checkout ne sont disponibles que pour les marchands Shopify Plus en raison des restrictions de l'API Checkout Extensibility de Shopify.

***

<div id="step-1-enable-your-widget-in-aftersell">
  ## Étape 1 : Activer votre widget dans Aftersell
</div>

Avant d'ajouter des widgets à votre checkout, vous devez les activer dans l'interface administrateur Aftersell.

1. Accédez à l'onglet **Checkout** dans votre interface administrateur Aftersell
2. Sélectionnez le type de widget que vous souhaitez configurer ([Upsells](#upsells), [Cart Controls](#cart-controls), [Rewards,](#rewards) [Trust Badges,](#trust-badges) [Testimonials](#testimonials), [Notes](#notes), [Images](#images) ou [Text](#text))
3. Cliquez sur **Create** pour créer un nouveau widget ou sélectionnez un widget existant à modifier
4. Configurez les paramètres de votre widget (voir [Types de widgets et configuration](#widget-types-and-configuration) ci-dessous)
5. Cliquez sur le bouton **Enable** dans le coin supérieur droit des paramètres du widget
6. Pour les upsells restreints ou avancés, assurez-vous d'activer les déclencheurs personnalisés avant de continuer

***

<div id="step-2-open-the-shopify-checkout-editor">
  ## Étape 2 : Ouvrir l'éditeur de checkout Shopify
</div>

Il existe deux façons d'accéder à l'éditeur de checkout Shopify :

**Option 1 : Depuis l'interface administrateur Shopify**

1. Allez dans **Settings** dans votre interface administrateur Shopify
2. Cliquez sur **Checkout** dans la navigation de gauche
3. Cliquez sur **Customize** à côté du profil de checkout souhaité

**Option 2 : Depuis Aftersell**

1. Cliquez sur le bouton **Open Shopify Checkout Editor** en bas à droite de la page de l'éditeur Checkout d'Aftersell

💡 **Astuce :** L'option 1 vous donne plus de contrôle sur le profil de checkout que vous modifiez. Nous recommandons de tester d'abord sur une version brouillon avant de la mettre en ligne.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-admin-settings-link.gif?s=a182cd42cf41d7b53e5e5765afeb65d9" alt="Accueil de l'interface administrateur Shopify avec le lien Settings mis en évidence pour ouvrir l'éditeur de checkout" width="1844" height="1080" data-path="images/aftersell/checkout-widget-config-admin-settings-link.gif" />

***

<div id="step-3-add-the-app-block-to-your-checkout">
  ## Étape 3 : Ajouter le bloc d'application à votre checkout
</div>

1. Dans l'éditeur de checkout Shopify, cliquez sur **Add app block**
2. Sélectionnez le widget Aftersell souhaité dans la liste des widgets disponibles
3. Choisissez le bon placement pour votre widget (voir [Options de placement](#placements) ci-dessous)
4. Si vous souhaitez que vos widgets s'affichent dans le checkout Shop Pay, cochez l'option [**Include app block in Shop Pay**](/fr/aftersell/show_checkout_widgets_in_shop_pay)
5. Cliquez sur **Save** dans le coin supérieur droit

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-add-app-block-button.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=f6ba0d6ab535b750f8487c408e99ef69" alt="Éditeur de checkout Shopify avec une flèche pointant vers le bouton Add block dans la barre latérale" width="3486" height="1964" data-path="images/aftersell/checkout-widget-install-add-app-block-button.png" />

***

<div id="step-4-position-your-widget">
  ## Étape 4 : Positionner votre widget
</div>

1. Faites glisser-déposer le bloc d'application à l'endroit souhaité dans la zone de placement sélectionnée
2. Cliquez sur **Save** dans le coin supérieur droit

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-drag-app-block.gif?s=7d17314d5e47e74b202e18baf3867e7a" alt="Liste des blocs de l'éditeur de checkout Shopify à côté d'un aperçu de checkout en direct affichant les widgets Aftersell" width="1916" height="1080" data-path="images/aftersell/checkout-widget-install-drag-app-block.gif" />

***

<div id="widget-types-and-configuration">
  ## Types de widgets et configuration
</div>

<div id="placements">
  ## Placements
</div>

Les placements sont créés dans l'éditeur Checkout d'Aftersell et vous permettent de faire fonctionner plusieurs widgets du même type sur la même page de checkout.

Par exemple, si vous souhaitez afficher deux offres d'upsell sur la même page, chacune doit être attribuée à un placement différent.

<div id="available-placements">
  ### Placements disponibles
</div>

* **Default placement** : Le placement principal. Chaque type de widget commence ici.
* **Additional placement 1** : Un second emplacement de placement pour afficher un autre widget du même type sur la même page.
* **Additional placement 2** : Un troisième emplacement de placement pour une séparation supplémentaire.

Vous pouvez également créer de nouveaux placements directement depuis le menu déroulant des placements dans Aftersell en sélectionnant **+ Add new placement**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-placement-dropdown.gif?s=e43a141a2b6db37cb17ed0fcb1e2f8ef" alt="Éditeur Checkout d'Aftersell montrant le menu déroulant des placements au-dessus de la liste Upsells et de l'aperçu" width="1912" height="1080" data-path="images/aftersell/checkout-widget-config-placement-dropdown.gif" />

***

<div id="when-to-use-multiple-placements">
  ### Quand utiliser plusieurs placements
</div>

Utilisez plusieurs placements lorsque vous souhaitez :

* Afficher plus d'un widget du même type sur une seule page de checkout
* Afficher des widgets dans différentes sections de la page
* Cibler différentes audiences avec différentes offres
* Faire fonctionner des widgets avec des déclencheurs similaires ou qui se chevauchent

Aftersell utilise un système de priorité. Vous ne pouvez pas faire fonctionner plusieurs widgets avec des déclencheurs identiques au sein du même placement. Si deux widgets partagent les mêmes conditions de déclenchement dans un placement, un seul s'affichera selon la priorité.

Pour utiliser des déclencheurs similaires, attribuez chaque widget à un placement différent afin qu'ils puissent fonctionner indépendamment sans conflit.

***

<div id="matching-placements-in-the-shopify-checkout-editor">
  ## Faire correspondre les placements dans l'éditeur de checkout Shopify
</div>

Chaque placement dans Aftersell correspond à un bloc d'application distinct dans l'éditeur de checkout Shopify. Le placement sélectionné dans Shopify doit correspondre au placement défini dans Aftersell.

Par exemple, si un widget est attribué à **Additional placement 1** dans Aftersell, le bloc d'application dans Shopify doit également être défini sur **Additional placement 1**.

Si les placements ne correspondent pas, le widget peut ne pas apparaître ou s'afficher au mauvais endroit.

**Important :** Une incohérence de placement est l'une des raisons les plus courantes pour lesquelles un widget ne s'affiche pas. Si un widget n'apparaît pas, confirmez que le placement correspond à la fois dans Aftersell et dans Shopify avant de poursuivre le dépannage.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-block-placement-dropdown.gif?s=b9fc5f328cbf3bf04a63cfbdde505cb4" alt="Paramètres du bloc Upsell Widget de l'éditeur de checkout Shopify avec le menu déroulant Placement défini sur un placement supplémentaire" width="2192" height="1080" data-path="images/aftersell/checkout-widget-config-block-placement-dropdown.gif" />

***

<div id="upsells">
  ### Upsells
</div>

Proposez des produits aux clients pendant le checkout pour augmenter votre valeur moyenne de commande (AOV).

**Options de configuration :**

**Modes de widget :**

* **Single Product Upsell :** Affichez un produit avec un bouton Add to Cart
* **Multi-Product Upsell :** Affichez plusieurs produits dans une disposition en pile ou en carrousel, permettant aux clients d'accepter plusieurs offres
* **Checkmark Upsell :** Affichez un seul produit avec une case à cocher au lieu d'un bouton Add to Cart (idéal pour les ajouts à faible coût comme la protection d'expédition)

**Méthodes de sélection de produits :**

* **Specific Products :** Sélectionnez manuellement les produits individuels à proposer en upsell
* **Collection :** Sélectionnez une collection et affichez jusqu'à 5 produits aléatoires (les produits déjà dans le panier sont automatiquement exclus)
* **AI Recommendations :** Recommandez automatiquement des produits en fonction du contenu du panier
* **Most Expensive Product :** Proposez automatiquement en upsell le produit le plus cher du panier
* **Spend Threshold :** Recommandez des produits qui aident les clients à atteindre les seuils de récompense (nécessite une barre de récompenses)

**Fonctionnalités supplémentaires :**

* Ajoutez des remises directement dans le widget
* Verrouillez les plans d'abonnement sur des options spécifiques
* Affichez les étoiles d'avis produits (nécessite une application d'avis compatible)
* Définissez un nombre maximum d'offres acceptées par widget (types Single et Multi upsell uniquement)

[En savoir plus sur les widgets d'upsell](/fr/aftersell/checkout_widget_types#upsells)

***

<div id="cart-controls">
  ### Cart Controls
</div>

Permettez aux clients de modifier leur panier directement sur la page de checkout.

**Contrôles disponibles :**

* **Variant selector :** Changer pour une autre variante en stock
* **Quantity selector :** Ajuster les quantités de produits
* **Remove item :** Supprimer des produits d'upsell du panier
* **Subscription selector :** Changer la fréquence d'abonnement
* **Subscription upgrade :** Passer des achats ponctuels à des abonnements
* **Custom text :** Ajouter du texte personnalisé sous les lignes d'articles

**Ciblage des produits :**

* Appliquer à tous les produits du panier
* Appliquer uniquement aux produits sélectionnés
* Appliquer à tous les produits sauf ceux sélectionnés

**Fonctionnalités supplémentaires :**

* Afficher les étoiles d'avis produits pour les produits du panier

[En savoir plus sur les contrôles du panier](/fr/aftersell/checkout_widget_types#cart-controls)

***

<div id="rewards">
  ### Rewards
</div>

Affichez une barre de progression montrant aux clients à quel point ils sont proches d'obtenir une récompense.

**Options de configuration :**

* Type d'objectif : Order Value ou Item Count
* Base du montant (pour les objectifs Order Value) : Order total, Subtotal ou Post-discount subtotal
* Message et style de la récompense
* Couleurs et design de la barre de progression

**Bonnes pratiques :**

* Associez-la à des widgets d'upsell pour aider les clients à atteindre les seuils de récompense
* Utilisez le type de produit spend threshold dans les upsells pour recommander automatiquement des produits qui comblent l'écart
* Créez des récompenses dans Shopify à l'aide des Automatic Discounts (pour les récompenses de remise) ou des Shipping Rules (pour la livraison gratuite)
* Utilisez **Post-discount subtotal** comme base du montant lorsque vous offrez la livraison gratuite, afin que la barre corresponde à l'évaluation du seuil par Shopify lorsque des codes de réduction sont appliqués

[En savoir plus sur les récompenses](/fr/aftersell/checkout_widget_types#rewards)

***

<div id="trust-badges">
  ### Trust Badges
</div>

Instaurez la confiance avec des icônes et du texte personnalisés pour augmenter les taux de conversion au checkout.

**Options de configuration :**

* Disposition des badges : Pile verticale ou affichage horizontal
* Icônes et texte personnalisés pour chaque badge
* Options de style et d'espacement

**Bonnes pratiques :**

* Mettez en avant les fonctionnalités de sécurité (checkout sécurisé, chiffrement SSL)
* Présentez les garanties (garantie de remboursement, retours gratuits)
* Affichez les avantages d'expédition (livraison gratuite, livraison rapide)

[En savoir plus sur les badges de confiance](/fr/aftersell/checkout_widget_types#trust-badges)

***

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

Affichez des avis clients directement au checkout pour instaurer la confiance.

**Options de configuration :**

* **Flex Testimonials (recommandé) :** Récupère automatiquement de vrais avis depuis votre application d'avis (Judge.me, Klaviyo, Okendo ou Yotpo)
* Mode de sélection : Manual (choisir des avis spécifiques) ou Dynamic (récupérer automatiquement les avis en fonction du contenu du panier)
* Type d'affichage : Carrousel horizontal ou pile verticale
* Filtre de note minimale

**Prérequis de configuration :**

* Configurez les identifiants de l'application d'avis dans Settings > Product Reviews
* Les avis se synchronisent automatiquement sous 24 heures, puis chaque semaine

[En savoir plus sur les témoignages](/fr/aftersell/checkout_widget_types#testimonials)

***

<div id="notes">
  ### Notes
</div>

Permettez aux clients d'ajouter des notes à leur commande.

**Options de configuration :**

* Notes manuelles : Champ de texte libre pour la saisie du client
* Notes pré-rédigées : Cases à cocher pour des options comme l'emballage cadeau ou l'emballage écologique

[En savoir plus sur les notes](/fr/aftersell/checkout_widget_types#notes)

***

<div id="images">
  ### Images
</div>

Téléversez et affichez des images personnalisées dans votre checkout.

**Options de configuration :**

* Téléversement d'image
* Curseur d'ajustement de la largeur
* Aucune exigence de taille minimale

[En savoir plus sur les images](/fr/aftersell/checkout_widget_types#images)

***

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

Insérez une bannière avec du texte personnalisé dans votre checkout.

**Options de configuration :**

* Quatre styles de bannière :
  * **Information :** Fond bleu avec icône d'information
  * **Success :** Fond vert avec icône de coche
  * **Critical :** Fond rouge avec icône de point d'exclamation
  * **Warning :** Fond jaune avec icône de triangle d'avertissement
* Ajustements de la taille de l'en-tête, de la taille du contenu et de l'espacement

[En savoir plus sur le texte](/fr/aftersell/checkout_widget_types#text)

***

<div id="troubleshooting">
  ## Dépannage
</div>

<div id="widgets-not-displaying">
  ### Les widgets ne s'affichent pas
</div>

Si vos widgets ne s'affichent pas après la configuration :

1. Vérifiez que le widget est activé dans l'interface administrateur Aftersell
2. Vérifiez que le bloc d'application est ajouté dans l'éditeur de checkout Shopify
3. Confirmez que le bloc d'application est enregistré dans l'éditeur de checkout Shopify
4. Vérifiez que le bon placement est sélectionné. Lors de l'ajout d'un bloc d'application dans l'éditeur de checkout Shopify, vous devez choisir le placement correspondant, tel que Default placement, Additional placement 1 ou Additional placement 2. Si le mauvais placement est sélectionné, le widget peut ne pas apparaître ou s'afficher au mauvais endroit. Supprimez le bloc d'application et rajoutez-le, en vous assurant que le placement prévu est sélectionné.
5. Pour Shop Pay : Vérifiez que « Include app block in Shop Pay » est coché
6. Videz le cache du navigateur ou essayez le mode incognito
7. Attendez quelques minutes que les modifications se propagent

<div id="shop-pay-widgets-not-showing">
  ### Les widgets Shop Pay ne s'affichent pas
</div>

Pour afficher les widgets dans le checkout Shop Pay :

1. Ouvrez le widget dans l'éditeur de checkout Shopify
2. Cochez l'option **Include app block in Shop Pay** sous Checkout behaviour
3. Enregistrez vos modifications

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif?s=63de90b2b7e5807806e2390316de688d" alt="Barre latérale de l'éditeur de checkout Shopify montrant le bloc d'application Aftersell Upsell Widget sous Main" width="1416" height="1080" data-path="images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif" />

[En savoir plus sur les widgets Shop Pay](/fr/aftersell/show_checkout_widgets_in_shop_pay)

***

<div id="next-steps">
  ## Prochaines étapes
</div>

* [Découvrez les déclencheurs de checkout](/fr/aftersell/checkout_triggers) pour afficher des widgets de manière conditionnelle
* [Configurez les tests A/B de checkout](/fr/aftersell/checkout_a_b_testing) pour optimiser les placements
* [Configurez le branding du checkout](/fr/aftersell/checkout_branding_settings) pour correspondre au design de votre boutique
* [Explorez des stratégies d'upsell avancées](/fr/aftersell/best_practices) pour maximiser l'AOV