FW Food Menu – Documentation

Mobile Menu Design Template

The Mobile Menu design template is a mobile-first layout built specifically for touch interaction. Every component — item cards, navigation, pagination, and cart elements — is sized and arranged for small screens, making it the strongest choice when your menu is primarily accessed from a smartphone.

Ideal Use Cases

• QR code table menus — place a QR code on each table so guests can browse and order directly from their own phones without requiring a printed menu.
• Mobile-only menu pages — a dedicated page or subdomain designed exclusively for mobile visitors.

How to Activate

1. Install the Mobile Menu addon via FW Food Menu → Addons.
2. Enable the corresponding plugin in the Plugin Manager.
3. Open Settings → General → Theme and select Mobile Menu.

Only one design template plugin can be active at a time. Activating Mobile Menu will replace any previously active design template.

What the Template Covers

The Mobile Menu template provides layout overrides across all key areas of the menu:

• Menu listing — full-width item cards optimised for touch scrolling.
• Item detail view — single item page with large tap targets for easy interaction on small screens.
• Module templates — compact layouts for menu modules placed in mobile positions.
• Pagination — touch-friendly controls sized for finger navigation.
• Plugin overrides — cart, image, and other plugin layouts adapted for mobile display.

Desktop Compatibility

Although designed mobile-first, the template is fully responsive and renders correctly on desktop browsers. Visitors accessing your menu from a larger screen will not encounter broken layouts.

Recommended Companion Plugin

The Mobile Menu template works well alongside the Tab Categories plugin, which adds tab-based category navigation — a pattern well suited to mobile browsing where scrolling through a long category list is less convenient than switching between tabs.