Paywall Components and Features

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.

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.

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 →

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.

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.

Some paywall templates include a Purchase Button, a button that triggers the purchase process for 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.

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.

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.

Card

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

Free Trial Toggle

Coming Soon

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.

📘

Product Group Toggle is available on our Business plans and above.

Trial Timeline

A timeline element that contains events explaining the trial process.

📘

Trial Timeline is available on our paid plans.

Embedded Video

Coming Soon to Paid Plans

A looping video asset shown on the paywall.

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

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 ➡