How to Add and Manage Multiple Pages in Your App
Your MobiDrag app has multiple screens — Home, Product Detail, Cart, Search, and more. This guide explains how to navigate between pages in the builder and understand which blocks appear where.
1 Pages overview
A MobiDrag app is made up of multiple screens (pages). Each page serves a specific purpose — Home is what customers see first, Product Detail shows individual product info, Cart lets them review their order, and so on.
You design each page individually in the builder. Navigate between them using the page dropdown in the toolbar.
The screenshot above shows the full list of pages available in your app: Home, Cart, Product Detail, Category, Search, Wishlist, My Account, Order Details, Past Purchases, and more.
2 Switching between pages in the builder
- 1In the builder toolbar, find the page dropdown — it shows the currently active page name (e.g., "Home").
- 2Click the dropdown to expand the full list of pages.
- 3Click any page name to switch to it. The canvas and left panel update immediately to show that page's blocks.
- 4Edit blocks, add new ones, or adjust settings — all changes are isolated to the page you selected.
3 Global blocks vs. page-specific blocks
Not all blocks are equal when it comes to pages:
| Block type | Examples | Appears on |
|---|---|---|
| Global blocks | Header, Bottom Navigation, Side Navigation | Every page — edit once, updates everywhere |
| Page-specific blocks | Hero Banner, Product Grid, Collection Slider, Countdown Timer | Only the page you added them to |
Changing the Header on any page updates it on all pages. This is intentional — global blocks ensure a consistent navigation experience for your users.
4 What each page is for
| Page | Purpose | Key blocks to add |
|---|---|---|
| Home | Main landing screen — first thing customers see | Hero Banner, Featured Collections, Product Grid, Countdown Timer |
| Product Detail | Individual product page (PDP) | Product Images, Product Info, Add to Cart, Reviews |
| Category / Collection | Browse products in a collection | Product Grid, Filters, Sort options |
| Cart | Shopping cart and checkout summary | Cart Items, Order Summary, Checkout button |
| Search | Product search results | Search Bar, Search Results Grid |
| Wishlist | Saved / favorited products | Wishlist Grid |
| My Account | Customer profile and order history | Account Details, Order History |
| Past Purchases | Previous orders view | Order List, Reorder button |
5 Tips for multi-page design
- Start with Home: Design the Home page first — it is the most visible and sets the tone for the rest of the app.
- Consistent navigation: Set up your Bottom Navigation and Side Navigation (global blocks) early. Once configured, they are done for all pages.
- Test the full flow: After designing Home and PDP, use Live Preview to tap through the full shopping journey as a customer would experience it.
- Brand Kit applies everywhere: Colors and fonts from Brand Kit apply to every page automatically — you only need to set them once.