---
title: Build a browsable food menu from your Shopify products and show it anywhere on your storefront
description: "The **Food Menu** turns your Shopify products into a beautiful, browsable menu you can drop onto any page of your storefront. Diners can browse dishes by section, pick options and quantity, add to cart, and check out through your store's…"
url: "https://www.apselo.com/docs/kb/build-a-browsable-food-menu/"
updated: "2026-07-09"
category: Reservics / Food Menu
---

# Build a browsable food menu from your Shopify products and show it anywhere on your storefront

The **Food Menu** turns your Shopify products into a beautiful, browsable menu you can drop onto any page of your storefront. Diners can browse dishes by section, pick options and quantity, add to cart, and check out through your store's normal Shopify Checkout.

It's a completely separate storefront block from the reservation widget. Adding a menu never changes, slows, or interferes with your reservation flow, and the menu code only loads on pages where you actually place the block.

> **At a glance**
>
>
>
> - Menu sections come from your Shopify **collections**
> - Dishes come straight from your **products** (image, description, price)
> - Ordering uses your store's **own cart and checkout**: no extra fees, no new checkout
> - Requires only the **read products** permission
> - Layout and appearance are chosen **per placement** in your theme

## How it works

There are two places you'll touch:

1. **The Reservics app**: you choose *which* products appear (by picking collections) and whether the menu is live.
2. **Your theme editor**: you place the **Food Menu** block on a page and choose *how* it looks (layout, image, description, colours).

That split lets the same menu look different on different pages.

[How to Add a Food Menu to Shopify with Add-to-Cart | Reservics](https://www.youtube.com/embed/yIRV05j2sr0?feature=oembed)

## Step 1: Prepare your products

The menu is built from your existing Shopify catalogue, so first make sure your dishes are set up in Shopify:

- Each dish is a **product**.
- A product must be **Active** and **available for sale** (in stock, or set to "continue selling when out of stock") to appear on the menu.
- Group your dishes into **collections**, for example *Starters*, *Mains*, *Drinks*. **Each collection becomes a section (tab) on your menu.**

Both manual and automated (smart) collections work.

## Step 2: Choose your collections in the app

1. Open the **Reservics** app in your Shopify admin.
2. Go to **Food Menu**.
3. Click **Add collections** and pick the collections you want on the menu.
4. Reservics pulls in the products from each collection automatically. Give it a few seconds, and you'll see a dish count next to each collection.

Each collection you add becomes a section on the storefront menu, in the order you arrange them.

> To change the sections later, come back to **Food Menu → Manage collections**.

## Step 3: Make the menu live

On the **Food Menu** page, use the **Storefront** card:

- **Show on storefront**: the menu is live and will render wherever you've placed the block.
- **Hide from storefront**: the block stays on your theme but shows nothing to customers.

## Step 4: Add the block to your theme

1. In your Shopify admin, go to **Online Store → Themes → Customize**.
2. Navigate to the page where you want the menu (for example a "Menu" page).
3. Click **Add section** (or **Add block**) and choose **Food Menu** from the **Apps** list.
4. Position it where you'd like, then **Save**.

You can add the Food Menu block to **more than one page**, and each placement can use its own layout and settings.

## Step 5: Choose the layout & appearance

With the Food Menu block selected in the theme editor, you'll find these settings.

### Layout & display

| Setting | What it does |
| --- | --- |
| **Layout** | How dishes are arranged (see the layouts below) |
| **Show product image** | Show or hide the dish thumbnail |
| **Show description** | Show or hide the product description |

**Layouts:**

- **Two columns**: image and details, two dishes per row. Great for a rich, visual menu.
- **Single column**: one wide row per dish.
- **Simple list**: compact, text-only rows. Clean and fast.

> **Plan note:** *Single column* and *Two columns* are part of the **Pro** plan. On the **Free** plan the menu always shows the **Simple list** layout. If you pick a Pro layout on the Free plan, you'll see a reminder in the theme editor and the menu will show the simple list until you upgrade. (Your customers never see that reminder.)

### Heading & style

| Setting | What it does |
| --- | --- |
| **Heading** | Optional title shown above the menu (e.g. "Our Menu") |
| **Heading alignment** | Left, center, or right |
| **Accent color** / **Accent text color** | Colours for prices, buttons and highlights |
| **Corner radius** | Roundness of cards and buttons |
| **Vertical margin** | Space above and below the block |

## How ordering works

The Food Menu uses **your store's own cart and checkout**. There's nothing new for your customers to learn, and no extra fees.

- **Simple dishes** (one option): the diner sets a **quantity** and taps the cart button to add it straight to the cart.
- **Dishes with options** (size, flavour, and so on): a window opens with a **photo gallery**, **dropdowns for each option**, a **quantity** picker, and an **Add to cart** button.
- Tapping a dish's **title or image** opens its full product page.

After a diner adds a dish:

- Your theme's own **cart drawer** opens automatically (on most modern themes).
- A **sticky summary bar** appears at the bottom with the running total, **View cart**, and **Checkout**.
- **Checkout** goes to your normal **Shopify Checkout**.

> On a few older or heavily customised themes that don't have a slide-out cart, the drawer may not pop open. The bottom summary bar and **View cart** button always work, and items are still added correctly.

## Keeping the menu up to date

The menu stays in sync with your Shopify catalogue **automatically**. You don't normally need to do anything:

- **Edit a product** (name, price, image, options, availability): the menu updates within seconds.
- **Delete a product**: it's removed from the menu.
- **Add or remove products in a collection**, or edit a collection: that section re-syncs.

### When to use "Sync now"

There's one edge case worth knowing: if you add a **brand-new product** to an **automated (smart) collection**, Shopify doesn't always notify us right away. If a new dish doesn't appear:

1. Go to **Reservics → Food Menu**.
2. Click **Sync now**.

That refreshes every linked collection immediately.

## Plans

| Feature | Free | Pro |
| --- | --- | --- |
| Simple list layout | ✓ | ✓ |
| Single column layout | ✗ | ✓ |
| Two columns layout | ✗ | ✓ |
| Collections, add-to-cart, checkout | ✓ | ✓ |

Upgrade any time from **Reservics → Plans**. Layouts unlock instantly, with no need to reconfigure anything.

---

## Troubleshooting

**A dish isn't showing up**

- Confirm the product is **Active** and **available for sale** in Shopify.
- Confirm it's in one of the collections you've added to the menu.
- If it's a new product in an **automated collection**, click **Sync now** (see above).

**The thumbnail is missing**

- Make sure the product has an image in Shopify. The menu uses the product's featured image.

**I picked "Two columns" but it shows as a simple list**

- The single- and two-column layouts require the **Pro** plan. Upgrade to unlock them; the Free plan shows the simple list.

**The side cart doesn't slide open on my theme**

- Some custom themes don't have a slide-out cart. The bottom summary bar and **View cart** button always work, and the item is still added to the cart.

**Nothing shows on the page at all**

- Check that the menu is set to **Show on storefront** in the app.
- Check that the **Food Menu** block is added and saved on that page in your theme.

## Frequently asked questions

**Does the Food Menu affect my reservations?**
 No. It's a completely separate storefront block. Adding, changing, or removing a menu can never affect your reservation widget or bookings.

**Will it slow down my store?**
 No. The menu's code only loads on pages where you've placed the block. Pages without it are untouched.

**What permissions does it need?**
 Only permission to **read your products**. Ordering uses your store's own cart and checkout, so no extra access is required.

**Can I show a different layout on different pages?**
 Yes. Layout and display settings live on the block, so each placement can look different.

**Do diners pay through a separate system?**
 No. Everything goes through your normal Shopify cart and Shopify Checkout.