> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.qonversion.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Create a Paywall

Let's create the following no-code in-app paywall:

<img src="https://mintcdn.com/qonversion/xaw1i1aL_6Lp0sQh/images/docs/7cfad3b-Frame_1000001755.png?fit=max&auto=format&n=xaw1i1aL_6Lp0sQh&q=85&s=9da312272627e8ba9116a932678ecddf" alt="" width="2000" height="1576" data-path="images/docs/7cfad3b-Frame_1000001755.png" />

## 1. Provide the screen name

1. Navigate to the **Remote Config** section of Qonversion's Dashboard
2. Select the **Screens** tab and click **Create**

<img src="https://mintcdn.com/qonversion/ChZZw2lNh4YCkg0e/images/docs/c36a75d-Screens.png?fit=max&auto=format&n=ChZZw2lNh4YCkg0e&q=85&s=7581c3dae88adb6bb386d4061aec0606" alt="" width="3440" height="1684" data-path="images/docs/c36a75d-Screens.png" />

3. Provide the screen name

<img src="https://mintcdn.com/qonversion/-M3mkakSa01J8jKU/images/docs/4bb5319-Screenshot_2023-01-22_at_20.50.18.png?fit=max&auto=format&n=-M3mkakSa01J8jKU&q=85&s=b5548cac79bc7d52dcf0e5f83feacc23" alt="" width="2492" height="1676" data-path="images/docs/4bb5319-Screenshot_2023-01-22_at_20.50.18.png" />

## 2. Set background color and choose localisations you support

1. Click the background field and choose or insert your colour code. It's *#5352ED* in the case below.

<img src="https://mintcdn.com/qonversion/VTmQeWlObtMNi7PY/images/docs/8ed8a66-Screenshot_2023-01-22_at_21.57.28.png?fit=max&auto=format&n=VTmQeWlObtMNi7PY&q=85&s=8c107ce6a79d98d50195f2b1983a9bdc" alt="" width="2488" height="1672" data-path="images/docs/8ed8a66-Screenshot_2023-01-22_at_21.57.28.png" />

2. Choose localisations you support. You need to fill in corresponding text values further.
   * Our SDKs parse the default devices' locales and choose either the matching value or the default one.

<img src="https://mintcdn.com/qonversion/zdjn3kzNygqtFGgE/images/docs/a052bc2-Screenshot_2023-01-22_at_21.58.20.png?fit=max&auto=format&n=zdjn3kzNygqtFGgE&q=85&s=5482f903568fcff4033ea3391a36b86e" alt="" width="2500" height="1676" data-path="images/docs/a052bc2-Screenshot_2023-01-22_at_21.58.20.png" />

<img src="https://mintcdn.com/qonversion/bWelyT5Klw3olUpZ/images/docs/2148754-Screenshot_2023-01-22_at_21.58.48.png?fit=max&auto=format&n=bWelyT5Klw3olUpZ&q=85&s=7a1244af552294d25e3a67f745b2d81d" alt="" width="2490" height="1670" data-path="images/docs/2148754-Screenshot_2023-01-22_at_21.58.48.png" />

## 3. Create the UI

Let's start with *Restore* and *Close* buttons

1. Add a Button by clicking on the **+ Button** label. By default, elements use the entire screen's width with small side margins.

<img src="https://mintcdn.com/qonversion/zdjn3kzNygqtFGgE/images/docs/a61e959-Screenshot_2023-01-22_at_22.07.45.png?fit=max&auto=format&n=zdjn3kzNygqtFGgE&q=85&s=3f12d9a879c44dcf19c5564ef6cf8c3a" alt="" width="2486" height="1702" data-path="images/docs/a61e959-Screenshot_2023-01-22_at_22.07.45.png" />

2. Adjust button properties and set the <a href="/docs/actions#7-restore" target="_blank" rel="noopener">Restore</a> action
   * You can copy created element, delete it, scale or move using actions from the context menu

<img src="https://mintcdn.com/qonversion/VTmQeWlObtMNi7PY/images/docs/867099e-Screenshot_2023-01-23_at_16.37.48.png?fit=max&auto=format&n=VTmQeWlObtMNi7PY&q=85&s=3421e9c5166786c9604090fd7061a1d7" alt="" width="2486" height="1662" data-path="images/docs/867099e-Screenshot_2023-01-23_at_16.37.48.png" />

3. After adding the Close button, Title, Image and Text, let's proceed to purchase buttons:
   * To automatically get localised subscription prices, use the *Regular price* option from the menu
   * To have subscription prices available, add your in-app products to the <a href="/docs/products" target="_blank" rel="noopener">Qonversion Dashboard</a>
   * Do not forget to configure <a href="/docs/permissions" target="_blank" rel="noopener">entitlements</a> in case you use Qonversion in <a href="/docs/subscription-management-mode" target="_blank" rel="noopener">Subscription Management Mode</a>.

<img src="https://mintcdn.com/qonversion/ct6M8m2naVCA4pc4/images/docs/16437f4-Screenshot_2023-01-23_at_17.58.29.png?fit=max&auto=format&n=ct6M8m2naVCA4pc4&q=85&s=8bde1481e6410a460d9b45a1d9b025b3" alt="" width="2462" height="1626" data-path="images/docs/16437f4-Screenshot_2023-01-23_at_17.58.29.png" />

4. Link the subscription start button with the <a href="/docs/actions#3-make-a-purchase" target="_blank" rel="noopener">Make a purchase</a> action

<img src="https://mintcdn.com/qonversion/bWelyT5Klw3olUpZ/images/docs/3950bac-Screenshot_2023-01-23_at_18.01.07.png?fit=max&auto=format&n=bWelyT5Klw3olUpZ&q=85&s=9a936b207b352719a9497a59aabc0ca7" alt="" width="2464" height="1710" data-path="images/docs/3950bac-Screenshot_2023-01-23_at_18.01.07.png" />

5. Add the monthly subscription purchase button and Terms of use link.\
   That's it, the paywall is ready. Congratulations!

<img src="https://mintcdn.com/qonversion/VTmQeWlObtMNi7PY/images/docs/9662537-Screenshot_2023-01-23_at_18.14.51.png?fit=max&auto=format&n=VTmQeWlObtMNi7PY&q=85&s=4abb2806268d4194071501c0cf9f5bbd" alt="" width="2212" height="1668" data-path="images/docs/9662537-Screenshot_2023-01-23_at_18.14.51.png" />
