Other properties serve as a repository for highly specific, functional, and component-level attributes that do not belong to the standard structural, layout, or visual categories. The properties available here are contextual and will change based on the currently selected component.

Display and Structure

These properties control the component's visibility, depth, and adherence to device-level safe zones.

• Display (Applies To: Most components)
• • Controls the layout behavior of the component itself. Common values include Flex (allows child components to be managed using flex properties) or None (hides the component).
• Elevation (Applies To: Most components)
• • A numeric value that controls the shadow depth on Android and provides a similar shadow effect on iOS and Web. A higher value gives the component a greater sense of depth (distance from the screen).
• Safe (Applies To: Background Image, View)
• • A toggle that, when enabled, ensures the component's content respects system-defined boundaries, such as the notch on a smartphone screen (Safe Area Insets).

Scroll and Flow Control

These properties manage how content inside a container component is scrolled or rendered.

• Scroll enabled (Applies To: Grid, Virtual List)
• • A boolean toggle that enables or disables the component's built-in scrolling functionality, regardless of content size.
• Horizontal (Applies To: Scroll View)
• • A toggle that enables scrolling along the horizontal (x) axis.
• Shows Horizontal Scroll Indicator (Applies To: Scroll View)
• • A toggle that controls the visibility of the scroll bar indicator when horizontal scrolling is enabled.
• Window Size (Applies To: Grid, Virtual List)
• • A numeric value that helps optimize performance by defining how many items outside the visible viewport should be rendered for smooth scrolling.

Text and Input Styling

These properties are used for specific text, font scaling, and placeholder styling in text-based components.

• Placeholder Text Color (Applies To: Select, Text Area, TextInput)
• • Controls the color and opacity of the placeholder text that appears in the input field when no user input has been provided.
• Adjusts font size to fit (Applies To: Text)
• • A toggle that automatically scales the font size down to ensure the text string fits within the component's defined bounds.
• Allow font scaling (Applies To: Text)
• • A toggle that determines whether the system-wide font size preference set by the user (in device settings) can affect the text size in the application.
• Max font size multiplier (Applies To: Text)
• • A numeric value that sets a ceiling for how large the font size can grow due to system-wide font scaling settings.

Image and Media

These properties control how visual content is displayed, fit, and styled.

• Resize Mode (Applies To: Image, ShopifySmartImage, Video)
• • A dropdown that controls how content is resized to fit within its container. Common values include Cover (fills container, cropping content) and Contain (shows full content, adding empty space if necessary).
• Blur Radius (Applies To: Image, ShopifySmartImage)
• • A numeric value that determines the intensity of the blur filter applied to the component's image content.
• Tint Color (Applies To: Image, ShopifySmartImage)
• • A color value used to recolor the image content (e.g., changing a black icon to blue) while preserving its alpha channel.
• Overlay Color (Applies To: Image, ShopifySmartImage)
• • A color value applied as a transparent layer over the image content, often used to darken or tint the background image for better text readability.
• Ratio (Applies To: Video)
• • A numeric value or expression defining the fixed aspect ratio (width/height) of the video component.

Data Collection and Lists

These properties manage the specific configuration of repeating data components.

• Column Mode (Applies To: Grid)
• • A dropdown defining the sizing strategy for the grid columns, such as Min Column Width (responsive sizing) or Num Columns (fixed count).
• Auto-fit / Auto-fill (Applies To: Grid)
• • A setting for column sizing that controls whether empty columns are created to fill the available space or if columns only wrap when space is exceeded.
• Initial Num to Render (Applies To: Grid, Virtual List)
• • A numeric value used for optimization, specifying how many items should be rendered immediately upon component load.
• Featured Items Key (Applies To: Grid)
• • A data key used to identify items in the collection that should be displayed differently, such as spanning multiple columns.
• Num columns (Applies To: Virtual List)
• • A numeric value defining a fixed number of columns for the vertical list layout.
• Static (Applies To: Grid)
• • A field that allows you to define a component's internal data source by selecting a static structure (String, Object, or Array) to serve as sample or default data.

Carousel and Slide-Based Properties

These properties control the automatic and interactive behavior of the Carousel component.

• Autoplay
• • A toggle that starts the carousel animation automatically upon load.
• Autoplay Timeout Duration
• • A numeric value (in milliseconds) defining the delay before the carousel automatically advances to the next item.
• Disable Mouse Drag
• • A toggle that prevents user interaction (dragging) from manually advancing the carousel.
• Is Center Mode
• • A toggle that centers the active slide in the viewport, often displaying partial views of the previous and next slides.
• Peek Size
• • A numeric value defining how much of the adjacent slides should be visible (or "peeking") into the current view.
• Show Arrow
• • A toggle to display navigation arrow controls for users to manually advance slides.
• Items per Page
• • A numeric value defining the maximum number of carousel items visible at once.

Component-Specific Styling

These properties are unique to the visual presentation of a single component type.

• Active Color / Inactive Color (Applies To: Toggle)
• • Define the color of the switch when it is in the on (active) state or the off (inactive) state.
• Disable Animation (Applies To: Toggle)
• • A toggle to turn off the default slide-in/slide-out animation when the switch state changes.
• Bar Background Color / Progress Color / Bar Border Width / Bar Height / Bar Widget (Applies To: Progress Bar)
• • Define the styling and dimensions of the progress bar track (background) and the segment showing completion (progress).
• Empty Color / Item Color / Item Size / Empty Star (Applies To: Rating)
• • Define the color, size, and style (e.g., solid or outlined) of the stars used to represent a rating value.