use
hook
Returns the setting values defined by the merchant for the extension.
Anchor to useSettingsuse
use
Partial<Settings extends ExtensionSettings>
ExtensionSettings
The merchant-defined setting values for the extension.
- [key: string]
string | number | boolean | undefined
export interface ExtensionSettings {
[key: string]: string | number | boolean | undefined;
}Was this section helpful?
Accessing merchant settings
React
import React from 'react';
import {
render,
Banner,
useSettings,
} from '@shopify/checkout-ui-extensions-react';
render('Checkout::Dynamic::Render', () => (
<Extension />
));
function Extension() {
const {banner_title} = useSettings();
return <Banner title={banner_title} />;
}
Examples
Accessing merchant settings
Description
You can retrieve settings values within your extension. In React, the `useSettings()` hook re-renders your extension with the latest values. In JavaScript, subscribe to changes and update your UI directly.
React
import React from 'react'; import { render, Banner, useSettings, } from '@shopify/checkout-ui-extensions-react'; render('Checkout::Dynamic::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.ui.extension.toml
type = "checkout_ui_extension"
name = "my-checkout-extension"
extension_points = [
'Checkout::Dynamic::Render'
]
[settings]
[[settings.fields]]
key = "banner_title"
type = "single_line_text_field"
name = "Banner title"
description = "Enter a title for the banner."
[[settings.fields.validations]]
name = "min"
value = "5"
[[settings.fields.validations]]
name = "max"
value = "20"
Examples
Define merchant settings
Description
You can define settings that merchants can edit within the checkout editor. See [settings](/docs/api/checkout-ui-extensions/configuration#settings-definition) for more information on how to define these.
shopify.ui.extension.toml
type = "checkout_ui_extension" name = "my-checkout-extension" extension_points = [ 'Checkout::Dynamic::Render' ] [settings] [[settings.fields]] key = "banner_title" type = "single_line_text_field" name = "Banner title" description = "Enter a title for the banner." [[settings.fields.validations]] name = "min" value = "5" [[settings.fields.validations]] name = "max" value = "20"
