The Settings Panel dictates the functionality, data source, and behavior of any selected component on the Canvas. It is the primary interface for connecting your UI to your Flows and data layer.

Data Binding 

The most critical principle in Shipcode is data binding. Nearly every text input field in the Settings and Universal Access Panels is a Data Picker, allowing you to choose between two fundamental data inputs:

Static Value

• Input Example: My Product Title
• Action: Type a literal, hard-coded value (string, number, or boolean).
• Use: Best for simple, unvarying configuration, such as setting a default image link or a temporary label.

FQL (Functional Query Language)

• Input Example: {{ $(Product).title }}
• Action: Wrap an expression in double braces ({{ }}) to bind the property to a dynamic data source (Data Zone, Environment Variable, Flow output).
• Use: This is how you power real-time data display, dynamic functionality, and localization.

The Foundational Properties

Universal Settings are the most common properties you will encounter on most components.

Universal Data Pickers (Core Function & Identity)

These fields accept FQL and define the component's identity, data source, and state.

• Data: Binds the component to an external source of data, typically an array or object from a Data Zone or Flow. (Action: Attach data for repeater components).
• Native ID: A unique ID used for cross-platform debugging and low-level native development. (Action: Provide a non-changing identifier for development tools).
• ID: A unique identifier for the component instance, primarily used for traditional form submission logic. (Action: Provide a name for the input component when retrieving its value).
• Error: A field to bind a dynamic error message. (Action: Use FQL to display validation failures, e.g., "Email is invalid").
• Placeholder: The instructional text displayed inside an input field before a user types. (Action: Guide the user on the expected input).

Universal Toggle Settings

These settings control basic boolean (on/off) component behavior.

• Read only: Prevents the user from modifying the value, but allows the component to display data. (Action: Lock input to display only).
• Blur on Submit: Determines if the soft keyboard should dismiss/hide when the user presses the 'Done' or 'Return' key. (Action: Control keyboard behavior upon form completion).

Slot-Based Conditional Rendering

This mechanism is crucial for building single components that display multiple, conditional views (like tabs or steps).

• Active Slot (on Parent Container, e.g., Data Zone): Sets the current rendering state. (Action: Bind this field to a state variable, e.g., {{ $(State).currentStep }}).
• Slot (on Child Component, e.g., View): Assigns an identifier to the component. (Action: Set this value to match a desired parent Active Slot state, e.g., "step2").

Logic: A child component will only render if its Slot value exactly matches the parent's Active Slot value. If the parent's Active Slot is empty, the system is bypassed, and all children are rendered.

Special Settings: Component-Specific Configuration

These properties are unique to one or a small group of components, defining advanced functionality (e.g., media playback, sizing, or security).

Special Toggle Settings (Binary Features and Platform Behavior)

These manage specialized rules using simple on/off states.

• Dangerously allow scripts (HTML View): Action: Toggle to enable <script> tags within the HTML field to execute (requires extreme caution).
• Open Link in New Tab (Link): Action: Toggle to force the linked URL to open in a new browser tab.
• Safe (Scroll View): Action: Toggle to ensure the content stays within the native device "safe area" boundaries on mobile.
• Muted / Auto Play (Video): Action: Toggle to control the video's initial sound state and automatic playback upon loading.
• Ignore Web View Redirects (Web View): Action: Toggle to prevent the view from loading content if the initial URL redirects to a different domain.

Special Data Pickers (Ranges and Constraints)

These fields accept FQL and control complex boundaries, sizes, or constraints.

• Min/Max Date (Date Input): Action: Select the earliest/latest date allowed for selection.
• Min/Max / Initial Values (Price Slider): Action: Define the absolute range (Min/Max) and the starting positions (Initial Values) for the slider thumbs.
• Rows (Text): Action: Define the maximum number of lines of text to render before truncation occurs.
• Max length (TextInput): Action: Set the maximum number of characters a user is allowed to enter.
• Injection Payload (Web View): Action: Provide a JavaScript string to be executed on the loaded web page.
• Starting Width / Increment Size (ShopifySmartImage): Action: Configure the set of responsive image sizes generated for the browser to choose from.

Special Selectors (Advanced Configurations)

These dropdowns and selectors configure complex behavior relating to input context and platform identity.

• Source Type (Image): Action: Select where the image is retrieved from (URI, Asset Library, or Upload).
• Mode (SelectionGroup): Action: Select whether a user can choose only one item (single) or multiple items (multiple) from the group.
• Auto-complete / Text Content Type (TextInput): Action: Provide hints to the OS/browser about the expected data type (e.g., "Email Address") to enable auto-filling and security features.
• Selected User Agent (Web View): Action: Force the view to identify itself as a Desktop or Mobile browser to the remote server.
• Return Key Type (TextInput): Action: Customize the text displayed on the 'Enter' key of the soft keyboard (e.g., set to "Next" to move focus to the next field).