Properties Reference

This guide lists all available property types, explains how they work, and shows which components support them. Use it as a universal reference when customizing screens or troubleshooting layout behavior.

Property Overview

Property	Description	Supported Components
Action	Defines what happens when a component is tapped or clicked.	Button, Container, Product, Badge, Icon
Typography	Sets font family, size, weight, color, decorations, spacing, case and alignment for text elements.	Heading, Text, Button, all container-based components
Alignment	Controls how child components are aligned within a parent container. Direction depends on parent layout.	All components
Position	Defines element positioning (Static, Relative, Absolute, Fixed, Sticky).	All components except for Badge
Layout (Direction)	Sets stacking direction (Vertical ↓ or Horizontal →).	All container-based components
Distribution	Defines spacing logic between child elements (Start, Center, End, Space Between, Space Around, Evenly).	All container-based components
Wrap	Toggles whether children wrap to a new line.	All container-based components
Gap	Sets consistent spacing between child components.	All container-based components
Size (Width / Height)	Controls sizing: Fill, Fit Content, Auto, or Fixed values.	All components
Max / Min Size	Restricts maximum or minimum width and height.	All components
Spacing (Margin / Padding)	Defines internal (padding) and external (margin) spacing.	All container-based components
Background	Adds solid color, gradient, or image backgrounds.	All components
Border	Controls border width, color, and corner radius.	All components
Shadow	Adds soft elevation shadows for depth.	All components
Selected State	Provides alternate styling when an element is selected (used with Select Product action).	Container, Product (with assigned action Select Product)
Visibility, Opacity, Radius	Toggles whether a component is visible or hidden on screen.	All components
Variables	Displays dynamic values such as product prices, durations, or currency.	Text, Heading, and text-containing components (e.g. Badge)

Layout & Position Properties

Property	Description
Direction	Defines how child elements are stacked — vertically or horizontally.
Distribution	Controls alignment within available space (Start, Center, End, Space Between, Space Around, Evenly).
Alignment	Positions child components along the cross-axis (horizontal if layout is vertical, vertical if layout is horizontal).
Wrap	Allows child components to wrap into multiple rows or columns.
Gap	Adds uniform spacing between all direct child elements.
Position	Determines how a component is placed relative to others:- Static – follows normal layout flow

Relative – offsets from default position
Absolute – positioned relative to parent container
Fixed – sticks to screen while scrolling
Sticky – toggles between relative/fixed depending on scroll |

Size & Spacing Properties

These define how big your components appear and how they interact with surrounding elements.

Property	Description
Width / Height	Choose from:- Fill – occupy all available space

Fit Content – match child size
Auto – adapt dynamically
Fixed – set explicit pixel or % value | | Max / Min Width & Height | Define boundaries for responsiveness. | | Margin | External spacing between the component and neighboring elements. | | Padding | Internal spacing between the component’s edges and its content. |

Typography Properties

Text-related styling and variable configuration.

Property	Description
Font Family	Choose from 20 + fonts (System Font, Inter, SF Pro, Roboto, Lato, Poppins, etc.).
Font Size & Weight	Adjust headline or body emphasis.
Text Color	Set color for all text inside the component.
Alignment	Align text left, center, or right.
Variables	Insert dynamic text via macros — for example: products.product_id.price_per_month.

Visual Styling Properties

Used to adjust background, border, and visual depth of your components.

Property	Description
Background	Apply a solid color, gradient, or image fill.
Border	Set border width, color, and corner radius.
Radius	Set border Radius.
Shadow	Add soft drop shadows for elevated appearance.
Opacity	Adjust overall component transparency.

Behavioral Properties

Properties that define interactivity, visibility, and logic.

Property	Description
Action	Defines what happens on tap/click:- Make Purchase

Select Product
Open URL
Go to Page
Go to Screen and more | | Selected State | Available when “Select Product” action is used — customize active visuals (background, border, icons, etc.). | | Visibility | Show / Hide component |

Variables & Dynamic Content

Variables let you display real-time product data in text or buttons. They automatically update when prices, currencies, or trial durations change in the store

Example Variable	Description
products.product_id.price_per_month	Displays the monthly price of a product.
products.product_id.price_per_year	Displays the annual price.
products.product_id.trial_duration	Shows the trial period (e.g., “7 days free”).
products.product_id.currency_symbol	Displays the currency symbol ($, €, £, etc.).

You can use variables inside Text, Heading, or Button labels.

Best Practice Summary

Start with layout: direction, distribution, and gap.
Set spacing early: consistent padding makes responsive scaling predictable.
Style at the container level: use background / border / shadow to visually group sections.
Define actions clearly: combine Select Product + Selected State for interactive paywalls.
Preview across devices: ensure responsive alignment under Safe Area (20 px h, 59 px top, 34 px bottom).

AI Image Generation Variables

Overview

Get Started

Testing

Features

No-Code Builder

Remote Config

Experiments

Platform Resources

Stores Setup

SDK Migration Guides

AI-Ready

API Reference Guide

API Reference Guide v4

Properties Reference

Property Overview

Layout & Position Properties

Size & Spacing Properties

Typography Properties

Visual Styling Properties

Behavioral Properties

Variables & Dynamic Content

Best Practice Summary

​Property Overview

​Layout & Position Properties

​Size & Spacing Properties

​Typography Properties

​Visual Styling Properties

​Behavioral Properties

​Variables & Dynamic Content

​Best Practice Summary

Property Overview

Layout & Position Properties

Size & Spacing Properties

Typography Properties

Visual Styling Properties

Behavioral Properties

Variables & Dynamic Content

Best Practice Summary