Configurer les achats

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

Ajouter des produits

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

Pour ajouter un élément de produit :

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

2. Sélectionnez Products.

3. Choisissez une disposition prédéfinie : liste verticale, liste horizontale, carrousel de fonctionnalités, cartes de fonctionnalités, liste en bannière ou feuille du bas.

   

4. Sélectionnez chaque carte de produit et assignez-lui un produit dans le menu déroulant du panneau Design.

   Un élément de produit sans produit associé bloque l’aperçu et la publication. Assignez un produit ou supprimez l’élément.

   

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

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 + sur l’écran.
2. Sélectionnez Button et choisissez un style de bouton prédéfini.
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 options suivantes :
   • products.selectedProduct : achète le produit que l’utilisateur a sélectionné depuis un élément Products sur l’écran.
   • Un produit spécifique : achète toujours ce produit, quelle que soit la sélection sur l’écran.

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 devient 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 différents produits.

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 canevas, cliquez sur + sur l’écran.
2. Sélectionnez Button, puis choisissez Links pour un lien textuel ou tout autre type de bouton pour un bouton stylisé.

3. Avec l’élément sélectionné, ouvrez l’onglet Interactions dans le panneau de droite et cliquez sur Add trigger.
4. Sélectionnez On tap et cliquez sur Add action.
5. Dans le menu déroulant Action, sélectionnez Restore purchases.

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 que l’utilisateur sélectionne.

Pour configurer la visibilité conditionnelle :

1. Dans l’élément Products, sélectionnez une carte de produit.
2. Ouvrez l’onglet Interactions dans le panneau de droite et cliquez sur Add trigger.

3. Sélectionnez On tap et cliquez sur Add action.
4. Dans le menu déroulant Action, sélectionnez Show ou Hide.
5. Sélectionnez l’élément à afficher ou masquer lorsque ce produit est sélectionné.

Consulter les produits dans le flow

Le panneau Products dans la barre latérale gauche répertorie les produits existants pour 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.