---
title: "Build a paywall with a trial toggle"
description: "Switch a paywall between products with and without a free trial, and keep the selected product in step with the toggle."
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skill. Claude Code (self-updating via plugin): `claude plugin marketplace add adaptyteam/adapty-skills && claude plugin install adapty-skills@adapty` — other tools: `npx skills add adaptyteam/adapty-skills --all`

A trial toggle allows you to switch a paywall between products with a free trial and products without one. But the toggle itself is only a switch: on or off. You write the rules that show the right cards, and the rules that change which product is selected.

This recipe shows you how to set these rules and build a fully working toggle-enabled paywall.

<DocVideo id="paywall-trial-toggle-demo.mp4" width="300px" alt="The finished paywall: flipping the trial toggle swaps both product cards to their trial versions and changes the button label from Purchase to Start your free trial" />

## Before you start

- Build a paywall screen — for example, follow the [Create a basic paywall screen](basic-paywall-screen) recipe.
- [Create your products](create-product) and [add the trial offer to them](create-offer).

:::important
If you want to make the trial optional (which is necessary to use the trial toggle), do not create an introductory offer. On iOS, introductory offers apply **automatically** to every eligible user. You cannot turn them off. Use a promotional offer instead. See [How Adapty works with offers](create-offer#how-adapty-works-with-offers).
:::

## 1. Add the product cards

1. Click the Add Element menu **+** > **Paywall & Commerce** > **Products** and choose a preset.
2. Select a card — on the canvas or in the **Layers** panel. Assign a product to the card, and leave **Select offer (optional)** empty.
3. Repeat for each plan you sell — one card per plan, without the trial.
4. Duplicate every card. On each copy, pick the trial offer from **Select offer (optional)**.

Each plan now has two cards that point at the same product — one with the offer, and one without.

## 2. Add the trial toggle

1. Click **+** > **Paywall & Commerce** > **Trial Toggle**.

2. Ensure the toggle belongs to a selectable group of the correct type. Click an empty area of the canvas to open **Screen settings**. Under **Selectable groups**, open `trial_toggle`, set **Group Type** to **Toggle**, and click **Save**. The dialog displays the variable we'll use to detect if the toggle is on: `trial_toggle.isActive`.

3. Edit the toggle's label.

Leave the toggle off by default. A pre-selected trial toggle risks App Store rejection as a dark pattern — see [Toggles](builder-toggles).

## 3. Show the right cards for each toggle state

On the **Design** tab of each card, under **Visibility**, select **Conditional** and build its condition:

| Card | Condition |
|---|---|
| With the trial | `trial_toggle.isActive` **Equals** **True** |
| Without the trial | `trial_toggle.isActive` **Equals** **False** |

## 4. Select a visible card when the toggle changes

The cards now change with the toggle, but the selected product doesn't. A card that becomes invisible stays selected, and the **Purchase** action still targets it — so a user who enables the trial can still be charged.

Add a **Conditional Action** to the toggle, so that it resets the selection to a visible card on every tap.

1. In the **Layers** panel, select the **Trial toggle** container.
2. Open the **Interactions** tab, add the **On tap** trigger, and a **Conditional Action**:

    | Block | What to configure |
    |---|---|
    | **if** | `trial_toggle.isActive` **Equals** **True** |
    | **then** | **Select Product**, pointing at a card with the trial |
    | **else** | **Select Product**, pointing at the same product without the trial |

## 5. Update the button label

The call to action should read differently once the trial is on.

1. Select the button's text element.
2. On the **Design** tab, under **Content**, select **Conditional** and click **Edit conditions**.
3. Fill the blocks:

    | Block | What to configure |
    |---|---|
    | **if** | `trial_toggle.isActive` **Equals** **True** |
    | **then** | The trial label, such as `Start your free trial` |
    | **else** | The standard label, such as `Purchase` |

For more on conditional text, see [Add conditional text](onboarding-text#add-conditional-text).