Content — Mobile Menu Blocks
Mobile Menu Blocks let you add content above or below the main navigation in your store’s mobile menu. Blocks appear when customers open the menu on phones and tablets.
Path: Admin > Page Management > Mobile Menu Blocks
The page shows two sections: Above Navigation (blocks at the top, before nav links) and Below Navigation (blocks at the bottom, after nav links).
Adding a new block
- In the section where you want the block (Above Navigation or Below Navigation), click Add Block.
- A modal opens. Set:
- Block Type – see block types below.
- Position – “Above navigation” or “Below navigation” (you can change this later).
- Sort Order – number that controls order among blocks in the same section (e.g. 0, 1, 2). Lower numbers appear first.
- Active – turn on to show the block; turn off to hide it without deleting.
- Fill in the fields for the chosen block type (see below).
- Click Save Changes or Add Block to create the block.
Block types
1. Banner
- Banner image (required) – choose an image from the media library (click to select or upload). The image is served via the app’s image proxy when enabled (optimized and resized for mobile).
- Link URL (optional) – if set, the banner becomes a link (e.g. to a promotion page).
- Overlay Text (optional) – short text over the image.
Use this for a promotional image or announcement at the top or bottom of the mobile menu.
2. Contact Info
Use this to show one or more contact lines: phone, email, address, opening hours, etc.
- You can add multiple contact items in a single block (e.g. Phone, Email, Address).
- For each item you set:
- Icon (Iconify name) (optional) – e.g.
heroicons:phone,heroicons:envelope. - Label (required) – e.g. “Phone”, “Email”, “Address”.
- Value (required) – the actual number, email, or text.
- Link type – how the value is shown:
- No link – plain text (e.g. address, opening hours).
- Phone (tel:) – value becomes a clickable phone link (opens the dialler).
- Email (mailto:) – value becomes a clickable email link (opens the mail app).
- Icon (Iconify name) (optional) – e.g.
Steps:
- After choosing block type Contact Info, you see at least one contact item card.
- Fill in Icon, Label, and Value for the first item.
- Choose Link type:
- Phone number → Phone (tel:)
- Email address → Email (mailto:)
- Anything else (address, hours, etc.) → No link
- To add more items (e.g. email, address), click Add contact item, then fill in the new card and its Link type.
- To remove an item, click Remove on that card (you must keep at least one item).
- Save the block.
The system does not guess link type from the value; always choose Phone, Email, or No link explicitly.
3. Text / HTML
- HTML (required) – your custom HTML (e.g. a short notice, terms link, or formatted text).
Use this for a custom message or legal link in the mobile menu. Keep content short so the menu stays easy to use.
4. Social Links
- Heading (optional) – e.g. “Follow us”.
- Links are loaded automatically from Social Media Settings in your admin. You do not enter URLs here; configure your social profiles in the main Social Media Settings, and they will appear in this block.
Use this to show social icons and links at the top or bottom of the mobile menu.
Editing a block
- On the Mobile Menu Blocks page, find the block in Above Navigation or Below Navigation.
- Click the pencil (edit) icon on that row.
- Change any fields (type, position, sort order, active, or content).
- Click Save Changes.
Deleting a block
- Find the block in the list.
- Click the trash icon.
- Confirm when asked. The block is removed and no longer shown in the mobile menu.
Turning a block on or off (Active)
Use the toggle next to each block:
- On (e.g. green/teal) – block is visible in the mobile menu.
- Off (grey) – block is hidden but not deleted. You can turn it back on later without re-entering data.
Contact Info link types (quick reference)
| Link type | Use for | Result in mobile menu |
|---|---|---|
| No link | Address, opening hours, etc. | Plain text only |
| Phone (tel:) | Phone numbers | Clickable link → opens dialler |
| Email (mailto:) | Email addresses | Clickable link → opens email app |
Summary
- Mobile Menu Blocks add content above or below the main navigation in the mobile menu.
- Open them from Page Management → Mobile Menu Blocks.
- You can use Banner, Contact Info, Text/HTML, and Social Links.
- Contact Info supports multiple items; set Link type (No link, Phone, or Email) for each item so phone and email are clickable and other text stays plain.
- Use Sort Order and Active to control order and visibility without deleting blocks.