结账界面的UI扩展允许应用开发者构建自定义功能，商家可以在结账流程的定义点安装，包括产品信息、运输、支付、订单摘要和Shop Pay。
Shopify官方在去年2024年使用结账扩展取代了checkout.liquid，并将于2025年8月28日彻底停用checkout.liquid。
步骤1：初始化shopify app和checkout ui extension
npm init @shopify/app@latest
cd your-app
npm run shopify app generate extension
步骤2：配置checkout extension的shopify.extension.toml文件
Configuration
当创建一个扩展checkout ui扩展时，shopify.extension.toml 文件会自动生成在扩展目录中。该文件包含了扩展的配置信息，其中包括扩展名称、扩展目标、元字段、功能以及设置定义。
配置扩展点
Checkout-ui-extensions targets
checkout ui可配置多个扩展点，每个扩展点出现在结账的不同的位置（UI出现的位置）
可配置多个
api_version = "2025-01"[[extensions]]
type = "ui_extension"
name = "My checkout extension"
handle = "checkout-ui"[[extensions.targeting]]target = "purchase.checkout.block.render"module = "./Checkout.jsx"[[extensions.targeting]]target = "purchase.checkout.payment-method-list.render-after"module = "./Payment.jsx"
扩展点展示UI出现的位置，构建UI请遵循
Checkout-ui-extensions components
只能使用官方提供好的UI组件库
配置API访问权限
Checkout-ui-extensions apis
不同的API对于权限的要求不同，不敏感数据是不需要访问权限的
敏感数据如用户的身份信息就需要访问权限
要想请求敏感数据请按照如下操作进行编辑后台配置
如下配置
选择需要使用到的用户信息提交表单即可，如果不确定直接全选一步到位就好了，在配置过后，配置入口将不再出现。
定义扩展的“能力”
Configuration
| Property | Description |
|---|---|
| api_access | 允许您的扩展程序查询 Storefront API。 |
| network_access | 允许扩展访问外部网络，如fetch访问接口 |
| block_progress | 允许阻止买家结账，当配置了此配置，需在checkout配置后台选择开启此app的阻止结账的功能按钮 |
| collect_buyer_consent | 允许您的扩展程序收集买家对特定政策（例如短信营销）的同意。 |
# ...[extensions.capabilities]
api_access = true
network_access = true
block_progress = true[extensions.capabilities.collect_buyer_consent]
sms_marketing = true
customer_privacy = true# ...开启了network_access，需开启app配置后台的“access network”才可生效。
配置自定义表单
Configuration
这个类似于shopify liquid schema settings，配置代码不同，使用方式类似，可以自定义文案等。
[settings][[settings.fields]]key = "banner_title"type = "single_line_text_field"name = "Banner title"description = "Enter a title for the banner"步骤3：代码编写
需要具有React的代码编写能力
import {reactExtension,BlockStack,InlineStack,Button,Image,Text,
} from '@shopify/ui-extensions-react/checkout';export default reactExtension('purchase.checkout.block.render',() => <Extension />,
);function Extension() {return (<InlineStack><Image source="/url/for/image" /><BlockStack><Text size="large">Heading</Text><Text size="small">Description</Text></BlockStack><ButtononPress={() => {console.log('button was pressed');}}>Button</Button></InlineStack>);
}
步骤4：提交代码
app deploy
shopify app deploy
shopify app deploy --message <value> 可添加版本发布的日志备注，仅供团队成员参考。
步骤5：开启本地服务并为客户商店安装并测试。
步骤6：测试完毕后部署App到生产环境
Deploy to a hosting service
