UI Extensions - Support for split shipping in Shipping method option list and item targets

API

Breaking change: UI Extensions on version 2024-07 can use new API capabilities to integrate with split shipping capabilities.

Split shipping in checkout allows buyers to select different shipping options for items arriving in multiple shipments. In split shipping scenarios, Checkout will include UI changes to offer more transparency and options for buyers in the shipping section, while making the selection process easy with split shipping options (“Lowest price”, “Fastest” or “Custom”).

API updates

As of 2024-07, purchase.checkout.shipping-option-list.render-before and purchase.checkout.shipping-option-list.render-after will receive a new DeliveryGroupList target representing the list of delivery groups for One Time Purchase or Subscription delivery groups. These targets continue to be duplicated for the possible types of delivery groups. We’re also introducing deliverySelectionGroups which represents the list of predefined choices for the “Lowest price”, “Fastest” or “Custom” shipping options that are presented to the buyer. You can view these changes on the ShippingOptionListApi.

Note that useDeliveryGroupTarget() is deprecated in favor of useDeliveryGroupListTarget(). Extensions on 2024-01 and 2024-04 are compatible with split shipping but will only receive the first delivery group of each type (One Time Purchase or Subscription).

UI extension target updates

purchase.checkout.shipping-option-item.render-after and purchase.checkout.shipping-option-item.details.render targets can now be rendered in different contexts: inline as part of the split shipping options, or in an overlay for the “More shipping options” modal.

As a result:

• ShippingOptionItemApi has been updated to include a renderMode indicating in which context the target is rendered.
• Only purchase.checkout.shipping-option-item.render-after can be rendered in both contexts.
• purchase.checkout.shipping-option-item.details.render will also be duplicated for the selected shipping option of each delivery group.

If your extension is capturing buyer inputs at Checkout (for example using an app metafield), you will need to update your logic to account that this information should be scoped to a specific delivery group, instead of the entire order.

You can learn more about the new placement of targets and see examples.

These changes can be previewed today on the unstable api version and will be available on the stable branch with version 2024-07.

Learn more about these api changes on shopify.dev