Paywall Components and Features
Learn about the building block components that make up paywall templates
The Nami Paywall Creator uses components as building blocks to construct paywalls. Each template has a different collection of component building blocks.
The Text component is used to add Title or Body text to a paywall.
Text has editable alignment, font color, font size, and support for basic markdown. Some plans and templates support Google fonts or custom brand fonts.
A stack of text items. Some lists include an icon to the left of the text item.
Lists have multiple items that can be added, typically 1-5 items.
List text items typically have editable font color and font size. Font color is also applied to the list icon.
A PNG or JPEG image element.
Some templates support fullscreen background images, while others have smaller image containers at the top or side.
Some templates support logo images.
Learn more about Paywall Images →
A pictogram representing an action or used for organizing information.
These are your in-app purchases. Each one is a button that starts the purchase process. Each paywall must include at least one purchase product.
Paywall templates typically restrict the number of product buttons available.
Each Product has a number of Display text fields attached that can be used to display information about the product.
Some fields can have Smart Text variables inserted.
Depending on the template, some fields support Featured Styling (applied with the Featured switch is toggled on for the product), and/or Selected styling (applied when the user selects a product to purchase)
Some template include product badges, elements that are attached to 1 or more products to draw the user's eye.
All paywall templates include a Close button, an optional Sign In button, and an optional Restore button.
- Close Button: A button that exits the paywall. Either a text link or an icon
- Sign in Button: A button that opens your built-in Sign In logic.
- Restore Button: A button that triggers the platform Restore Purchases flow. This button is not required, but is strongly encouraged for Apple users.
Some paywall templates include a Purchase Button, a button that triggers the purchase process for the Selected product.
A text field you can use to explain any legal terms on your paywall. This field is not required, but encouraged.
Most purchase platforms require these documents are linked somewhere in your app but do not usually require that they are on the paywall itself.
A special region of the paywall that sits on top of any scrolling content on the paywall. Can be used for pinning purchase buttons or legal content.
A dynamic collection of slides the user can swipe through on your paywall. Slides can contain text, images, or both.
A container element that sits on top of the background and contains products, text, or buttons. Used to visually group information.
Free Trial Toggle
A switch that triggers a free trial offer on the product.
Product Group Toggle
A switch that selects a different group of products for purchase, typically either a different tier or a different duration. Useful for paywalls with more than 3 products.
A timeline element that contains events explaining the trial process.
A looping video asset shown on the paywall.
Styles and Attributes
Components have styleable attributes attached to them. The supported styles will differ by component and template.
Nearly all components, including text, background, button, have editable color. Some components support gradient colors or opacity.
Learn more about editing Paywall Colors →
Components such as buttons include borders. Borders have color and width.
Components such as buttons or sticky footers include a corner radius. Set to 0 for a 90° angle or set to a higher value to round the element.
Text elements often include alignment and can be set to align to the left, center, or right.
By default, text elements will render in the fullscreen previewer with Helvetica. On iOS devices, the default font is SF Pro and on Android devices, the default font is Roboto.
However, some templates support custom fonts, either from Google Fonts or from a custom upload (brand font uploads supported on Enterprise plans).
Learn more about Custom Fonts on your Paywall →
All text elements have customizable font size. We recommend font sizes between 10 and 40 for best display on all mobile phone devices.
List components with icons support an icon picker. By default, our icon is a checkmark inside a circle, but we support a select list of other icons.
Note that the icon in the previewer will differ slightly from the device display. The previewer uses Ant Icons, while Android devices use Material Symbols and iOS devices use SFSymbols.
Some text components support strikethrough text applied. If set, the text will be crossed out with a line in the same color as the text element. This is useful for displaying price decreases.
Buttons support shadow elevation. Set the shadow color as well as X, Y, and Blur attributes.
Some paywall templates support customizable colors for paywalls in Dark Mode. For each component, set the Light and Dark Mode color palette to effortlessly optimize your paywall for all screen modes.
On iOS devices, the default paywall sheet is a modal that has a rounded top edge and leaves some space at the top. Paywalls now support the option to be displayed fullscreen, or to the top edge of the phone.
Nami has dozens of paywall templates available.
See a list of all Paywall Templates and their supported components ➡
Updated 27 days ago