Ajouter et styliser du texte et des listes dans le Flow Builder

Ajoutez des titres, paragraphes ou listes en un seul clic, stylisez-les aux couleurs de votre marque, et utilisez des variables dynamiques pour personnaliser le contenu pour chaque utilisateur.

Configurer les styles de texte

Le panneau Styles inclut des styles de texte préconfigurés : H1, H2, H3, Button Label, Body, Caption et Small Label. Cliquez sur n’importe quel style pour modifier sa famille de polices, son poids, sa taille, son alignement, sa décoration et d’autres propriétés.

Lorsque vous ajoutez un élément texte, vous pouvez choisir parmi les styles que vous avez configurés ici.

Pour créer un nouveau style :

1. Cliquez sur pour ouvrir le panneau Styles.
2. Dans l’onglet Text, cliquez sur Create style.

3. Saisissez un nom et configurez la typographie — famille de police, graisse, alignement et autres propriétés.

   Les polices personnalisées se comportent différemment des polices intégrées. Lisez le guide — certains contrôles ne s’appliquent pas et chaque variante de police nécessite son propre fichier.

   

4. Cliquez sur Create.

Ajouter du texte

Pour ajouter un élément texte :

1. Cliquez sur + en haut à gauche. Sélectionnez Text. Choisissez l’un des styles de texte préconfigurés ou définis par vous.

2. Cliquez sur le nouvel élément et modifiez son contenu dans la section Content du panneau Design à droite.
3. Si nécessaire, ajustez les propriétés typographiques dans le panneau Design. Ou sélectionnez le texte dans l’aperçu pour ouvrir une infobulle de personnalisation rapide du style.
4. Optionnellement, dans les panneaux Design et Interaction, vous pouvez également appliquer d’autres configurations disponibles pour les composants du flow. Pour plus de détails, voir Styles et apparence.

Modifier le style d’une partie du texte

Pour modifier le style d’une partie seulement d’un élément texte :

1. Sélectionnez une partie d’un élément texte dans la section Content.
2. Dans l’infobulle qui apparaît, modifiez la couleur du texte, appliquez une mise en forme gras, souligné, italique ou barré, ou ajoutez une URL.

L’aperçu se met à jour immédiatement.

Ajouter un ancien prix

L’élément Ancien Prix affiche un prix « de référence » gonflé à côté du vrai prix d’un produit, pour que la réduction soit visible d’un coup d’œil. Il multiplie le prix du produit par un coefficient que vous choisissez et le barre automatiquement.

Vous n’éditez pas le contenu de l’élément. La valeur est calculée à partir du prix en store du produit au moment de l’exécution, donc la devise correspond toujours au vrai prix.

Pour ajouter un ancien prix :

1. Cliquez sur + en haut à gauche. Sélectionnez Text, puis Old Price.

2. Dans le panneau Layers, faites glisser l’élément à l’intérieur d’une carte produit. L’élément fonctionne également à l’intérieur des cartes produit enregistrées en tant que composants réutilisables.

   L’élément Old Price doit se trouver à l’intérieur d’une carte produit — le prix est extrait du produit de cette carte. En dehors d’une carte produit, le builder affiche un espace réservé « Old price » à la place du prix.

3. Dans le panneau Design, dans la section Price, définissez le Multiplier. Adapty multiplie le prix du produit par cette valeur. Par exemple, avec le multiplicateur par défaut de 2, un produit à 12,99 $ affiche 25,98 $ barré.

   

4. Si nécessaire, ajustez les propriétés typographiques. L’élément prend en charge le même style que le texte ordinaire.

Propriétés typographiques

Chaque élément de texte et chaque style de texte partagent les mêmes contrôles typographiques :

• Font family : Choisissez une police — une police intégrée ou une police personnalisée.

  Les appareils n’incluent pas tous les mêmes polices, et peuvent afficher la même police différemment. Si la police n’est pas présente sur l’appareil, le système utilisera une police par défaut (SF Pro / Roboto). Pour afficher la même police de manière cohérente sur tous les appareils, importez une police personnalisée.

• Weight : Définissez la graisse de la police.

• Size : Définissez la taille de la police en pixels.
• Color : Définissez la couleur du texte.
• Line height : Définissez l’espacement entre les lignes, ou laissez sur Auto.
• Alignment : Définissez l’alignement horizontal (gauche, centré, droite) et vertical (haut, milieu, bas).
• Decoration : Appliquez un soulignement ou un barré.
• Truncate : Limitez le nombre de lignes affichées. Le texte au-delà de cette limite est tronqué. Utile lorsque la longueur du contenu varie en raison de variables dynamiques ou de la localisation.

Ajouter des liens

Les flows proposent deux façons de transformer du texte en lien cliquable. Choisissez selon le rôle du texte :

• Lien inline — pour une URL dans du texte courant, comme une référence « En savoir plus » intégrée dans un paragraphe. S’ouvre toujours dans le navigateur intégré.
• une action Open URL — pour des éléments cliquables autonomes, comme un bouton Conditions d’utilisation. Peut s’ouvrir dans le navigateur intégré ou le navigateur externe.

Lien intégré

Pour transformer une partie d’un élément texte en lien :

1. Sélectionnez le texte dans la section Content.
2. Dans l’infobulle de mise en forme, cliquez sur l’icône de lien.
3. Collez l’URL de destination dans la fenêtre contextuelle.

Action Ouvrir une URL

Pour transformer un bouton entier en lien :

1. Ajoutez un Bouton — ou utilisez le preset Links, une rangée toute prête avec les boutons Restore / Terms of Service / Privacy Policy.

   

2. Sélectionnez le bouton dans le panneau Layers et ouvrez l’onglet Interactions dans le panneau de droite.

3. Définissez la destination pour l’action Open URL.

   Une action Open URL vide bloque la prévisualisation et la publication.

   

Ajouter du texte conditionnel

Le texte conditionnel modifie ce qu’affiche un élément de texte selon une condition. Par exemple, un titre peut afficher un message quand l’utilisateur sélectionne le forfait annuel, et un autre message pour le forfait mensuel. Le texte conditionnel fonctionne comme la visibilité conditionnelle, mais il permute le contenu au lieu d’afficher ou de masquer l’élément.

Pour configurer un texte conditionnel :

1. Sélectionnez un élément de texte sur le canevas.
2. Dans le panneau Design, dans la section Content, sélectionnez Conditional.

3. Construisez la condition if. Choisissez une propriété dans l’onglet Custom, Products ou Elements, définissez l’opérateur et saisissez la valeur à comparer. Pour plus de détails sur les types de propriétés, consultez Visibilité conditionnelle.
4. Dans then, saisissez le texte à afficher lorsque la condition est vraie. La mise en forme du texte enrichi fonctionne de la même façon que pour le texte ordinaire. Pour insérer une variable, cliquez sur { } Add variable.
5. Dans else, saisissez le texte de repli à afficher lorsqu’aucune condition n’est remplie.
6. (Facultatif) Cliquez sur + Add else/if pour ajouter d’autres conditions, chacune avec son propre texte.

Ajouter des listes

1. Cliquez sur + en haut à gauche. Sélectionnez List et choisissez l’un des modèles de liste.

2. Accédez au panneau Design à droite pour modifier les éléments de la liste ou importer une image comme marqueur d’élément.