Settings

API

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 {
    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} />;
  }
  

  JavaScript

  import {
    extension,
    Banner,
  } from '@shopify/ui-extensions/checkout';
  
  export default extension(
    'purchase.checkout.block.render',
    (root, {settings}) => {
      const banner = root.createComponent(Banner, {
        title: settings.current.banner_title,
      });
  
      // When the merchant updates the banner title in the checkout editor, re-render the banner
      settings.subscribe((newSettings) => {
        banner.updateProps({
          title: newSettings.banner_title,
        });
      });
  
      root.appendChild(banner);
    },
  );