How to Add, Move, and Delete Blocks
Blocks are the building units of your mobile app. This guide covers how to browse the block palette, drag blocks onto your canvas, reorder them, configure their settings, and remove them when needed.
1 What are blocks?
A block is a pre-built section you place on a page inside your app. Every piece of content your customers see — the hero banner at the top, the product grid, a countdown timer, featured collections — is a block.
Blocks are independent: you can add as many as you like, stack them in any order, and each one has its own settings. There is no coding involved — you pick, place, and configure entirely through the visual editor.
Think of blocks like LEGO bricks. Each brick does one thing well. Stack them in the order that makes sense for your shoppers and your page is done.
2 Browsing the Design Blocks palette
All available blocks live in the left panel. Open the App Builder and you will see the DESIGN BLOCKS heading at the top of the left panel with every block listed below it as a visual card.
Each card shows:
- The block name (e.g., Hero Banner, Collection Image, Product Grid)
- A live visual preview of how it looks in the app
- A ⋮⋮ drag handle (six dots) in the top-right corner — this is what you grab to drag the block onto the canvas
Searching for a specific block
Use the Search here... bar at the top of the left panel to filter the palette instantly. Type any part of the block name and matching results appear in real time.
Typing hero immediately narrows the palette to only blocks whose names contain that word — making it fast to find the right block even when the palette is long.
3 Adding a block to your page
Adding a block is a simple drag-and-drop action from the left panel into the center canvas.
- 1Open App Builder and make sure you are in Builder Mode (check the top-left of the toolbar).
- 2In the left panel, find the block you want. Use the search bar if needed.
- 3Hover over the block card — the ⋮⋮ drag handle appears in the top-right corner of the card.
- 4Click and hold the drag handle, then drag the card across to the center canvas.
- 5A drop indicator shows where the block will land. Release to place it.
- 6The block appears on the canvas instantly. Its settings open in the right panel automatically.
The Header block always anchors to the top of the page and the Bottom Navigation block always anchors to the bottom — regardless of where you drop them. All other blocks stack in the order you place them.
4 Selecting and configuring a block
Click any block on the canvas to select it. A teal highlight border appears around it and the right panel immediately shows that block's settings.
In the screenshot above, the Collection Slider block is selected. The right panel shows the list of collections assigned to it, each with its own drag handle for reordering and a delete button.
Every block has its own unique set of properties. Common configuration options include:
| Block | Key settings |
|---|---|
| Hero Banner | Title text, subtitle, button label, background image / color, layout |
| Collection Slider | Which collections to show, display style, number of items per row |
| Product Grid | Collection source, columns, show price / rating toggles |
| Countdown Timer | End date & time, label, style |
| Banner Image | Image upload, tap action (link to collection / product / URL) |
Live preview: Every change you make in the right panel reflects on the canvas in real time. You never need to save before seeing what it looks like.
5 Moving and reordering blocks
To change the order of blocks on a page, hover over any block on the canvas. A small toolbar of action icons appears at the top-right corner of the block.
To reorder:
- 1Hover over the block you want to move — the ⋮⋮ handle appears on the left of the action toolbar.
- 2Click and hold the ⋮⋮ handle.
- 3Drag the block up or down to its new position.
- 4Release to drop it into place. All other blocks shift automatically.
Remember: Header and Bottom Navigation blocks are locked to their positions (top and bottom). You cannot drag them into the middle of the page.
6 Deleting a block
Each block has a quick-access delete button. To remove a block:
- 1Hover over the block on the canvas — the action toolbar appears at the top-right.
- 2Click the 🗑 trash icon (rightmost icon in the toolbar).
- 3The block is removed from the canvas immediately.
The action toolbar has three icons:
| Icon | Action |
|---|---|
| ✏️ Edit (pencil) | Opens the block's settings in the right panel — same as clicking the block |
| ❏ Duplicate (copy) | Creates an identical copy of the block directly below it |
| 🗑 Delete (trash) | Permanently removes the block from this page |
Deleted a block by mistake? Press Ctrl + Z (Windows) or Cmd + Z (Mac) immediately to undo. The block will reappear in its original position.
7 Tips & shortcuts
| Task | How to do it |
|---|---|
| Find a block fast | Type its name in the Search bar in the left panel |
| Duplicate a block | Hover the block on canvas → click the copy icon |
| Edit block settings | Click any block on the canvas to select it |
| Undo last action | Ctrl + Z / Cmd + Z |
| Redo | Ctrl + Y / Cmd + Shift + Z |
| Save progress | Click the save (disk) icon in the top-right toolbar |
| Preview the result | Click the eye icon next to Save to open full device preview |
Working with multiple blocks of the same type
You can add the same block type multiple times on a single page. For example, you might use two separate Banner Image blocks — one near the top promoting a sale, and one further down promoting a new collection. Each instance has its own independent settings.
Global vs. page-specific blocks
Most blocks are page-specific — they only appear on the page you added them to. However, three blocks are global and apply across all pages:
- Header — shown at the top of every screen
- Bottom Navigation — shown at the bottom of every screen
- Side Navigation — the slide-out drawer accessible from any screen
Editing a global block on one page updates it everywhere. This means you only need to configure your navigation once.