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.
Components
Text
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 paywall with both title and body text.
List
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.

5 list items on a paywall
Image
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 →

The template on the left features a header image at the top. The template on the right features a fullscreen background image.
Icon
A pictogram representing an action or used for organizing information.
Products
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.

2 different layouts of product buttons. Both sets have a product badge
Action Buttons
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.

Sign In and Restore options at the foot of a paywall
Some paywall templates include a Purchase Button, a button that triggers the purchase process for the Selected product.

A paywall with a Purchase button. When tapped, it will purchase the selected product
Legal Terms
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.

Legal text at the bottom of a paywall
Sticky Footer
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 sticky footer with products and purchase button
Carousel
A dynamic collection of slides the user can swipe through on your paywall. Slides can contain text, images, or both.
Carousel is available on our paid plans.

A paywall with a carousel
Card
A container element that sits on top of the background and contains products, text, or buttons. Used to visually group information.

The gradient card on this paywall holds the text, products, and list.
Free Trial Toggle
Coming Soon
A switch that triggers a free trial offer on the product.

A free trial toggle option that changes the purchase button text and selected 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.
Product Group Toggle is available on our Business plans and above.

The toggle at the top changes the product menu to match the tier
Trial Timeline
A timeline element that contains events explaining the trial process.
Trial Timeline is available on our paid plans.

An trial timeline with 3 customizable events
Embedded Video
Coming Soon to Paid Plans
A looping video asset shown on the paywall.

This paywall features a short silent video clip looping at the top.
Multipage
Coming soon to Paid Plans
Support a multi-screen paywall flow.
Styles and Attributes
Components have styleable attributes attached to them. The supported styles will differ by component and template.
Color
Nearly all components, including text, background, button, have editable color. Some components support gradient colors or opacity.
Learn more about editing Paywall Colors →
Border
Components such as buttons include borders. Borders have color and width.
Corner Radius
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.
Alignment
Text elements often include alignment and can be set to align to the left, center, or right.
Font
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 →
Font Size
All text elements have customizable font size. We recommend font sizes between 10 and 40 for best display on all mobile phone devices.
List Icon
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.
Strikethrough
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.
Elevation
Buttons support shadow elevation. Set the shadow color as well as X, Y, and Blur attributes.
Dark Mode
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.
Dark Mode is available for our paid plans

Setting light and dark mode colors for a button
Fullscreen
iOS Only
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.

Templates
Nami has dozens of paywall templates available.

See a list of all Paywall Templates and their supported components ➡
Updated 13 days ago