Mobile Menu Blocks

Mobile menu blocks add content above or below the navigation items in your store's mobile menu — a banner, contact details, your own text or social media links. Customers see them when they open the menu (the hamburger icon) on a phone or tablet.

Path: Engage › Design › Canvas › Header › Mobile menu › Edit mobile menu blocks (/admin/mobile-menu-blocks)

The link in Canvas opens the blocks screen in a new tab, so your Canvas draft stays open. The look of the menu itself (opening animation, panel width, colours, font weights) is set directly in Canvas — see Canvas.

Blocks are saved straight away

Mobile menu blocks are not part of the Canvas draft. A block you save, change or delete shows in the store immediately, without publishing.

The screen has two parts: Above Navigation (blocks before the menu links) and Below Navigation (blocks after the links). Each shows its number of blocks and an Add Block button.

Adding a block

1. In the part where the block belongs, click Add Block.
2. Choose the Block Type (see below).
3. Check the Position (Above navigation / Below navigation), enter the Sort Order (lower number = higher in the menu) and keep Active switched on.
4. Fill in the block's content and click Add Block.

On an existing block:

• the switch shows or hides the block without deleting it,
• the pencil opens editing (Edit Block › Save Changes),
• the bin deletes the block after confirmation (Delete this block?).

You change the order of blocks within one part with the Sort Order number.

Block types

Banner

• Image URL (required) — pick the image from the media library with Select from Library.
• Link URL (optional) — where the banner leads when clicked, e.g. to a sale.
• Overlay Text (optional) — a short text over the image.

Contact info

One block can hold several contact items (phone, e-mail, address, opening hours…). For each one you fill in:

• Icon (Iconify name) (optional) — e.g. heroicons:phone, heroicons:envelope,
• Label (required) — e.g. "Phone",
• Value (required) — the number, e-mail or text itself,
• Link type — No link (plain text), Phone (tel:) (tapping dials the number) or Email (mailto:) (opens the e-mail app).

Add another item with Add contact item and remove one with Remove. The link type is not guessed from the value — always choose it yourself.

Text / HTML

• HTML (required) — your own content, e.g. a short notice or a link to the terms and conditions. Keep it short so the menu stays clear.

Social links

• Heading (optional) — e.g. "Follow us".
• The links themselves are pulled automatically from System › Additional Settings › Social Media Links — you do not enter them here. The Social Media Settings link in the block window opens that screen in a new tab.

Tips

• Check the result in Canvas: switch the preview to mobile and open the menu.
• To hide a block only for a while (e.g. a seasonal sale), switch it off instead of deleting it.