This template uses conditional text to highlight different feature lists for different plans. The screen shows two products — for example, Pro and Pro+ — and a different feature list appears depending on which product the user has selected. One product is marked as the default, so its conditional text is visible when the screen first loads.

Before you start

• Create products in the Adapty Dashboard.
• Connect Adapty to the App Store and Google Play.

1. Set up the screen layout

The screen acts as a container for everything you add. In this example, the background is an image, but a solid color or gradient works the same way.

For the full list of screen properties, see Screens and layers — Screen settings.

To configure the screen:

1. Click an empty area of the canvas to select the screen.
2. Under System UI, disable Safe area so the background extends to the screen edges.
3. Under Fill, choose a background type and configure it. This example uses an Image Image, but a solid color or a gradient works the same way.
4. Under Layout, set the direction to Vertical Vertical and configure the gap and alignment so the elements stack from the top with the content filling the remaining space.

2. Add the close button

The close button dismisses the paywall. The Close preset comes preconfigured — no action setup is required.

1. On the canvas, click +.
2. Select Buttons > Close.

3. Add the title and pair it with the close button

The heading sits next to the close button at the top of the screen. To align them horizontally, wrap both in a horizontal stack.

To add the title:

1. Click + > Text > H1.
2. With the H1 selected, open the Design tab and edit the text in the Content field.

To group the title with the close button:

1. In the Layers panel, click the three-dot menu Context menu on the close button layer and choose Wrap > Wrap in Horizontal Stack.

2. Drag the H1 layer into the new horizontal stack.

To align the two elements:

1. Adjust the close button size and the H1 font size so they sit comfortably on the same line.
2. With the horizontal stack selected, set the alignment and distribution in the right panel so the elements line up correctly.

4. Add the product list

Add the products the user can choose between. Mark one as the default so the screen has a meaningful state when it first loads.

For more on managing products, see Set up purchases.

To add and configure products:

1. Click + > Products and choose a layout preset. Vertical List works well for this template.
2. Select each product card on the canvas and pick a product from the dropdown in the Design tab.
3. Select the card you want selected by default — for example, Pro+ — and enable Set as default product in the Design tab.

5. Add the feature list for the first product

The first feature list describes the default product. It’s visible only when the user has the first product selected.

For more on conditional visibility, see Conditional visibility.

To add and configure the feature list:

1. Click + > List and choose a compact list preset. Icon List works well for paywalls.
2. With each row selected, edit the title in the Content field to describe the first product’s features.
3. With the list still selected, open the Design tab. Under Visibility, select Conditional Conditional.
4. Set up the condition so the list shows only when the first product is the currently selected one. Match against the products.selectedProduct.prod_title variable. For the Value, click the variable icon {}, pick the first product card, then pick its prod_title attribute — the comparison resolves to that product’s title.

6. Add the feature list for the second product

Repeat the same approach for the second product. The two lists are mutually exclusive — only one is visible at a time, based on which product is selected.

To add the second feature list:

1. Click + > List and choose the same compact preset for visual consistency.
2. Edit each row to describe the second product’s features.
3. Under Visibility, select Conditional Conditional and set up the same condition as in step 5, but point the Value variable picker at the second product card’s prod_title.

7. Add the purchase button

The purchase button starts the in-app purchase for whichever product the user has selected. Its label uses the selected product’s price, so it updates as the user switches between plans.

For more on the Purchase action, see Actions — Purchase.

To add and configure the purchase button:

1. Click + > Buttons and choose a button preset.
2. With the button selected, open the Design tab and place the cursor in the Content field. Click the variable icon , pick products.selectedProduct, then pick the prod_price attribute — the full variable resolves to products.selectedProduct.prod_price. Surround it with the rest of the label — for example, Subscribe for {prod_price}.

3. Switch to the Interactions tab and click Add trigger > On tap > Add action.
4. Set Action to Purchase and Product to products.selectedProduct.

8. Add the footer links

Terms of use, privacy policy, and restore purchases sit below the main content.

To add the footer links:

1. Click + > Buttons > Links. This adds a row with Restore Purchases, Terms of Use, and Privacy Policy at the end of the layer tree.
2. Select the Terms of Use link, open the Interactions tab, and paste your terms URL into the Open URL field.
3. Repeat for the Privacy Policy link with your privacy URL.
4. Leave the Restore Purchases link as is. Its action is preconfigured.

Next steps

• Save and publish your flow.
• Add the flow to a placement to start showing it to users.