Skip to main content
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.

​
Étape 1 : Activer votre widget dans Aftersell

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, Cart Controls, Rewards, Trust Badges, Testimonials, Notes, Images ou 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 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

​
Étape 2 : Ouvrir l’éditeur de checkout Shopify

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. Accueil de l'interface administrateur Shopify avec le lien Settings mis en évidence pour ouvrir l'éditeur de checkout

​
Étape 3 : Ajouter le bloc d’application à votre checkout

  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 Placements disponibles 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
  5. Cliquez sur Save dans le coin supérieur droit
Éditeur de checkout Shopify avec une flèche pointant vers le bouton Add block dans la barre latérale

​
Étape 4 : Positionner votre widget

  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
Liste des blocs de l'éditeur de checkout Shopify à côté d'un aperçu de checkout en direct affichant les widgets Aftersell

​
Types de widgets et configuration

​
Placements

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.

​
Placements disponibles

  • 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. Éditeur Checkout d'Aftersell montrant le menu déroulant des placements au-dessus de la liste Upsells et de l'aperçu

​
Placer un widget à l’intérieur d’une ligne d’option d’expédition

La plupart des types de widgets de checkout — Upsells, Rewards, Trust badges, Testimonials, Notes, Images et Text — peuvent être placés directement à l’intérieur d’une ligne d’option d’expédition dans le Shopify Checkout Editor. Cart Controls fait exception : il n’a pas de cible d’option d’expédition et ne peut pas être placé dans une ligne. Lorsqu’il est placé là, le widget s’affiche dans la ligne correspondant à la méthode d’expédition que le client a actuellement sélectionnée. Cela vous permet d’attacher une offre ou un message à une méthode d’expédition spécifique — par exemple, en affichant un upsell ou un badge de confiance à l’intérieur de la ligne du tarif d’expédition sélectionné. Comment le configurer :
  1. Configurez et activez votre widget dans l’admin Aftersell comme d’habitude.
  2. Ouvrez le Shopify Checkout Editor.
  3. Cliquez sur Add app block et sélectionnez votre widget Aftersell.
  4. Faites glisser le bloc d’application dans la section Shipping du checkout, en le plaçant à l’intérieur d’une ligne d’option d’expédition.
  5. Sélectionnez le placement correspondant (par exemple, Default placement) dans les paramètres du bloc d’application.
  6. Cliquez sur Save.
Points à garder à l’esprit :
  • Le widget ne s’affiche qu’à l’intérieur de la ligne de la méthode d’expédition que le client a sélectionnée. Il n’apparaît pas simultanément dans chaque ligne.
  • La section d’expédition — et tout widget qui y est placé — ne s’affiche pas pour la collecte locale ou les paniers uniquement numériques.
  • Les widgets d’upsell placés dans une ligne d’option d’expédition peuvent ajouter des produits au panier directement depuis l’intérieur de la ligne.

​
Quand utiliser plusieurs placements

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.

​
Faire correspondre les placements dans l’éditeur de checkout Shopify

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

​
Upsells

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)
  • Automatic upsell(s) : 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 (sélectionnable uniquement une fois que Show rewards bar est activé sur le même widget d’upsell)
  • Strategy : Sélectionnez dynamiquement un produit à l’aide d’un ciblage basé sur des règles. Affiché uniquement sur les boutiques ayant activé les Strategies
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

​
Cart Controls

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 : Show Remove Item Button supprime les produits d’upsell du panier. Un paramètre associé, Allow Removal of Non-Upsell Products (désactivé par défaut), étend le retrait à tout le contenu 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

​
Rewards

Affichez une barre de progression montrant aux clients à quel point ils sont proches d’obtenir une récompense. Options de configuration :
  • Base de récompense : Cart total ou Item count
  • Base du montant (pour Cart total) : Order total (includes shipping and tax), Subtotal (before discounts) ou Subtotal after discounts (excludes tax and shipping)
  • 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 Subtotal after discounts (excludes tax and shipping) 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

​
Trust Badges

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

​
Testimonials

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

​
Notes

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

​
Images

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

​
Text

Insérez une bannière avec du texte personnalisé dans votre checkout. Options de configuration :
  • Container Style : Plain Text (par défaut) ou Badge. Les couleurs de bannière ci-dessous n’apparaissent qu’une fois Badge choisi
  • Banner Type (Badge uniquement) :
    • Info (Blue) : Fond bleu avec icône d’information
    • Success (Green) : Fond vert avec icône de coche
    • Warning (Yellow) : Fond jaune avec icône de triangle d’avertissement
    • Critical (Red) : Fond rouge avec icône de point d’exclamation
  • Taille du texte sur le champ Body (Small ou Base) — le champ Heading n’a pas de contrôle de taille
  • Alignement sur les champs Heading et Body
  • Espacement : None, Extra Tight, Tight, Base, Loose ou Extra Loose
En savoir plus sur le texte

​
Dépannage

​
Les widgets ne s’affichent pas

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

​
Les widgets Shop Pay ne s’affichent pas

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
Barre latérale de l'éditeur de checkout Shopify montrant le bloc d'application Aftersell Upsell Widget sous Main En savoir plus sur les widgets Shop Pay

​
Prochaines étapes