---
title: "Add conditional text to a paywall"
description: "Use conditional text to swap feature lists based on which product the user selects."
---

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](create-product) in the Adapty Dashboard.
- [Connect Adapty to the App Store and Google Play](integrate-payments).

## 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](paywall-layout-and-products#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](paywall-product-block).

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](onboarding-element-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](onboarding-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 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](builder-save-publish).
- [Add the flow to a placement](create-placement) to start showing it to users.