Home Builder
Design the home screen of the customer app and website without code: category tabs, coloured headers, banners, product rails and more, per zone and per channel. Preview it, then publish.
The customer app's home screen is not hard-coded. It is a home layout you design here. Each layout is for one sales channel (Quick or eCommerce) and one zone, or the Default Layout used by every zone without its own.
Your home layouts#
Open MainHome BuilderHome Builder. The starter data includes a Quick and an eCommerce layout for every example zone, plus the default layouts.
- 1Create a new home layout.
- 2Channel: Quick or eCommerce.
- 3Home type: single or category-wise.
- 4The zone it is for, or Default Layout.
- 5Active: the layout customers see.
- 6Edit, duplicate or delete.
Create a layout#
Click + New Home Layout. A short wizard asks four things:
| Step | Choice |
|---|---|
| Type | Single Layout: one home for everyone. Category-wise Layout: a row of tabs at the top (All, Fresh & Dairy, Beauty…), each with its own design. |
| Channel | Quick or eCommerce |
| Zone | One zone, or Default Layout for every zone without its own |
| Name | A name for you, for example Mumbai Quick Home |
Edit a layout#
Click the pencil on a layout. The editor shows the tabs, the sections of the selected tab, a live preview and the settings of what you selected.
- 1Edit the draft or the published version.
- 2Publish Changes makes the draft live.
- 3Category tabs: click one to edit it.
- 4Add a tab, reorder tabs or copy one from another layout.
- 5The tab's sections: drag to reorder, switch on or off.
- 6Preview as phone, tablet or website.
- 7Settings of the selected tab or section.
Pick a tab#
Click a tab at the top. + Add Category adds a tab: a category tab shows that category's products, a custom tab (like Diwali Utsav) can show anything. Reorder changes the tab order, Clone category from layout copies a tab from another layout.
Set the tab's header#
With Header Settings selected, choose a colour or an image behind the store header, for each screen size (app 1080 × 480, tablet 1536 × 440, web 1920 × 240), and the text colour and tab icon. Copy layout from fills the tab from another one.
Add sections#
Click + Add in the Sections list and pick a section type. Click a section to change its settings on the right. Drag sections to change the order; the switch hides one without deleting it.
Preview#
Use the phone, tablet and monitor icons above the preview to check every screen size.
Save or publish#
Save Draft keeps your work without changing what customers see. Schedule publishes at a date and time you choose (for example a sale that starts at midnight). Publish Changes makes it live now.
Section types#
| Section | What it shows | Main settings |
|---|---|---|
| Banner Slider | Sliding banners, full width or as cards | Platforms, carousel style, indicator, auto-scroll, loop, speed, banners |
| Category Section | Category tiles in a row, grid or circles | The categories, style, columns |
| Product Slider | A row of products picked by hand or chosen automatically | Source (hand-picked, category, best sellers…), count, title |
| Tabbed Products | Tabs, each with its own product row | The tabs and their products |
| Top Brands | Brand logos with or without names | The brands |
| Grid Banner | Banners in a grid or a scrolling row | Layout, banners |
| Title Image | One wide picture, for example a section heading | Image per screen size, link |
| Heading / Text | A heading with a short line under it | Text in every language, colours |
Where a banner opens#
Every banner and title image can open something when tapped:
| Redirect | Opens |
|---|---|
| No redirect | Nothing; the banner is just a picture |
| Product | One product page |
| Category | A category or sub-category |
| Brand | All products of a brand |
| URL | A web address |
| Page Builder | A landing page you designed in the Page Builder |
Pictures
Upload each banner in the sizes the settings panel shows (app, tablet and web). JPG, PNG or WebP; smaller files load faster for customers.
Draft and published
Customers only ever see the published version. Edit freely in the draft and publish when you are happy. The list shows Published next to each live layout.