Function settings
The function settings component configures metafield settings for Shopify Functions. Use function settings to create configuration interfaces that allow merchants to customize function behavior through structured input fields and controls.
This component provides a standardized layout for settings forms and integrates with the native save bar to handle form submission and reset actions automatically. For general form submission, use form.
Anchor to EventsEvents
The form component provides event callbacks for handling user interactions. Learn more about handling events.
- Anchor to resetresetresetCallbackEventListener<typeof tagName> | nullCallbackEventListener<typeof tagName> | nullrequiredrequired
A callback that is run when the form is reset.
- Anchor to submitsubmitsubmitCallbackExtendableEventListener<typeof tagName> | nullCallbackExtendableEventListener<typeof tagName> | nullrequiredrequired
A callback that is run when the form is submitted.
CallbackEventListener
A function that handles events from UI components. This type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.
(EventListener & {
(event: CallbackEvent<T>): void;
}) | nullCallbackEvent
An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event. This type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.
Event & {
currentTarget: HTMLElementTagNameMap[T];
}CallbackExtendableEventListener
A function that handles extendable events from UI components. This type represents an event listener callback that can use `waitUntil` to extend the event lifetime.
(EventListener & {
(event: CallbackExtendableEvent<TTagName>): void;
}) | nullCallbackExtendableEvent
- AT_TARGET
2 - bubbles
The **`bubbles`** read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/bubbles)
boolean - BUBBLING_PHASE
3 - cancelable
The **`cancelable`** read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelable)
boolean - cancelBubble
The **`cancelBubble`** property of the Event interface is deprecated.
boolean - CAPTURING_PHASE
1 - composed
The read-only **`composed`** property of the or not the event will propagate across the shadow DOM boundary into the standard DOM. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composed)
boolean - composedPath
The **`composedPath()`** method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composedPath)
() => EventTarget[] - currentTarget
The **`currentTarget`** read-only property of the Event interface identifies the element to which the event handler has been attached. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget)
EventTarget | null - defaultPrevented
The **`defaultPrevented`** read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/defaultPrevented)
boolean - eventPhase
The **`eventPhase`** read-only property of the being evaluated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/eventPhase)
number - initEvent
The **`Event.initEvent()`** method is used to initialize the value of an event created using Document.createEvent().
(type: string, bubbles?: boolean, cancelable?: boolean) => void - isTrusted
The **`isTrusted`** read-only property of the when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and `false` when the event was dispatched via The only exception is the `click` event, which initializes the `isTrusted` property to `false` in user agents. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/isTrusted)
boolean - NONE
0 - preventDefault
The **`preventDefault()`** method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/preventDefault)
() => void - returnValue
The Event property **`returnValue`** indicates whether the default action for this event has been prevented or not.
boolean - srcElement
The deprecated **`Event.srcElement`** is an alias for the Event.target property.
EventTarget | null - stopImmediatePropagation
The **`stopImmediatePropagation()`** method of the If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation)
() => void - stopPropagation
The **`stopPropagation()`** method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation)
() => void - target
The read-only **`target`** property of the dispatched. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)
EventTarget | null - timeStamp
The **`timeStamp`** read-only property of the Event interface returns the time (in milliseconds) at which the event was created. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/timeStamp)
DOMHighResTimeStamp - type
The **`type`** read-only property of the Event interface returns a string containing the event's type. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/type)
string - waitUntil
A method that accepts a promise signaling the duration and eventual success or failure of event-related actions. Can be called multiple times to add promises to the event, but must be called synchronously during event dispatch. Cannot be called after a `setTimeout` or within a microtask.
(promise: Promise<void>) => void
Anchor to ExamplesExamples
Anchor to Add a settings field for a functionAdd a settings field for a function
Configure a Shopify Function with a settings form that integrates with the native save bar. This example shows a number field for a discount percentage input inside a function settings component.
Preview
html
Anchor to Set up tiered discount rulesSet up tiered discount rules
Organize settings into repeating groups for tiered or multi-level configurations. This example uses sections to define two volume discount tiers, each with a quantity threshold and percentage.
Preview
html
Anchor to Show validation errors on settingsShow validation errors on settings
Display validation errors when settings values are out of range or missing. This example shows required number fields with inline error messages.
Preview
html
Anchor to Add a select dropdown to settingsAdd a select dropdown to settings
Let merchants choose from predefined options to control function behavior. This example uses a select dropdown to pick a discount target and a text field for a filter value.
Preview
html
Anchor to Toggle a feature with a switchToggle a feature with a switch
Let merchants enable or disable a feature with a switch and configure its threshold. This example pairs a toggle for free shipping with a minimum order amount number field.
Preview
html
Anchor to Best practicesBest practices
- Label settings clearly: Instead of technical names like Max threshold, use merchant-friendly labels like Maximum discount amount or Order value limit.
- Validate with specific feedback: Check that percentages are between 0-100, that monetary values are positive, and that required fields are filled. Provide clear error messages when validation fails.
- Explain impact with field details: Use the
detailsproperty on individual field components (for example, text field or number field) to explain what each setting does and how it affects the user's workflow. - Set appropriate defaults: Pre-select the most common configuration to reduce setup friction for merchants.
- Group related settings: Use sections to organize settings by function so merchants can find what they need quickly.