SettingsAPI
API
The API for interacting with merchant settings.
Anchor to standardapiStandardApi
The base API object provided to purchase extension targets.
Anchor to settings
settings
StatefulRemoteSubscribable<>
required
The settings matching the settings definition written in the shopify.extension.toml file.
Refer to 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?
Anchor to useSettingsuse
use
Returns the setting values defined by the merchant for the extension.
Partial<Settings extends >
Was this section helpful?
Accessing merchant settings
import {
reactExtension,
Banner,
useSettings,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const {banner_title} = useSettings();
return <Banner title={banner_title} />;
}
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 = "2023-07"
[[extensions]]
name = "My checkout extension"
handle = "checkout-ui"
type = "ui_extension"
[[extensions.targeting]]
target = "purchase.checkout.block.render"
module = "./Checkout.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"
