Afficher tous les plans dans une feuille inférieure

Ce template met d’abord en avant une seule offre phare, avec un lien discret vers la liste complète des plans. En appuyant sur Show all plans, une feuille inférieure remonte et affiche les autres produits, un bouton d’achat et les liens du pied de page.

Utilisez-le lorsqu’un plan convertit nettement mieux que les autres — la feuille inférieure garde les alternatives à portée d’un tap sans encombrer l’écran principal.

Avant de commencer

• Créez des produits dans l’Adapty Dashboard.
• Connectez Adapty à l’App Store et Google Play.

1. Configurer la mise en page de l’écran

Utilisez l’image hero comme arrière-plan de l’écran et regroupez le reste du contenu en bas, de sorte que l’image remplisse la partie supérieure de l’écran.

Pour la liste complète des propriétés d’écran, consultez Écrans et calques — Paramètres d’écran.

Pour configurer l’écran :

1. Cliquez sur une zone vide du canevas pour sélectionner l’écran.
2. Sous System UI, désactivez Safe area pour que l’image hero s’étende jusqu’aux bords de l’écran.
3. Sous Fill, choisissez Image et importez votre image hero.
4. Sous Layout, configurez la direction, l’espacement et l’alignement pour ancrer le contenu là où vous le souhaitez. Pour ce template, une direction Vertical avec un petit espacement et un alignement bottom-middle regroupe le titre et les boutons dans la partie inférieure de l’écran.

2. Ajouter le titre CTA

Le titre se trouve dans la partie inférieure de l’écran, juste au-dessus du bouton d’abonnement. L’image hero remplit la zone au-dessus.

1. Cliquez sur + > Text > H1.
2. Avec le H1 sélectionné, ouvrez l’onglet Design et modifiez le texte dans le champ Content.

3. Ajouter la feuille inférieure et son titre

La feuille inférieure est un conteneur de mise en page qui remonte depuis le bas de l’écran. Ajoutez-la visible pour l’instant — vous la remplirez dans les prochaines étapes et la masquerez une fois le contenu en place. Les éléments masqués ne peuvent pas être modifiés, donc la feuille doit rester visible jusqu’à ce que vous ayez fini de la remplir.

Pour en savoir plus sur les feuilles inférieures et autres conteneurs de mise en page, consultez Éléments — Layout.

Pour ajouter la feuille inférieure et son titre :

1. Cliquez sur + > Layout > Bottom Sheet.
2. Dans le panneau Layers, développez la feuille inférieure, sélectionnez le calque Title et modifiez le champ Content dans l’onglet Design — par exemple, Choose your plan.

4. Ajouter la liste de produits dans la feuille inférieure

Placez tous les produits à l’intérieur de la feuille inférieure. L’un d’eux alimentera également le prix affiché sur le bouton CTA principal.

Pour en savoir plus sur la gestion des produits, consultez Configurer les achats.

Pour ajouter et configurer les produits :

1. Cliquez sur + > Products et choisissez un preset de mise en page. La liste verticale convient dans la plupart des cas. L’élément apparaît sur l’écran, en dehors de la feuille inférieure.
2. Dans le panneau Layers, faites glisser le calque Products dans le conteneur Content à l’intérieur de la feuille inférieure.

3. Sélectionnez chaque carte produit sur le canevas et choisissez un produit dans la liste déroulante de l’onglet Design.

5. Ajouter le bouton d’achat dans la feuille inférieure

La feuille inférieure a besoin de son propre bouton d’achat pour acquérir le plan sélectionné par l’utilisateur dans la liste.

1. Cliquez sur + > Buttons et choisissez un preset de bouton.
2. Dans le panneau Layers, faites glisser le nouveau bouton dans le conteneur Content à l’intérieur de la feuille inférieure.

3. Avec le bouton sélectionné, ouvrez l’onglet Interactions dans le panneau de droite.
4. Cliquez sur Add trigger > On tap, puis sur Add action.
5. Définissez Action sur Purchase et Product sur products.selectedProduct.

6. Ajouter les liens du pied de page dans la feuille inférieure

Les conditions d’utilisation, la politique de confidentialité et la restauration des achats se trouvent en bas de la feuille — l’écran principal reste ainsi épuré.

1. Cliquez sur + > Buttons > Links. Cela ajoute une ligne avec Restore Purchases, Terms of Use et Privacy Policy.
2. Dans le panneau Layers, faites glisser la ligne Links dans le conteneur Content à l’intérieur de la feuille inférieure.
3. Dans le panneau Layers, sélectionnez le bouton Terms of Use. Ouvrez l’onglet Interactions et collez l’URL de vos conditions dans le champ Open URL.
4. Répétez l’opération pour le bouton Privacy Policy avec l’URL de votre politique de confidentialité.
5. Laissez le lien Restore Purchases tel quel. Son action est préconfigurée.

7. Masquer la feuille inférieure

Une fois le contenu de la feuille en place, masquez-la pour qu’elle n’apparaisse pas sur l’écran par défaut. Les utilisateurs la révèleront en appuyant sur Show all plans à la dernière étape.

Dans le panneau Layers, sélectionnez la feuille inférieure et définissez son état sur Hide . La feuille reste dans l’arborescence des calques mais ne s’affiche plus sur le canevas.

8. Ajouter le bouton d’abonnement principal

Le bouton principal de l’écran abonne l’utilisateur au plan mensuel en un seul tap. Son libellé utilise la variable de prix du produit mensuel pour que le bouton reste synchronisé avec le produit.

1. Dans le panneau Layers, cliquez sur l’écran pour que les nouveaux éléments s’ajoutent à la racine, et non à l’intérieur de la feuille inférieure.
2. Cliquez sur + > Buttons et choisissez un preset de bouton.
3. Avec le bouton sélectionné, ouvrez l’onglet Design et placez le curseur dans le champ Content. Cliquez sur et choisissez la variable de prix pour le produit principal. Entourez-la avec le reste du libellé — par exemple, Subscribe for {price}/month.

4. Passez à l’onglet Interactions et cliquez sur Add trigger > On tap > Add action.
5. Définissez Action sur Purchase et Product sur le produit souhaité. Contrairement au bouton de la feuille inférieure, celui-ci cible un produit spécifique plutôt que products.selectedProduct.

9. Ajouter le lien « Afficher tous les plans »

Un lien textuel sous le bouton d’abonnement révèle la feuille inférieure au tap. L’ajouter en tant qu’élément texte avec le style Button Label garde un aspect minimaliste tout en vous permettant d’y associer une action.

Pour en savoir plus sur l’action Afficher/Masquer, consultez Actions — Afficher/masquer des éléments.

Pour ajouter le lien :

1. Avec l’écran sélectionné dans le panneau Layers, cliquez sur + > Text > Button Label.
2. Avec l’élément texte sélectionné, modifiez le champ Content pour qu’il affiche Show all plans.
3. Ouvrez l’onglet Interactions et cliquez sur Add trigger > On tap > Add action.
4. Définissez Action sur Show et sélectionnez l’élément feuille inférieure dans la liste déroulante.

Étapes suivantes

• Enregistrez et publiez votre flow.
• Ajoutez le flow à un placement pour commencer à le montrer aux utilisateurs.