I generated a Checkout UI extension using CLI (uses 10-2025 version). Didnt make any changes and went to checkout editor and added the app block. I can see the app block added. Save button is active. So far so good. Then I hit Save - Nothing happens and if I try to exit editor, I get alert that changes not saved.
And no errors in shopify app dev logs and no error in browser console either. So it must be failing within Shopify somewhere.
Is there any change I have to do to the generated code to make it work?
My requirement: Able to display some static information to customers on checkout page. I also need this to support merchants on basic plan.
Generated code below:
api_version = "2025-10"
[[extensions]]
name = "delivery-info-chkout-blk"
handle = "delivery-info-chkout-blk"
type = "ui_extension"
uid = "a4f94e6a-e86c-dbca-e46b-bd922391107dc5e0b4ed"
[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.block.render"
[extensions.capabilities]
api_access = true
import '@shopify/ui-extensions/preact';
import {render} from "preact";
// 1. Export the extension
export default async () => {
render(<Extension />, document.body)
};
function Extension() {
// 2. Check instructions for feature availability, see https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions for details
if (!shopify.instructions.value.attributes.canUpdateAttributes) {
// For checkouts such as draft order invoices, cart attributes may not be allowed
// Consider rendering a fallback UI or nothing at all, if the feature is unavailable
return (
<s-banner heading="delivery-info-chkout-blk" tone="warning">
{shopify.i18n.translate("attributeChangesAreNotSupported")}
</s-banner>
);
}
// 3. Render a UI
return (
<s-banner heading="delivery-info-chkout-blk">
<s-stack gap="base">
<s-text>
{shopify.i18n.translate("welcome", {
target: <s-text type="emphasis">{shopify.extension.target}</s-text>,
})}
</s-text>
<s-button onClick={handleClick}>
{shopify.i18n.translate("addAFreeGiftToMyOrder")}
</s-button>
</s-stack>
</s-banner>
);
async function handleClick() {
// 4. Call the API to modify checkout
const result = await shopify.applyAttributeChange({
key: "requestedFreeGift",
type: "updateAttribute",
value: "yes",
});
console.log("applyAttributeChange result", result);
}
}
