Landing page has a dropdown for choosing the city, depending on the choice, user is redirected to one of the two home pages.
The problem with this approach is that every single user has to take an extra step by making an extra click on the city name just to see any useful content. Also, add that users will likely need to wait longer for the main content because they have to wait for the initial menu page to load and then wait again for the main content to load.
There is a common home page with a city selection popup. Once user chooses the city, popup disappears but homepage stays the same. Although, when user clicks the shop link, he/she sees only items according to the selected city.
This is terrible as a pop-up can be a reading distraction, especially if the popup takes time to load after the content has already loaded in the user's preferred city. I have seen this on a few sites myself when I used my old phone to access them.
What I would recommend is to use two primary domains for the content for two cities.
In your case, you could have these domains:
karachi.domain.com
domain.com
Where karachi.domain.com is your site featuring items related to the karachi city and domain.com is your site for items related to all other cities.
For each domain, add an option at the top of the page where users can change the preferred city.
Maybe for domain.com (all other cities page), you could have the following as a hyperlink on the top-right linking to karachi.domain.com:
Check out our karachi deals!
Then on karachi.domain.com page, you can have the following hyperlink on the top-right linking to domain.com:
Check out deals from our other cities!
Ok, so maybe my wording is extravagant, but I'm sure you understand where I'm coming from. What's even good about this method is that if you make the other aspects of on-page SEO perfect, then BOTH domains will be indexed by google which means all a user has to do is type in your page name and preferred city and google will display the right one.