---
title: "Create a basic paywall screen"
description: "Step-by-step guide to building a standard paywall screen in the Flow Builder."
---

This is the most common paywall template. Use it as a standalone screen, or place it at the end of a multi-screen [flow](adapty-flow-builder).

A standard paywall screen contains a heading, a value description, a feature list, a product list, a purchase button, and footer links to restore purchases, terms of use, and privacy policy.

## 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 reusable styles

Reusable styles let you apply the same typography and colors across every screen with a single click. Every new flow ships with a set of default text styles (H1, Body, Button Label, and so on) — adjust them to match your design before you start adding elements. Add color styles for the brand colors you'll use throughout the screen.

For full instructions, see [Element styling — Reusable styles](builder-styling#reusable-styles).

To set up the styles:

1. In the left panel, open the **Styles** Styles panel.
2. On the **Text** tab, click an existing style to edit its font, weight, size, and color. Add new styles only if the defaults don't cover your needs.

3. On the **Colors** tab, click **Plus Create style** and add the colors you plan to reuse across the screen.

## 2. Set up the screen layout

The screen itself acts as a container for everything you add. Configure its layout, background, and padding first so that the elements you add later distribute correctly.

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. The right panel switches to screen settings.
2. Under **System UI**, disable **Safe area** so the content extends to the screen edges.
3. Under **Layout**, set the direction to **Vertical** Vertical and the distribution to **Space evenly**.

4. Under **Fill**, choose a background type — solid color, gradient, or image. This example uses a **Gradient** Gradient with two color stops.

## 3. 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**.

## 4. Add the title and pair it with the close button

The H1 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 in the right panel 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.

## 5. Add the value description

A short body line under the title explains what the user gets from the subscription.

1. Click **+** > **Text** > **Body**.
2. With the body element selected, edit the text in the **Content** field on the **Design** tab.

## 6. Add the feature list

The feature list highlights what unlocking the subscription includes. Each row has an icon, a feature title, and a short description.

For the full set of list presets, see [Elements — List](builder-elements#list).

To add the feature list:

1. Click **+** > **List** and choose a list preset. Icon List is the most common for paywalls.
2. With each row selected, edit the title and description in the **Content** field.
3. To add or remove rows, select the list and use the row controls in the **Layers** panel.

## 7. Add the product list

The product list shows the subscription options the user can choose from. The Products element renders one card per product assigned to the screen, and one card is automatically marked as the default.

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 is the most common.
2. Select each product card on the canvas and pick a product from the dropdown in the **Design** tab. The dropdown shows every product configured in the Adapty Dashboard.
3. To change the default selection, select the card you want and enable **Set as default product** in the **Design** tab.
4. To customize the discount badge, expand a product card in the **Layers** panel, select the badge layer, and edit its text in the **Content** field. Hide the badge on other cards by toggling the eye icon Show next to each badge layer.

## 8. Add the purchase button

The purchase button starts the in-app purchase for whichever product the user has selected. The `products.selectedProduct` variable always resolves to the currently selected product on the screen.

To add the purchase button:

1. Click **+** > **Buttons** and choose a button preset.
2. With the button selected, open the **Interactions** tab in the right panel.
3. Click **Add trigger** > **On tap**, then click **Add action**.
4. Set **Action** to **Purchase** and **Product** to `products.selectedProduct`.

## 9. Add footer links

The footer contains links to terms of use and privacy policy (required by app stores) and a button to restore previous purchases.

To add the footer links:

1. Click **+** > **Buttons** > **Links**. This adds a row with Restore Purchases, Terms of Use, and Privacy Policy.
2. Select the **Terms of Use** link. In the **Interactions** tab, the **Open URL** action is already attached — paste your terms URL into the 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.

:::tip
If any element's positioning feels too high or low, or if you want to add more space anywhere, adjust the element's margins and padding.
:::

## Next steps

- [Save and publish your flow](builder-save-publish).
- [Add the flow to a placement](create-placement) to start showing it to users.