Skip to main content

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.

The form component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to reset
reset
<typeof tagName> | null
required

A callback that is run when the form is reset.

Anchor to submit
submit
<typeof tagName> | null
required

A callback that is run when the form is submitted.


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

<s-function-settings>
<s-number-field
step="1"
suffix="%"
label="Percentage"
name="percentage"
value="10"
></s-number-field>
</s-function-settings>

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

<s-function-settings>
<s-stack direction="block" gap="base">
<s-section heading="Tier 1">
<s-stack direction="inline" gap="base">
<s-number-field label="Minimum quantity" name="tier1Qty" value="5" min="1" step="1"></s-number-field>
<s-number-field label="Discount" name="tier1Discount" value="10" min="0" max="100" step="1" suffix="%"></s-number-field>
</s-stack>
</s-section>
<s-section heading="Tier 2">
<s-stack direction="inline" gap="base">
<s-number-field label="Minimum quantity" name="tier2Qty" value="10" min="1" step="1"></s-number-field>
<s-number-field label="Discount" name="tier2Discount" value="20" min="0" max="100" step="1" suffix="%"></s-number-field>
</s-stack>
</s-section>
</s-stack>
</s-function-settings>

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

<s-function-settings>
<s-stack direction="block" gap="base">
<s-number-field
step="1"
suffix="%"
label="Discount percentage"
name="percentage"
min="0"
max="100"
required
error="Enter a percentage between 0 and 100"
></s-number-field>
<s-number-field
step="0.01"
prefix="$"
label="Maximum discount amount"
name="maxDiscount"
min="0"
required
error="Enter a positive dollar amount"
></s-number-field>
</s-stack>
</s-function-settings>

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

<s-function-settings>
<s-stack direction="block" gap="base">
<s-select label="Apply discount to" name="target">
<s-option value="all">All products</s-option>
<s-option value="collection">Specific collection</s-option>
<s-option value="tagged">Products with tag</s-option>
</s-select>
<s-text-field label="Collection or tag" name="identifier"></s-text-field>
</s-stack>
</s-function-settings>

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

<s-function-settings>
<s-stack direction="block" gap="base">
<s-switch label="Enable free shipping threshold" name="freeShippingEnabled" checked></s-switch>
<s-number-field
step="0.01"
prefix="$"
label="Minimum order amount"
name="freeShippingThreshold"
value="75.00"
min="0"
></s-number-field>
</s-stack>
</s-function-settings>

  • 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 details property 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.

Was this page helpful?