Checkout UI Extensions lack access to customer's shipping method choice

Shopify Partner
8 0 10

As checkout.liquid is being deprecated by August 2024, I have to replace a business-critical checkout customization my client has used for years with something that achieves the same ends through Checkout UI Extensions.

I have read through the documentation for Checkout UI Extensions, and I cannot find any ability to do two things, without which my client is stranded:


1. I can render component's under the Shipping Method area, with the extension point "Checkout::ShippingMethods::RenderAfter". However, the content I put here needs to change based on which shipping method the customer chooses. I can neither get any data about which shipping method is currently chosen, nor subscribe to an event where the customer changes that choice. Am I missing something here, or is this feature not compatible with UI extensions?

2. I need to render a custom map. I was using Google Maps before, however there appears to be no way to load such a third-party library.

I appreciate the idea of replacing checkout.liquid with a more secure / less-hacky sand-boxed approach in UI Extensions. However, given that these sandboxes are so limited that I cannot replicate a business-critical functionality, and Shopify is shutting down checkout.liquid, this is more than frustrating for my client.


Replies 4 (4)

Shopify Partner
1 0 0

I need the same functionality to give an opportunity to users to choose local pickup locations. As natively Shopify supports only 20 locations, but client has more than 20 locations. Plus, we want users to be able to search the closest store by postal code. Of course it's possible to do with current possibilities, but it would be better if these UI elements would appear only if user select local pickup delivery method.

Shopify Partner
7 0 7

Same here, we use it to display a pick point shop locator. They are supposed to add new shipping related functionalities this summer, I hope it will include a listener for shipping methods.


Shopify actually released a pick up point map selector to get delivered in shops a few days ago but it’s poorly integrated and pass data only when you use Shopify shipping. The order contains zero meta field for the shop selected via their integrated solution. Also the selected shop name is not even an available value to use on order confirmation.

I hope one member of their team will see this message and think about the hundreds of shops in France relying on pickup points shop selector. 

Most of our national 3PL are going to get very mad otherwise. Even Shopify shipping official partners like mondial relay or chronopost rely on this solution.


Let’s wait and see !

Shopify Partner
1 0 2

Hi, It's possible (at least now, July 2023)
Not sure if you still need this reply but leaving it here for everyone who will be reading this thread in the future.
The code below subscribes to the chosen shipping method. `shippingMethodTitle` is the title of the shipping method chosen by the customer.


// This example is for React. The following code is supposed to be put into the component
const extensionApi = useExtensionApi();
const deliveryGroups = useSubscription(extensionApi.deliveryGroups)

const deliveryOptions = deliveryGroups[0]?.deliveryOptions
const selectedOption = deliveryGroups[0]?.selectedDeliveryOption

const shippingMethodTitle = selectedOption && deliveryOptions.find(opt => opt.handle === selectedOption.handle)?.title


Hope this helps 🙌