How to create city selecting dropdowns on checkout page using checkout extension?

Topic summary

Goal: Replace Shopify’s default city input with a dropdown/select at checkout when the country is Pakistan, implemented via Checkout UI Extensions (previously done via checkout.liquid). A screenshot was provided to illustrate the desired UI.

Proposed approach: Use the purchase.checkout.block.render target (an extension target that lets you render custom blocks in the checkout) to add custom UI. However, the requester needs to modify/override the existing city field rather than add a separate block.

Additional need: Another participant wants a searchable dropdown that overwrites the city field for specific countries.

Third‑party option: An app (Checkout CitySelect) is suggested that adds a city dropdown and can be limited to Pakistan. The poster notes this became a common issue for Pakistan stores after a recent Checkout Extensions update.

Status: No native, confirmed method to directly override the built‑in city field via Checkout UI Extensions was provided. Current actionable paths are to render a custom block or use a third‑party app. Discussion remains open/unresolved.

Summarized with AI on December 21. AI used: gpt-5.

@Liam I am also looking for the same solution.

I want to overwrite the city input field with the searchable dropdown for specific countries.