How to provide option to select substores on pop-up?

Scenario

Suppose, you want to create individual substores for 4 different cities. Now, you want the user first to select the "City" from the popup and then access the given substore.

Example

Steps

StoreHippo multi-store ecommerce platform allows you to set up multiple substores within a store to offer a different storefront as well as products, layout, and payment options, etc. to users. Follow these steps to create individual substores for different cities:

Enabling MultiStore

1. Go to Settings > MISC section in StoreHippo Admin Panel. 
2. Select the Enable Multistore checkbox to enable the multistore e-commerce functionality. 
   
3. Go to the Settings >Substores in the StoreHippo Admin Panel to create substores. 
4. Click the Add New button. 
   
5. Provide the Name of the substore as 'Delhi'.
   
6. You can provide the image, sort order, and other settings of the substore if you want. Click on the Save button and the substore will be created.
   
7. You can create various substores by following the same procedure.
   

   Setting up default substores

8. You might also want to select the default substore for your store. When the customer lands on your store the default store will be the first store that is displayed. To do this, go to Settings > MISC section in the StoreHippo Admin Panel.
9. Select the default substore from the dropdown.
   
   
10. Now, you need to define if you want to show or hide the substores when no substore is assigned to the records. Select hide or show in the Records With Blank Substore field.
11. Click on Save to save the settings.
    

    Linking products to substores

12. Now, you need to link your products to the substores to show them in the substores.
13. Go to Products > Products section in the StoreHippo Admin Panel to specify substore in a product. 
14. Edit an existing product and provide the name of the substore/substores to which you want to assign the product in the Substore field.
    
15. You can do the same for categories, brands, collections, banners, and sliders. 
    

    Choose Substores as a pop-up window

16. Go to the Site > Startup Widgets section in the StoreHippo Admin Panel. 
    
17. Click on Add New button to create a startupwidget. 
    
18. Provide the Name of the widget. In the Controller field, add the code mentioned below as shown in the screenshot below:
    

    function ($rootScope) {
         if ($rootScope.ms.user && !$rootScope.ms.user.store) $rootScope.ms.modal('multistore');
    }

    
    
19. Click the Save button. 
    
20. The option to select substores will now appear on your storefront.
    
21. In theme, you can change html for substore link like:
    

<a ms-widget="ms.modal"  data-msd-widget="multistore"> <span ng-show="ms.substore.name">{{ms.substore.name}}</span></a>