English 中文TürkçeРусскийFrançaisTiếng ViệtEspañol日本語

Configurer les achats

Pour configurer les achats sur un écran, ajoutez un bouton d’achat et configurez son action Purchase. L’action peut cibler un produit spécifique ou le produit que l’utilisateur sélectionne depuis un élément Products sur l’écran.

Reformulez votre tarif en une phrase.

Demandez à l’éditeur IA de décomposer le forfait annuel en coût journalier, de barrer l’ancien prix ou de mettre en avant le meilleur rapport qualité-prix. Il remet en forme les cartes produit de cet écran — jamais votre catalogue ni vos prix.

Explore the AI Editor

Ajouter des produits

Un élément produit est une carte visuelle qui affiche un produit sur le canevas.

Pour ajouter un élément produit :

  1. Sur le canevas, cliquez sur + dans l’écran cible.

  2. Sélectionnez Products.

  3. Choisissez un préréglage de mise en page : liste verticale, liste horizontale, carrousel de fonctionnalités, cartes de fonctionnalités, liste bannière ou feuille inférieure.

    Ajout d'un élément produit sur le canevas

  4. Sélectionnez chaque carte produit et assignez-lui un produit dans la liste déroulante du panneau Design.

Important

Un élément produit sans produit associé bloque la prévisualisation et la publication. Assignez un produit ou supprimez l’élément.

Adding a product element to the canvas

Pour afficher un prix d’ancrage barré sur une carte, ajoutez un élément Ancien Prix à l’intérieur.

Note

Vous pouvez également attacher une action Purchase directement à l’interaction On tap d’une carte produit. Un appui sur la carte déclenche alors l’achat, sans avoir besoin d’un bouton d’achat séparé.

Important

Si vous supprimez un groupe de produits et le remplacez par un nouveau, vérifiez que chaque action et variable cible bien le nouveau groupe. Les références pointant encore vers le groupe supprimé bloquent la prévisualisation et la publication.

Ajouter un bouton d’achat

Un bouton d’achat déclenche une action Purchase lorsque l’utilisateur appuie dessus.

Pour ajouter un bouton d’achat :

  1. Sur le canevas, cliquez sur + dans l’écran.
  2. Sélectionnez Button et choisissez un préréglage de bouton.
  3. Avec le bouton sélectionné, ouvrez l’onglet Interactions dans le panneau de droite.
  4. Cliquez sur Add trigger > On tap, puis cliquez sur Add action.
  5. Définissez Action sur Purchase, puis définissez Product sur l’une des valeurs suivantes :
    • products.selectedProduct : achète le produit que l’utilisateur a sélectionné dans un élément Products de l’écran.
    • Un produit spécifique : achète toujours ce produit, quelle que soit la sélection effectuée sur l’écran.
Ajout d'un bouton d'achat sur le canevas

Afficher le prix sur le bouton

Pour insérer le prix du produit sélectionné dans le libellé du bouton, utilisez une variable :

  1. Avec le bouton sélectionné, ouvrez l’onglet Design dans le panneau de droite.
  2. Dans le champ Content, placez le curseur à l’endroit où le prix doit apparaître.
  3. Cliquez sur l’icône de variable, sélectionnez products.selectedProduct, puis l’attribut prod_price. La variable complète est products.selectedProduct.prod_price.
  4. Ajoutez du texte statique autour de la variable — par exemple, Subscribe for {prod_price}.

Le libellé se met à jour lorsque l’utilisateur sélectionne un produit différent.

Bouton d'achat avec la variable de prix du produit sélectionné dans le libellé

Restaurer les achats

Pour permettre aux utilisateurs de restaurer leurs achats précédents, ajoutez un bouton ou un lien de restauration à l’écran.

Pour ajouter un élément de restauration des achats :

  1. Sur le canvas, cliquez sur + dans l’écran.
  2. Sélectionnez Button, puis choisissez Links pour un lien textuel ou tout autre type de bouton pour un bouton stylisé.
Ajout d'un bouton de restauration sur le canvas
  1. Une fois l’élément sélectionné, ouvrez l’onglet Interactions dans le panneau de droite et cliquez sur Add trigger.
  2. Sélectionnez On tap et cliquez sur Add action.
  3. Dans le menu déroulant Action, sélectionnez Restore purchases.
Action Restore purchases dans l'onglet Interactions

Afficher des éléments supplémentaires selon le produit sélectionné

Si un écran contient des produits, vous pouvez afficher ou masquer d’autres éléments selon le produit choisi par l’utilisateur.

Pour configurer la visibilité conditionnelle :

  1. Dans l’élément Products, sélectionnez une carte produit.
  2. Ouvrez l’onglet Interactions dans le panneau de droite et cliquez sur Add trigger.
Ajout d'un déclencheur à une carte produit
  1. Sélectionnez On tap et cliquez sur Add action.
  2. Dans le menu déroulant Action, sélectionnez Show ou Hide.
  3. Sélectionnez l’élément à afficher ou masquer lorsque ce produit est sélectionné.
Action Show/Hide dans l'onglet Interactions

Modifier le produit sélectionné depuis un autre élément

Les utilisateurs changent normalement de sélection en appuyant sur une fiche produit. Pour déplacer la sélection depuis un autre endroit de l’écran, ajoutez une action Sélectionner un produit et pointez-la vers la fiche produit cible.

Pour configurer l’action :

  1. Sélectionnez l’élément qui doit changer la sélection — un bouton, un interrupteur ou tout autre élément.
  2. Ouvrez l’onglet Interactions dans le panneau de droite et cliquez sur Add trigger.
  3. Sélectionnez le déclencheur et cliquez sur Add action.
  4. Dans le menu déroulant Action, sélectionnez Select product.
  5. Définissez Product sur la carte produit que l’action doit sélectionner.
Action Select product dans la fenêtre Edit action avec le sélecteur Product listant les cartes produit

Cette action fonctionne uniquement avec les fiches produit d’un groupe de produits sur le même écran. Pour sélectionner un produit différent selon le choix de l’utilisateur, encapsulez l’action dans une action conditionnelle.

Examiner les produits dans le flow

Le panneau Products dans la barre latérale gauche associe les produits existants à chaque écran du flow.

Chaque écran comporte deux sections :

  • Default — un produit, présélectionné au chargement de l’écran.
  • Other — produits supplémentaires disponibles sur le même écran.
Panneau Products dans le Flow Builder