Home Screens & Tabs

What customers see first, and the tabs around it, is set in the brand file (brand/storefront.brand.ts). The app's edition comes from the key it is built with: a store_… key makes a single store's app, a network_… key a marketplace.

Single store

Default tabs: Home, Search, Map, Cart, Profile. Change them with navigation.store.tabs (StoreHomeTab, StoreSearchTab, StoreMapTab, StoreCartTab, StoreProfileTab, StoreFoodTruckTab, or a custom tab) and the first one with navigation.store.defaultTab.

Network (marketplace)

Default tabs: Discover, Search, Map, Cart, Profile. Set them with navigation.network.tabs, in order:

Only stores whose Network membership is active appear anywhere in the app; pending and suspended members are hidden. See Networks.

The shop home

For a Network built around one main store, such as a business selling its own range from a central warehouse with partner shops alongside it. Customers who just want to buy rice tap Rice and see every rice, without thinking about stores. From the top:

1. Header. A greeting with the customer's first name, Deliver to and the delivery address, the notifications button with the unread count, the language button, and search.
2. Active orders. A card per order in progress (several scroll sideways): its status, reference and when it was placed, a small timeline of its steps and the products in it. The cards follow the order live and leave once it is delivered. A quiet link opens the order history.
3. Offers. Every live offer as swipeable cards.
4. Categories. The main store's top-level categories in a grid with their icons. A category with an offer aimed at it carries the offer's badge (10%, 2+1). With more than eight, the last tile and the All link open every category as a grid.
5. Your usual. The products the customer orders most, from their recent orders.
6. Services. Bookable services from partner shops.
7. Partner shops. Every other member store, nearest first.

Sections with nothing to show are left out. A category opens on a screen of its own: its products and those of every category under it, chips to narrow it to a subcategory, the offers aimed at it as banners, and offer badges on products.

// brand/storefront.brand.ts
export default defineBranding({
    schemaVersion: 1,
    screens: { 'network.home': { variant: 'shop' } },
    navigation: {
        network: {
            mainStoreTag: 'main-store',
            tabs: ['NetworkHomeTab', 'NetworkOffersTab', 'NetworkSearchTab', 'NetworkCartTab', 'NetworkProfileTab'],
        },
        tabs: { NetworkHomeTab: { icon: 'shop', label: 'tabs.Shop' } },
    },
});

The main store is the member store carrying the tag in mainStoreTag. Add that tag to the store in the Console; moving the tag to another store changes the main store without an app update. Without a tagged member, the grid shows the Network's own categories and every member is a partner shop.

Trucks

Mobile stores on a live map, each truck with its own catalog and service zone, alongside fixed store locations. Customers see the trucks serving their location, open a truck's menu and order from it. Set up trucks in the Console: Food Trucks.

A truck takes orders while its Storefront status is Active, whatever its vehicle or driver app reports.

Tab icons and labels

navigation.tabs.<Tab> sets one tab's icon and label in either edition:

navigation: {
    tabs: {
        NetworkHomeTab: { icon: 'shop', label: 'tabs.Shop' },
        NetworkOffersTab: { icon: 'tag' },
    },
},

• icon: home, store, shop, bag, truck, utensils, map, compass, search, cart, user or tag.
• label: a translation key, so it follows the language (tabs.Shop is Shop, Дэлгүүр, Магазин), or plain text. Your own keys go in brand/translations/<locale>.json.

A build can also add tabs of its own. See Extending.

Offers next to what they apply to

An offer applies to the products, categories or stores chosen for it in the Console (Promotions), minus its exclusions. The app shows it where those are:

An offer on a whole store or the whole Network isn't aimed at anything in particular, so it gets no badges: it appears in the Offers tab and the offer cards.

Replacing a home screen

When none of these fit, a build replaces the home screen with its own from brand/storefront.extensions.ts, without changing the app's code:

screens: {
    'network.home': { load: () => import('./screens/HomeScreen') },
},

See Extending.