Couldn't create City dropdown in shipping for a particular country name

Extensions
1

Couldn’t create City dropdown in shipping for a particular country name . For example if country selected is Saudi Arabia then the city input field should be replaced with city field but with city name drop down.

2

Could you please provide more details on what you aim to achieve with the screenshots?

3

So if country selected in shipping address is let’s say Saudi Arabia then instead of regular city input field I want a drop-down field with city names of Saudi Arabia. And if we change to any other country then no change keep everything as it is.

4

So you want to show a dropdown of cities of selected country, right ?

5

hey there, we need this feature for our store in Turkiye. However we are not in plus plan. Please let us know if there is a way to achieve this:I need to create a dropdown menu for the city and district fields in the address selection on the checkout page like in the screenshot:Imgur: The magic of the Internet

6

Hey there,
We have implemented this feature using checkout extension for one of our client, but the main requirement is a Shopify Plus plan but if you need further assistance or have any other questions, feel free to reach out.

7

Hi @Aditya_Raman I’m also need to create feature city in shipping form as dropdown, I tried with Checkout UI Extensions with target purchase.checkout.shipping-option-list.render-after but not working in development mode with development store, should I try to deploy the apps first and then try in shopify plus store? I think It would be very helpful if you could provide me with a guideline on how to implement this feature, where the app should be deployed, and what the target for the Checkout UI Extension should be. my Checkout.tsx file is

import {
  reactExtension,
  Select,
  useApplyShippingAddressChange,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.shipping-option-list.render-after", () => (
  <CityDropdown />
));

function CityDropdown() {
  const applyShippingAddressChange = useApplyShippingAddressChange();

  // List of cities for the dropdown
  const cities = ["Hanoi", "Ho Chi Minh", "Da Nang", "Hai Phong"];

  return (
    <Select
      label="City"
      options={cities.map((city) => ({ label: city, value: city }))}
      onChange={(value) => {
        applyShippingAddressChange({
          type: "updateShippingAddress",
          changes: { city: value },
        });
      }}
    />
  );
}
8

yes, first deploy and add the extension in checkout of plus store then check as it won’t work in development store

9

Hi thanks for reply, I change the reactExtension with purchase.checkout.delivery-address.render-before but the dropdown city created as new one field, there’s any clue to remove or replace or hide free text city ?

Screenshot 2025-02-06 at 09.31.44
Screenshot 2025-02-06 at 09.31.441786×1376 188 KB

10

Hey @byrzk , it isn’t possible to remove or replace the default text field