Paywall Layout
Understanding the layout of each paywall
Last updated
Understanding the layout of each paywall
Last updated
Each paywall has 4 main sections:
This section lives behind all the other content. You can put images or colors in this group.
This section is fixed at the top of the paywall. It is often used for organizing the close button or your app logo.
Header cannot be removed but you don't have to put any content in it
The main content of your paywall. The content container can scroll or fit onto the screen. Text, products, images, carousels, and other components will live here.
An optional component that is fixed to the bottom of the paywall above the content container. Use the footer when you have a long paywall to keep purchase buttons or legal text in view.
These components can be inserted into the background:
The paywall header is a fixed element that lives at the very top of your paywall.
Typically, close buttons are put in the header so they are always available.
These components can be inserted into the header:
Make sure your header is tall enough to fit all the content. Nami recommends a height of at least 40
Use the Safe Area margin to avoid cutting off your header content
The Content section is the main area of your paywall. Most content will live here.
By default, the Content section is organized as a Vertical direction group with 20pt spacing, and 20pt left and right padding.
These components can be inserted into the Content:
The Footer is optional and should be used for content that should always be "above the fold". Avoid putting all your content here - limit to 1 or 2 components.
By default, the Footer section is organized as a Vertical direction group with 15pt spacing, and 20pt left and right padding. It has a background color and an optional drop shadow.
These components can be inserted into the Footer:
(recommended)
