---
title: "Create a paywall with tabs"
description: "Build a paywall screen with two tabs that switch between different feature lists, product groups, and purchase actions."
---

This template uses tabs to switch between two variants of the same offer on a single screen. Each tab contains its own feature list, product list, and purchase button. Tapping a tab swaps the visible content without leaving the screen — useful for splitting plans by tier, billing period, or audience segment.

## 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 the close button, heading, tabs, and tab content. 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 tab 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 tabs and configure their labels

The Tabs element splits a screen section into switchable content panels. Each tab gets its own content container that appears when the user selects that tab.

For more on the Tabs element, see [Elements — Tabs](builder-elements#tabs). For more on selectable groups, see [Selectable elements and groups](flow-selectable-elements).

To add the tabs:

1. Click **+** > **Tabs** and choose a preset — Segment control, Button Tabs, or Underline.
2. With each tab's name selected on the canvas or in the **Layers** panel, edit the **Content** field on the **Design** tab to change the label — for example, `Premium` and `Pro`.

## 5. Add a feature list to the first tab

A short, compact feature list inside the first tab tells users what that plan includes.

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 compact for paywalls. The element appears at the end of the layer tree.
2. With each row selected, edit the title in the **Content** field.

3. In the **Layers** panel, drag the list into the first tab's **Content** container.

## 6. Add the product list to the first tab

The product list shows the subscription options for the first tab. The Products element renders one card per product assigned to the screen and creates its own selectable group.

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 stacked plans. The element appears at the end of the layer tree.
2. Select each product card on the canvas and pick a product from the dropdown in the **Design** tab.

3. In the **Layers** panel, drag the Products layer into the first tab's **Content** container.

## 7. Add the purchase button to the first tab

The purchase button starts the in-app purchase for whichever product the user has selected inside the first tab. Its label uses the selected product's price so it stays in sync with the user's choice.

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. The element appears at the end of the layer tree.
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`.

5. In the **Layers** panel, drag the button into the first tab's **Content** container.

## 8. Copy the first tab's content into the second tab

Rather than rebuilding the same structure from scratch, copy the feature list, product list, and purchase button from the first tab into the second tab. You'll only need to update the values afterwards.

To copy the content:

1. In the **Layers** panel, expand the first tab's **Content** container.
2. Select each element inside it (feature list, products, purchase button), copy it with ⌘C / Ctrl+C, and paste it with ⌘V / Ctrl+V. The copies appear at the end of the layer tree.
3. Drag each copied element into the second tab's **Content** container.

## 9. Update the second tab's content

The second tab now mirrors the first one. Update each element so it reflects the second plan.

To update the second tab:

1. Edit the feature list inside the second tab so the rows match the second plan's features.
2. Select each product card in the second tab's Products element and assign the second plan's products from the dropdown. This Products element automatically becomes a separate selectable group (`products2`).
3. Select the purchase button in the second tab. In the **Design** tab's **Content** field, change the price variable from `products.selectedProduct.prod_price` to `products2.selectedProduct.prod_price`.
4. Switch to the **Interactions** tab and update the **Purchase** action's **Product** from `products.selectedProduct` to `products2.selectedProduct`.

## 10. Add the shared footer links

Terms of use, privacy policy, and restore purchases stay visible regardless of which tab is active. Add them at the screen level — outside both tab content containers — so they're shared between the tabs.

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, which is where you want it — at the root of the screen, not nested inside a tab.
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.