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:
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.
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:
Select a blank site:
Type a name for your site and click Create site:
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:
At the top of the editor, you'll see some buttons that adjust the size of the page for different types of devices:
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:
With the container selected, in the Style panel on the right, set Max W to 430px, and set left and right padding to 20:
You'll add all new elements to this container view, dividing your paywall up into 5 sections:
- A close button.
- A title.
- A checklist of benefits to your premium service.
- A price and purchase 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:
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:
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:
Then drag and drop it into your div. Your view should look like this:
With the image selected, in the Style tab set all margin edges to 12.5px, and its Width and Height to 15px:
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:
Then, in the Element Settings, press the + button and enter the Name as data-pw-close and the Value as 1 and hit Save:
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:
You'll see this layout in the Navigator:
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:
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:
Your webpage now looks like this:
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:
From the Style tab, under Selector rename its class name to Title. You Navigator should look like this:
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:
Inside the section, add a Div Block:
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:
Set Display to Flex, and make sure Direction is set to Horizontal:
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:
Save the following image to your computer:
Then, drag and drop it inside your checkmark-container div and set its Width to 20px. Your Navigator will look like this:
Next, add another Text Block inside list-item to the right of your checkmark-container:
Set its Sizing to Grow if possible and set its top and bottom margin to 10px:
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:
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:
Now copy and paste list-item two more times:
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:
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:
Next, add a Link Block to the section and set its left and right margin to 10:
For the restore button, add the data tag data-pw-restore with value 1:
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:
Then, set its Width to 100%, its Position to Fixed and its left, right and bottom position to 0px:
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:
At this point, your Navigator should look like this:
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:
Set its Weight to 700 - Bold, its Size to 1.2rem and Align to Center:
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:
Your paywall should look like this:
A paywall is useless without a purchase button, so add a Button below your text:
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:
Set its Font Weight to 700 - Bold, Size to 1.2rem, Align to Center, and give it a Radius of 20px:
Attach a Custom Attribute to the button setting the Name to data-pw-purchase and Value to primary and click Save:
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:
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:
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.
Updated 4 months ago