---
title: useSettings
description: Returns the setting values defined by the merchant for the extension.
api_version: 2023-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/storage/usesettings
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/storage/usesettings.md
---

# use​Settings

Returns the setting values defined by the merchant for the extension.

## use​Settings()

### Returns

* Partial\<Settings extends ExtensionSettings>

### ExtensionSettings

The merchant-defined setting values for the extension.

* \[key: string]

  ```ts
  string | number | boolean | undefined
  ```

```ts
export interface ExtensionSettings {
  [key: string]: string | number | boolean | undefined;
}
```

Examples

### 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

  ```jsx
  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} />;
  }
  ```

* #### 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

  ```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"
  ```

## Related

[Overview - Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

[Configuration - Settings Definition](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#settings-definition)

[APIs - Settings Examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#example-settings)