This appendix defines every editable property available in the Settings Panel.

Classification of Settings Properties

Every setting is classified into one of three functional types:

1. Data Picker/Input Field: Properties that accept static or FQL data (Text fields, Calendar inputs, range inputs).
2. Toggle: Properties that are simple binary (on/off) switches.
3. Selector/Dropdown: Properties that rely on a predefined list of options (Flow triggers, dropdown menus, source types).

Alphabetical Property Definitions

A

• Active Slot
• • Classification: Data Picker/Input Field
  • Definition: On a container component, this value determines which child component with a matching Slot value is currently rendered for conditional display.
  • Use Case: Use FQL to bind to a Flow state to dynamically control which step of a form is visible.
• Asset ID
• • Classification: Data Picker/Input Field
  • Definition: The unique identifier for a Shopify image asset.
  • Use Case: Providing the unique ID retrieved from the Shopify admin to connect the correct image.
• Auto Capitalize
• • Classification: Selector/Dropdown
  • Definition: Configures the automatic capitalization behavior of the soft keyboard (Sentences, Characters, None, Words).
  • Use Case: Setting to Words for a name field to automatically capitalize the first letter of every word the user types.
• Auto Focus
• • Classification: Toggle
  • Definition: When enabled, the input field automatically becomes active and ready for typing when the Layout loads.
  • Use Case: Enabling this on a search bar so the user can immediately start typing when they navigate to the search screen.
• Auto Play
• • Classification: Toggle
  • Definition: Determines if the video should begin playing automatically upon rendering.
  • Use Case: Enabling for a background video loop on a landing page.
• Auto-complete
• • Classification: Selector/Dropdown
  • Definition: Provides hints to the OS/browser on what kind of data is expected (e.g., Email, Username) to enable automatic form filling.
  • Use Case: Selecting Username to allow the user's browser to suggest their saved username.
• Autocorrect
• • Classification: Toggle
  • Definition: Enables or disables the device's predictive text and spell-checking while typing.
  • Use Case: Disabling this for a technical input field (like a URL) where autocorrect suggestions would be harmful.

B

• Base
• • Classification: Data Picker/Input Field
  • Definition: The total number of rating units (e.g., 5 stars) for the component.
  • Use Case: Setting to 5 to define a standard 5-star rating scale.
• Blur on Submit
• • Classification: Toggle
  • Definition: Determines if the soft keyboard should dismiss/hide when the user presses the 'Done' or 'Return' key.
  • Use Case: Enabling this for the final text input in a form to automatically hide the keyboard upon completion.

C

• Caret hidden
• • Classification: Toggle
  • Definition: Hides the blinking cursor within the input field.
  • Use Case: Disabling the cursor for components that display data but should not appear editable.
• Context menu hidden
• • Classification: Toggle
  • Definition: Disables the native menu that appears on long-press (e.g., copy, paste, select all).
  • Use Case: Disabling this in specialized inputs where copy/paste functionality is not permitted or desired.
• Controls
• • Classification: Toggle
  • Definition: Shows or hides the native video playback controls (pause, volume, timeline).
  • Use Case: Disabling the controls when the video is intended as a background element.

D

• Dangerously allow scripts
• • Classification: Toggle
  • Definition: Security Waiver: Allows <script> tags within the HTML field to execute. Use with extreme caution.
  • Use Case: Enabling this to embed a custom, trusted third-party widget (e.g., a chat client) that requires JavaScript.
• Data
• • Classification: Data Picker/Input Field
  • Definition: Binds the component to an external source of data, typically an array or object from a Data Zone or Flow.
  • Use Case: Binding to {{ $(ProductsZone).items }} to populate a repeater component like List or Grid.
• Data zone type
• • Classification: Selector/Dropdown
  • Definition: Defines whether the Data Zone is simple (None) or used to initialize a new data store (Create New Data Zone).
  • Use Case: Selecting Create New Data Zone to define a local data structure (like a shopping cart) for the component and its children.
• Default Selection
• • Classification: Data Picker/Input Field
  • Definition: The index of the option that is selected when the component first renders (-1 means nothing is selected).
  • Use Case: Setting to 0 to automatically pre-select the first option in a dropdown list.
• Default Value
• • Classification: Data Picker/Input Field
  • Definition: The initial value displayed in the input field before user interaction or data binding occurs.
  • Use Case: Setting the default quantity in an input field to 1.
• Domain White List
• • Classification: Data Picker/Input Field
  • Definition: A list of allowed domains; the Web View will only load content from URLs matching this list.
  • Use Case: Providing a list of trusted payment processor domains for a secure checkout process.

E

• Error
• • Classification: Data Picker/Input Field
  • Definition: A field used to bind a dynamic error message.
  • Use Case: Using FQL to display an API validation message next to a form field.

F

• Fullscreen
• • Classification: Toggle
  • Definition: Allows the user to enter fullscreen video playback mode.
  • Use Case: Enabling this for a streaming media application.

H

• Hide Dropdown Arrow
• • Classification: Toggle
  • Definition: Removes the visual indicator (arrow) that signals the component is a dropdown menu.
  • Use Case: Disabling the arrow for custom-styled selection fields.
• HTML
• • Classification: Data Picker/Input Field
  • Definition: The raw HTML content to be rendered inside the view.
  • Use Case: Pasting a block of content from an external CMS into the component.

I

• ID
• • Classification: Data Picker/Input Field
  • Definition: A unique identifier for the component instance, primarily used for traditional form submission logic.
  • Use Case: Giving an input field the ID "emailInput" so its value can be referenced precisely in a Flow.
• Ignore Web View Redirects
• • Classification: Toggle
  • Definition: If enabled, the Web View will stop loading content if the initial Target URL redirects to a different domain.
  • Use Case: Ensuring a secure connection remains on the original, intended domain.
• Increment Size
• • Classification: Data Picker/Input Field
  • Definition: The increase in image width between each item created in the responsive source set.
  • Use Case: Setting this to 200 to generate source images that are 200px, 400px, 600px wide, and so on.
• Initial Max Value / Initial Min Value
• • Classification: Data Picker/Input Field
  • Definition: Sets the starting position for the maximum (right) and minimum (left) slider thumbs.
  • Use Case: Setting the default initial range of a price slider from $200 to $800.
• Input Mode
• • Classification: Selector/Dropdown
  • Definition: Suggests the type of soft keyboard the device should display to the user (e.g., Numeric, Email).
  • Use Case: Selecting Numeric for a quantity field to automatically bring up the number-only keyboard.
• Injection Payload
• • Classification: Data Picker/Input Field
  • Definition: A JavaScript string to be executed on the loaded web page inside the Web View.
  • Use Case: Injecting a script to communicate between your Shipcode application and the embedded webpage.
• Intervals
• • Classification: Data Picker/Input Field
  • Definition: The total number of different image sizes (URLs) the component will generate for the responsive source set.
  • Use Case: Setting this to 5 to limit the generated source set to five image sizes.

K

• Keyboard type
• • Classification: Selector/Dropdown
  • Definition: Provides platform-specific keyboard variations (Default, Decimal-pad, Email-address).
  • Use Case: Selecting Phone-pad for a telephone number input field.

L

• Link To
• • Classification: Data Picker/Input Field
  • Definition: The destination URL or internal Shipcode Route the user will be directed to.
  • Use Case: Entering /products/{{ $(Product).slug }} to create a dynamic navigation link.

M

• Max / Min
• • Classification: Data Picker/Input Field
  • Definition: The absolute highest/lowest value the component's range can reach.
  • Use Case: Setting Max to 100 for a Progress Bar component.
• Max Date / Min Date
• • Classification: Data Picker/Input Field
  • Definition: Sets the earliest/latest selectable date.
  • Use Case: Setting Min Date to a past year to ensure a user cannot select a date of birth that is too recent.
• Max length
• • Classification: Data Picker/Input Field
  • Definition: The maximum number of characters a user is allowed to enter.
  • Use Case: Setting 5 for a zip code input field.
• Mode
• • Classification: Selector/Dropdown
  • Definition: Defines whether a user can select only one item (single) or multiple items (multiple) from a group.
  • Use Case: Setting to multiple for a selection group representing product options (e.g., toppings).
• Multiline
• • Classification: Toggle
  • Definition: Allows or disallows line breaks and multiple lines of text within the input area.
  • Use Case: Setting to On for a TextArea and Off for a single-line TextInput.
• Muted
• • Classification: Toggle
  • Definition: Controls the video's sound state upon loading.
  • Use Case: Setting to On for videos that autoplay to adhere to browser standards.

N

• Native ID
• • Classification: Data Picker/Input Field
  • Definition: A unique ID used primarily for cross-platform debugging and native development.
  • Use Case: Providing a consistent identifier for a component across different platforms (iOS, Android, Web).

O

• On Data Changed / On Inputs Changed
• • Classification: Selector/Dropdown
  • Definition: Triggers a connected Flow when the component's data or an input element within it changes.
  • Use Case: Linking the On Inputs Changed trigger to a Flow that validates user input in real-time.
• Open Link in New Tab
• • Classification: Toggle
  • Definition: Determines if the linked URL should open in a new browser tab.
  • Use Case: Enabling for external documentation links to keep the user's application open.
• Options Picker
• • Classification: Data Picker/Input Field
  • Definition: Used to bind the array of available selection options to the component.
  • Use Case: Binding to {{ $(Api).countries }} to populate a country selection dropdown.

P

• Password rules
• • Classification: Data Picker/Input Field
  • Definition: A field to provide specific constraints or regex patterns for password validation.
  • Use Case: Entering a string like minlength: 8 to enforce a minimum password length.
• Placeholder
• • Classification: Data Picker/Input Field
  • Definition: The greyed-out instructional text displayed inside an empty input field.
  • Use Case: Setting the text to "Enter your full name" in a form field.
• Plays Inline
• • Classification: Toggle
  • Definition: Prevents the video from automatically entering its native full-screen player when playback starts on mobile.
  • Use Case: Ensuring video plays directly within the component's layout on a mobile device.
• Priority
• • Classification: Selector/Dropdown
  • Definition: Controls the browser’s hint for the image's importance (Normal, High, Low) to influence loading order.
  • Use Case: Setting a hero image to High to ensure it loads before images below the fold.

R

• Read only
• • Classification: Toggle
  • Definition: Prevents the user from modifying the value, but allows the component to still display data.
  • Use Case: Displaying a user's date of birth in an input field without allowing editing.
• Repeat
• • Classification: Toggle
  • Definition: Causes the video to loop continuously after it finishes playback.
  • Use Case: Enabling for background animation videos.
• Return Key Type
• • Classification: Selector/Dropdown
  • Definition: Customizes the text displayed on the 'Enter' key of the soft keyboard (e.g., Return, Done, Next, Search, Send).
  • Use Case: Setting to Next for a field in the middle of a form to guide the user to the next input.
• Rows
• • Classification: Data Picker/Input Field
  • Definition: Defines the maximum number of lines of text to render before truncation occurs.
  • Use Case: Setting to 3 on a Text component to ensure a content snippet never exceeds three lines of height.

S

• Safe
• • Classification: Toggle
  • Definition: Ensures the content of the scroll view stays within the "safe area" boundaries on mobile devices.
  • Use Case: Enabling to prevent UI elements from being hidden behind status bars or phone notches.
• Secure Text Entry
• • Classification: Toggle
  • Definition: Masks the input text (shows dots instead of characters), typically used for passwords.
  • Use Case: Enabling for any password input field.
• Selected User Agent
• • Classification: Selector/Dropdown
  • Definition: Forces the view to identify itself as a Desktop or Mobile browser to the remote server.
  • Use Case: Setting to Desktop when displaying a webpage that only renders correctly in its desktop view.
• Select Text on Focus
• • Classification: Toggle
  • Definition: Automatically highlights all text in the field when the user taps or clicks on it.
  • Use Case: Enabling for an input field that is designed for quick replacement of its entire content.
• Slot
• • Classification: Data Picker/Input Field
  • Definition: Assigns an identifier to the child component used by the parent's Active Slot property for conditional rendering.
  • Use Case: Setting the value to "content" on a child view to match a parent's Active Slot.
• Source
• • Classification: Selector/Dropdown
  • Definition: Specifies the data source (Default, Form) for a Data Zone or Accordion.
  • Use Case: Setting to Form to explicitly connect the component's data scope to the output of a specific form.
• Source
• • Classification: Data Picker/Input Field
  • Definition: The URI of the image hosted on Shopify.
  • Use Case: Binding to a product's primary image URL from a Data Zone.
• Source Type
• • Classification: Selector/Dropdown
  • Definition: Defines where the image is retrieved from (URI, Asset, Upload).
  • Use Case: Selecting Asset to choose an image from the Shipcode Asset Library.
• Special URLs
• • Classification: Data Picker/Input Field
  • Definition: A list of URLs that trigger a specific action or Flow instead of loading in the view.
  • Use Case: Adding "mailto:" to this list to ensure email links open the user's native email client instead of loading inside the web view.
• State
• • Classification: Toggle
  • Definition: Sets the current checked/unchecked state of the component.
  • Use Case: Setting the default state of a Toggle component to On.
• Static data field
• • Classification: Data Picker/Input Field
  • Definition: A dedicated field to define a static data structure (string, object, array) for the component.
  • Use Case: Defining a small, fixed array of strings for a testing a List component.
• Starting Width
• • Classification: Data Picker/Input Field
  • Definition: The width of the smallest entry in the responsive image source set.
  • Use Case: Setting this to 100 if the image will ever be displayed at that width.
• Step
• • Classification: Data Picker/Input Field
  • Definition: The interval by which the slider's value will change when moved.
  • Use Case: Setting to 5 to allow the slider value to increment only by multiples of five.

T

• Tag
• • Classification: Data Picker/Input Field
  • Definition: A label to help identify the component type or purpose within the project structure.
  • Use Case: Setting the tag on a Data Zone to "ShoppingCart" for easy searching.
• Target URL
• • Classification: Data Picker/Input Field
  • Definition: The primary URL to be loaded in the embedded browser view.
  • Use Case: Entering the URL of a third-party website to be displayed within your application.
• Text
• • Classification: Data Picker/Input Field
  • Definition: The literal text content displayed by the component.
  • Use Case: Entering the component's default text, like "Lorem Ipsum".
• Text Align
• • Classification: Selector/Dropdown
  • Definition: Sets the horizontal alignment of the text content within the component (Left, Center, Right).
  • Use Case: Setting text alignment to Center for a section header.
• Text Content Type
• • Classification: Selector/Dropdown
  • Definition: Provides OS hints about the nature of the text being entered (e.g., Credit Card Number, Username).
  • Use Case: Selecting Credit Card Number to enable the OS to offer optimized security and formatting features.

U

• URI
• • Classification: Data Picker/Input Field
  • Definition: The external URL of the image or video file.
  • Use Case: Pasting a link to a YouTube video.

V

• Value
• • Classification: Data Picker/Input Field
  • Definition: The current numerical value of the component (e.g., progress completed, rating score).
  • Use Case: Binding to {{ $(Product).rating }} to display the current star rating.
• Volume
• • Classification: Data Picker/Input Field
  • Definition: Sets the initial playback volume of the video component (0 being muted).
  • Use Case: Setting the initial volume to 0 for subtle background videos.

Z

• Zoom Scale
• • Classification: Data Picker/Input Field
  • Definition: The default magnification level applied to the content inside the view.
  • Use Case: Setting to 2 for a map component to initialize the view at 200% magnification.