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.

1000

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.

1000

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 →

1000

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.

1000

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.
1000

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.

1000

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.

1000

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.

1000

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.

1000

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.

1000

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.

1000

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.

1000

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.

1000

An trial timeline with 3 customizable events

Embedded Video

Coming Soon

A looping video asset shown on the paywall.

1000

This paywall features a short silent video clip looping at the top.

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

Coming Soon

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.

1000

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 ➡