Shopify Plus账户：如何在结账信息页联系栏添加配送方式选择

前提确认 #

确保你的Shopify Plus账户已经启用Checkout Extensibility架构：进入Shopify后台 → 设置 → 结账 → 自定义结账，确认能看到扩展定制选项（若未启用，需先切换到新结账架构）。

步骤1：创建Checkout UI Extension项目 #

用Shopify CLI初始化扩展项目：

shopify app init --type checkout-ui-extension

按提示完成初始化，选择对应扩展类型后，进入项目目录。

步骤2：配置扩展挂载位置 #

在项目根目录的shopify.extension.toml文件中，设置扩展的挂载目标为结账联系信息板块下方：

name = "配送方式选择器"
type = "checkout_ui_extension"
target = "Checkout::ContactInformation::After"
version = "1.0.0"

步骤3：实现配送选择UI与逻辑 #

在src/index.jsx（或对应入口文件）中编写核心代码，调用Shopify官方API获取配送选项并处理选择逻辑：

import {useApi, useSubscription} from '@shopify/checkout-ui-extensions-react';

export default function DeliveryMethodSelector() {
  const api = useApi();
  // 订阅配送选项数据
  const deliveryOptions = useSubscription(api.deliveryOptions);

  // 切换配送方式的逻辑
  const handleSelectOption = async (optionId) => {
    try {
      await api.applyDeliveryOption(optionId);
    } catch (error) {
      console.error('切换配送方式失败:', error);
    }
  };

  return (
    <div style={{marginTop: '20px', padding: '15px', border: '1px solid #eee', borderRadius: '4px'}}>
      <h3 style={{marginTop: 0, fontSize: '16px'}}>选择配送方式</h3>
      <div style={{marginTop: '10px'}}>
        {deliveryOptions.map((option) => (
          <div key={option.id} style={{marginBottom: '10px', display: 'flex', alignItems: 'center'}}>
            <input
              type="radio"
              id={`delivery-${option.id}`}
              name="delivery-option"
              checked={option.selected}
              onChange={() => handleSelectOption(option.id)}
              style={{marginRight: '8px'}}
            />
            <label htmlFor={`delivery-${option.id}`} style={{cursor: 'pointer'}}>
              {option.title} - {option.price.amount}{option.price.currencyCode}
            </label>
          </div>
        ))}
      </div>
    </div>
  );
}

步骤4：测试与部署 #

1. 本地测试：执行shopify extension serve，在Shopify后台的结账预览页面查看效果，验证配送方式切换是否正常。
2. 部署上线：测试无误后，执行shopify extension push将扩展部署到你的商店，最后在结账自定义界面启用该扩展。

注意事项 #

• 确保扩展拥有访问配送选项的权限，Shopify CLI初始化时会自动配置基础权限，若有额外需求可在shopify.extension.toml中补充。
• 样式可根据商店品牌风格调整，可使用Shopify提供的全局CSS变量或自定义样式。
• 避免依赖checkout.liquid相关代码，完全基于Checkout Extensibility API实现，确保兼容性。

内容的提问来源于stack exchange，提问作者Javier García-Rojo Cantón