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