Skip to main content

Settings
API

The API for interacting with merchant settings.

Anchor to standardapiStandardApi

The base API object provided to this and other customer-account extension targets.

Anchor to settings
settings
<>
required

The settings matching the settings definition written in the shopify.ui.extension.toml file.

See settings examples for more information.

Note

When an extension is being installed in the editor, the settings will be empty until a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.

Was this section helpful?

Accessing merchant settings

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useEffect, useState} from 'preact/hooks';

export default async () => {
render(<Extension />, document.body);
};

function Extension() {
const bannerTitle =
shopify.settings.value?.banner_title || '';

return <s-banner title={bannerTitle} />;
}

Anchor to examplesExamples

Anchor to example-define-merchant-settingsDefine merchant settings

You can define settings that merchants can edit within the checkout editor. See settings for more information on how to define these.

Was this section helpful?

Define merchant settings

shopify.extension.toml

api_version = "unstable"

[[extensions]]
name = "My customer account ui extension"
handle = "customer-account-ui"
type = "ui_extension"

[[extensions.targeting]]
target = "customer-account.order-status.block.render"
module = "./Extension.jsx"

[extensions.settings]
[[extensions.settings.fields]]
key = "banner_title"
type = "single_line_text_field"
name = "Banner title"
description = "Enter a title for the banner."
[[extensions.settings.fields.validations]]
name = "min"
value = "5"
[[extensions.settings.fields.validations]]
name = "max"
value = "20"