Tabs are useful for adding responsive, tabbed content to your paywall. For example, you can use tabs to display multiple, selectable products, each with their own purchase button.
You'll see an example of a typical product tab design in our clonable Webflow project:
You're welcome to copy this into your own Webflow project and adapt it as you see fit. However, if you'd like to create one from scratch, open the Add Elements pane in the top left:
Scroll down to the Components section and drag the Tabs element on to your view:
You'll see a basic tab view like this:
In the Navigator pane, you'll see the layout of your tabs element:
This consists of a Tabs Menu and a Tabs Content group. The Tabs Menu contains your selectable tabs, which represent your products. The Tabs Content contains the content for each tab that's displayed when the tab is selected. Every time a user clicks a tab, its corresponding content will show.
You'll want to turn off animations when a user switches between tabs. To do this, select the Tabs Menu and click the cog wheel in the top right to open the Element Settings panel. Then set Fade in and Fade out to 0:
You can also set the active tab here to manually switch between tabs to view their content.
Next, in each tab add a button. You can drag and drop this from the Add Elements pane:
Your user will use these buttons to purchase a product. There should be a button in each Tab Pane:
For each button, add a Data Tag to indicate to Superwall that it's a purchase button. To do this, select the button and click the cog wheel in the top right to open the Element Settings panel. Then under Custom Attributes press the + button. Here, add the data tag
data-pw-purchase with its corresponding value (
tertiary) and click Save:
The tab view is now set up for Superwall. From here, it's a case of designing and positioning the tabs to suit your needs!
To learn more, check out webflow's documentation about Tab views →.
Updated 8 months ago