Building a Paywall

If you haven't already, explore our clonable Webflow project. This contains example paywall webpages and dozens of common paywall elements for you to copy into your own project.

However, you may want to build a paywall from scratch. In the following tutorial, you'll learn how to build a basic paywall that looks like this:

854854

Along the way you'll learn:

  • How to use Webflow's visual editor.
  • How to add Paywall.js to your website.
  • How to add, position, and edit elements on the page.
  • How to attach data tags to elements.
  • How to publish your webpage for use in the Superwall dashboard.

Creating a New Site in Webflow

🚧

Restricted Webflow features

In the following tutorial you'll need to add custom code to your website. Unfortunately, Webflow restricts this to paid accounts only. However, if you don't have a paid account, you can use our clonable Webflow project. Make sure to delete all visual elements from onscreen to start from a blank slate then skip this section.

On the Webflow dashboard press + New Site:

12791279

Select a blank site:

672672

Type a name for your site and click Create site:

12441244

You'll see a blank site editor. Before you add any elements, remember to add Paywall.js to your website. This acts as an interface between your paywall webpage and the Superwall SDK/dashboard.

Open the Pages panel, select the cog wheel next to the page name, then scroll down to the Custom Code section. In the Inside head tag section, add the following code:

<script async src="https://cdn.superwall.me/runtime/entrypoint.js"></script>

Then hit Save:

18601860

Adding a Container

At the top of the editor, you'll see some buttons that adjust the size of the page for different types of devices:

600600

It defaults to Desktop. Although you're building primarily for mobile devices, you'll want to stay on the Desktop mode. This is because adjustments made in Desktop mode apply to all screen sizes, whereas adjustments made on lower screen size modes don't apply to bigger screen sizes.

It's good practice to create a container of a fixed width that your paywall displays in. To do this, click the Add Elements button, and drag and drop a Container on to the main view:

582582

With the container selected, in the Style panel on the right, set Max W to 430px, and set left and right padding to 20:

478478

You'll add all new elements to this container view, dividing your paywall up into 5 sections:

  1. A close button.
  2. A title.
  3. A checklist of benefits to your premium service.
  4. Terms & conditions, privacy policy and a restore button.
  5. A price and purchase button.

Adding a Close Button

In your first paywall section, you'll add a close button. To add a new section, click the Add Elements tab, and drag and drop a new Section element into your container view:

20142014

Sections are elements with 100% container width and are good for dividing your paywall into meaningful segments.

With the section selected, in the Style tab, set Display to Flex, and Justify to End:

476476

This will position elements inside the section on the right hand side. Next, from the Add Elements tab, drag and drop a Div Block element into your section. Save the following image to your computer:

120120

Then drag and drop it into your div. Your view should look like this:

26042604

With the image selected, in the Style tab set all margin edges to 12.5px, and its Width and Height to 15px:

476476

You've now got a close button on your paywall. To make this work with Superwall, you'll need to attach a data tag. Select the enclosing div:

348348

Then, in the Element Settings, press the + button and enter the Name as data-pw-close and the Value as 1 and hit Save:

480480

When presented in your app, the SDK will now correctly recognise this as a close button!

To keep things legible, select your section and in the Style tab, under Selector, click on its class name and rename it to Close Button Section:

476476

You'll see this layout in the Navigator:

416416

Adding a Title

The next thing you'll add is a title. Drag and drop a new section element below your close button, then drag a Text Block element into the section:

412412

Double click your text and replace it with Unlock Premium. In the Style tab, set the top and bottom margin to 25px. Set the Font to Oswald, and the Size to 2.5rem:

474474

Your webpage now looks like this:

10241024

Whenever you add important text to your paywall, such as the title, you should always attach a data tag to it. That way it can be remotely configured on the Superwall dashboard and you can run A/B tests of paywalls containing different copy.

To do this, in the Element Settings, add a Custom Attribute, setting its Name to data-pw-var, and its Value to Title:

480480

From the Style tab, under Selector rename its class name to Title. You Navigator should look like this:

348348

Adding Benefits

Every paywall needs to have a list of benefits that the user will get by purchasing a subscription. To do this, you'll add a checklist of three dummy items. You'll create and style one item on the checklist and then you can duplicate it and change the text for the other items.

First add a new Section below the title section. Give it a top and bottom padding of 40:

474474

Inside the section, add a Div Block:

566566

You'll use this as an item row in your checklist. With the div block selected, open the Style tab. Under Selector, rename its class name to list-item:

482482

Set Display to Flex, and make sure Direction is set to Horizontal:

480480

Now, add another div block inside your list-item div block. This will act as a container for your check mark icon. Set its class name to checkmark-container, Display to Flex, Direction to Horizontal, Align to Top, and Justify to Left:

476476

Save the following image to your computer:

20482048

Then, drag and drop it inside your checkmark-container div and set its Width to 20px. Your Navigator will look like this:

570570

Next, add another Text Block inside list-item to the right of your checkmark-container:

560560

Set its Sizing to Grow if possible and set its top and bottom margin to 10px:

474474

Replace the text in the text block with Cancel anytime in seconds. Lets add a line to see what wrapping looks like.. Your view now looks like this:

978978

To make this text configurable on the Superwall dashboard you'll need to add a data tag. Add a Custom Attribute with Name data-pw-var and Value Checklist Row 1 and hit Save:

468468

Now copy and paste list-item two more times:

568568

Replace the text of the second list-item with Tons of incredible features and the text of the third list-item with Payment protection policy. Obviously when you customise your paywall for your own products, you'll want to use much better copy!

With the section selected, rename its class name to Benefits in the Style tab.

Your webpage will look like this:

17621762

Adding Links

In accordance with Apple's guidelines, you'll need to provide a link to your Terms & Conditions and Privacy Policy. You'll also need a restore button to restore purchases that may have been previously made.

Add a new section below the benefits section. Rename its class to Links, set its Display to Flex, Direction to Horizontal, Justify to Center and top and bottom margin to 20px:

478478

Next, add a Link Block to the section and set its left and right margin to 10:

472472

Inside the link block, add a Text Block. Replace its text with Terms & Conditions. Duplicate the link block twice and replace the text of the second block with Privacy Policy and the third with Restore Purchases. Your view should look like this:

17541754

To open links inside your app, you'll need to add the data tag data-pw-open-url. Select Terms & Conditions and add an attribute with Name data-pw-open-url and Value https://superwall.com. When customising this for production, you'll need to change this to your own terms & conditions URL. Do the same for the Privacy Policy text block:

476476

For the restore button, add the data tag data-pw-restore with value 1:

474474

Adding a Purchase Button

For this paywall, you'll have a purchase button that floats at the bottom of the screen.

To do this, add a new section below the links section. Rename its class to Footer, set Display to Flex, Direction to Vertical, and Align to Center:

472472

Then, set its Width to 100%, its Position to Fixed and its left, right and bottom position to 0px:

480480

This will stretch across the whole of the page, rather than staying contained in our outer most container. Therefore, you'll need to add another constraining div block inside your section. To do this, drag and drop a Div Block inside your Footer section. Then set its Width to 100%, and its Max W to 430px:

474474

At this point, your Navigator should look like this:

574574

In this paywall you'll have one product. You'll display the price of the product above the purchase button. Therefore, add a Text Block inside the div block you just created.

Replace its text with Only $0.00/month. Then in the Style tab, set its bottom margin to 20px:

476476

Set its Weight to 700 - Bold, its Size to 1.2rem and Align to Center:

480480

You'll need to configure this with real product data on the Superwall dashboard, so add a Custom Attribute to the text block setting the Name to data-pw-var and Value to Product Price and click Save:

470470

Your paywall should look like this:

872872

A paywall is useless without a purchase button, so add a Button below your text:

580580

Set its Display to Block, and give it a bottom margin of 40px, left and right margin of 20px, top and bottom padding of 22px, and a left and right padding of 44px:

476476

Set its Font Weight to 700 - Bold, Size to 1.2rem, Align to Center, and give it a Radius of 20px:

476476

Attach a Custom Attribute to the button setting the Name to data-pw-purchase and Value to primary and click Save:

476476

This will link your purchase button to the primary product that you add to the Superwall dashboard.

You've now built your very first paywall! Click Publish in the top right, and select Publish to Selected Domains:

598598

Visit the link to view your new paywall. This will open in desktop mode, but you can follow the steps here to preview the view in your browser as a mobile device:

13641364

You can now configure the paywall in the Superwall Dashboard just by copying and pasting the link of your webpage!

Now that you know the basics of creating a paywall in Webflow, you can adjust and customise the design of the paywall to suit your app and needs.

We recommend checking out Webflow's university, which contains detailed explanations of everything you need to know about designing with Webflow. Also, don't forget to check out our clonable Webflow project, which gives you common elements and designs that you can copy and paste into your paywall.


Did this page help you?