How do i specify a default value for a Checkout UI settings field?

Extensions
1

Currently there doesn’t seem to be a way according to the documentation to set a default value in extensions.settings.fields :https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/configuration

Is there some secret way to set default values?

I have this currently in my toml:

[[extensions.settings.fields]]
key = "showBranding"
type = "boolean"
name = "Show Branding"
default = true

“shopify app dev” command line doesn’t throw any errors about the default (unlike default_value, or some other key) key so it in theory accepts it, but setting it to true or 1 or “true” doesn’t seem to change anything in my App settings on the Thank you page, it still defaults itself to False.

This affects all my other fields as well, but this one is a priority for my customers.

I’d appreciate any advice or maybe if this is on a roadmap to be added, thanks.

2

We should code the extension so that it still works if the merchant hasn’t set a value for the setting. Please see the below example from shopify documentation.

Please refer the documentation:

import React from "react";
import {
  reactExtension,
  Banner,
  useSettings,
} from "@shopify/ui-extensions-react/checkout";

// Set the entry points for the extension
const checkoutBlock = reactExtension("purchase.checkout.block.render", () => <App />);
export { checkoutBlock };

const deliveryAddress = reactExtension("purchase.checkout.delivery-address.render-before", () => <App />);
export { deliveryAddress };

function App() {
  // Use the merchant-defined settings to retrieve the extension's content
  const {title: merchantTitle, description, collapsible, status: merchantStatus} = useSettings();

  // Set a default status for the banner if a merchant didn't configure the banner in the checkout editor
  const status = merchantStatus ?? 'info';
  const title = merchantTitle ?? 'Custom Banner';

  // Render the banner
  return (
    <Banner title={title} status={status} collapsible={collapsible}>
      {description}
    </Banner>
  );
}

Please see area:

// Set a default status for the banner if a merchant didn’t configure the banner in the checkout editor
const status = merchantStatus ?? ‘info’;
const title = merchantTitle ?? ‘Custom Banner’;

3

Officially there is no way to aet default value :sweat_smile:

Let’s react this issue.

4

Yes, but we can code the extension to set default value, if the merchant hasn’t set a value for the setting. Like example mentioned on the documentation.

5

Yes, this works fine for text fields, but doesn’t work for boolean types, as they default to false and there’s no way to tell if the user chose false or it was defaulted on first install since there’s no undefined (null) state.

6

Wow, that ticket has been open for 2 years :rofl: