Editable Properties
Learn about all the properties that can be edited per component
Nami paywalls have dozens of properties that can be used to make your paywall look exactly like your brand vision.
All Properties
Content
URL
Action
Typography
Styling
Size
Layout
Spacing
Position
Icon
Accessibility
Screenreader Text (will only be added if you turn on Screenreader Text)
Carousel Settings
Settings only apply to Carousel components
Autoplay
Transition Speed
Show Carousel Indicators (dots on the carousel to indicate number of slides and current slide position)
Active Indicator Color (applies only to the active carousel indicator dot)
Inactive Indicator Color (applies to all other active carousel indicator dots)
*Indicates a property that is optional on some components, see below
Optional Properties
Not all properties are available when you create a new component. You can add a property to a component by scrolling to the bottom of the component editor drawer and selecting from the dropdown list.
For example, Margins are optional on most components but Height is only optional on some.
Property Details
In-depth information about how to use specific properties:
Text
The Text Input allows you to add text content to the component.
If you are using the System Font family, you can utilize limited markdown options:
| Styling | Markdown | Output |
|---|---|---|
Italic | Text | |
Bold | Text | |
Bold Italic | Text |
List Bullets
To add content to your bulleted list, enter items into the List Content editor. Each new line is a new list bullet
Action
Action is available on select Button components and allows you to change the action triggered when a user clicks it.
Options:
Close Paywall
Login (see Accounts and Login/Logout)
Restore Purchase
Font Family
Font Family allows you to select a different font for your text.
The Font Picker includes a selection of Google Fonts as well as any Brand Fonts your org has uploaded.
Free plans do not have access to the font picker.
Brand Fonts available on Business plans and up.
System Font
By default, all text uses the System Font.
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.
Font Color
All text elements support a font color. You can also apply transparency to the color.
Link Color
Link Color is a special font color used only on links inside the text.
Link Color currently only available for Legal Text type components.
Alignment
Text components support and can be set to align to the left, center, or right.
Horizontal/Vertical Alignment
Groups and containers support multiple different alignment options so you can control where child content sits both vertically (top, center, bottom) and horizontally (left, center, right)
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 or for identifying features that aren't available unless the user purchases a subscription.
Fill Color
Fill Color is the color applied to a container behind text or other elements. Groups, Buttons, and Text Blocks support Fill Color.
Fill Color can be a solid color, a transparent solid color, or a linear gradient
Roku paywalls don't support gradient fill colors. See Fill Color Fallback below.
Fill Color Fallback
Fill Color Fallback available on TV paywalls only
Fill Color Fallback only applies to Roku paywalls
Fill Color Fallback is required if your CTV paywall is available on Roku platforms AND the Fill Color you chose is a gradient.
Border Color
Border color can be applied to containers such as Groups, Buttons and Text Blocks. Border Color will not be used unless Border Width is greater than 0.
Border Width
Border Width describes the width of the border color applied to a container. Border sits outside the container outside the Padding but inside the Margins.
On mobile devices, we recommend a border width of 5 or less.
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.
Rounded Borders
Rounded Borders allow you to only apply corner radius to some of the component's sides. By default, all corners are rounded but you can edit this to create more complex designs.
If the Corner Radius is 0, Rounded Borders will not appear
Elevation
Elevation (drop shadow) can be applied to buttons and groups. Use Elevation to subtly feature elements and give them dimension.
Width
Width has 3 variants: Fill, Fit, or a fixed number of pixels.
Nami doesn't recommend using fixed width for most elements. Fixed width items may not size well on all devices.
Instead, use Fill to ensure components always grow to the screen size or Fit to size components around their content.
Fit
Fit will size the element to the width of all content inside the component, including the children. It also will include the padding of the component.
Nami recommends using Left and Right Padding when setting width to 'Fit', as this will ensure that there is some space between the edge of the component and its content.
Fill
Fill will expand the component to take up as much width as it can.
If 2 components with width 'Fill' are inside of a group with horizontal Direction, each component will take up 50% of the group width.
Fixed
Do not apply Left or Right Padding to a fixed width component.
How do I make sure all my products are the same width?
Don't use fit content. Instead use Fill to make sure the buttons are the same width and the buttons together take up 100% of their parent.
Or you can use a fixed width button, but this isn't recommended as it won't size well on all devices
Height
Height has 3 variants: Fill, Fit, or a fixed number of pixels.
Be careful using a Fixed height with text items, especially when the text includes Smart Text variables. The text may overflow the container.
Also, if the user has increased font size on their device, the text may not fit anymore.
Fit
Fit will size the element to the height of all content inside the component, including the children. It also will include the padding of the component.
Nami recommends using Top and Bottom Padding when setting height to 'Fit', as this will ensure that there is some space between the edge of the component and its content.
Fill
Fill will expand the component to take up as much height as it can.
If 2 components with height 'Fill' are inside of a group with vertical Direction, each component will take up 50% of the group height.
Fixed
Do not apply Top or Bottom Padding to a fixed height component
Image Crop
Image Crop is used only on image components. It defines how the image should fit inside the constraints of the component.
Fit
Image Crop Fit means the image will fit the space without cropping any of the content. This may leave whitespace on the sides.
Fill
Image Crop Fill means the image will fill the entire space. The image dimensions will be retained but some of the image may be cut off.
Direction
Direction specifies which way the components in a Group should be aligned. Horizontal means the objects will fit side-by-side (also known as column). Vertical means they will be stacked (row)
By default, the Content section has vertical alignment which means each component inside will be stacked on top of each other.
If you want some items in the Content section to be grouped horizontally, add a Group inside the section and set the Direction of that group to Horizontal.
Spacing
Spacing defines how much space exists between elements in a Group.
By default, the Content section has 20 spacing, which means each item inside it will be separated by 20px.
If you want items inside a section to have smaller or larger Spacing, add a Group inside the section and set the Spacing of that group accordingly.
Padding
Each component has 4 padding controls. Padding provides spacing between the items within a component and the outside of the component.
Margins
Each component has 4 optional margin controls. Margins provide space outside a component.
Move X and Y
Certain components such as Containers, Badges or Text Blocks have advanced positioning options.
These components can be moved a specific # of pixels or a specific percentage on the X and Y axis. This positioning allows you to float elements over others.
Z-Index
Containers, Badges, and Text Blocks also have Z-Index controls to move an element in front of others on the paywall. In the example above, the badge has a Z-Index of 1, which allow the badge to sit on top of the product.
Icon
Icon allows you to choose a symbol from the Nami supported list. By default, the 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.
Last updated
