How does the storefront menu widget work?

The widget appears on the Shopify product page through the Meal Kit Widget app embed. It lets customers pick meals for upcoming weeks and check out with the selected subscription plan.

Steps

1. Enable the Meal Kit Widget app embed in the current Shopify theme, and add the Purchase options block to your product page.
2. Preview the connected meal plan product page.
3. Choose a plan variant on the product page.
4. Select meals for the available menu weeks, up to the variant's Max meals selectable.
5. Click Checkout to add the subscription product and selected meals to cart, then continue to Shopify checkout (or stop at the cart page — see Settings → Storefront pages).

Frequently asked questions

Where does the widget run?

The customer-facing widget is served through the Shopify app proxy at /apps/menus and is backed by menu-proxy.

Can the menu page show my store's header and footer?

Yes. In Settings → Storefront pages, turn on 'Render inside my theme'. The menu page and customer portal then display inside your theme with your header, footer and fonts, instead of as standalone pages. This is included from the Growth plan. Your theme's styles can affect how they look, so preview after enabling; changes take up to a minute to apply.

My menu is long and customers lose the checkout button when they scroll

In Settings → Storefront pages, turn on 'Keep the checkout button on screen'. The checkout button and the meal counter then sit in a bar pinned to the bottom of the menu page, so a customer working down a long menu can always see how many meals they've picked and check out without scrolling back up; the bar comes to rest above your footer at the end of the menu. It applies to the menu page customers reach before subscribing. Leave it off and the button stays above the menu, where it has always been.

Can customers land on my cart page instead of going straight to checkout?

Yes. In Settings → Storefront pages, set 'When customers finish picking their meals' to 'Send them to the cart page'. The menu page button then reads 'Add to cart' and takes customers to your cart page, where they can see anything you offer there — upsells, order notes, discount codes or delivery instructions — before they continue to checkout. The default sends them straight to Shopify checkout, which is the shortest path to an order. Either way the plan and the selected meals are added to the cart the same way.

Customers are starting several subscriptions instead of planning ahead on one

This happens when a shopper who already subscribed comes back to the menu page to pick next week's meals: the menu page they land on is the buy flow, so checking out there starts a second subscription and a second charge. In Settings → Storefront pages, turn on 'Only let new customers pick meals for the first week'. Later weeks stay on the page so shoppers can still see what is coming, but they become read-only previews and only the first delivery can be filled in. After checkout, customers choose the following weeks from their account — in the customer portal, or in Shopify's customer account if you use the Servd subscriptions extension. It applies to new subscriptions only: one-time purchases and customers editing an existing subscription keep every week selectable. Note that with it on, a shopper can no longer start their subscription on a later week; if that matters to you, leave it off.

Why can a customer only choose a certain number of meals?

The app reads the selected plan variant and limits choices to the Max meals selectable you set for that variant in Meal plans.

How do per-dish options work for the customer?

With 'Enable per-dish options' on (Menus → Settings, a Pro feature), a dish that has Shopify variants shows a selector per option — for example Choose your protein and Choose your grain. Picking the last option adds that dish to the order straight away, so there is no separate Add step; any option that has only one possible value is preselected. The chosen values stay highlighted on the card, so customers can always see what they picked. Changing an option on a dish they have already taken removes that dish from the order (the count drops to zero) and leaves the new choice selected, so they decide the quantity again — one dish always stays on one combination. With 'Allow choosing the same recipe multiple times' on, the +/− stepper adds more of the combination they chose. Dishes without variants keep the normal Add to order button.

How do shoppers pick the same recipe more than once?

Turn on 'Allow choosing the same recipe multiple times' for the plan in Meal plans. Each recipe then shows a quantity stepper (− and +) instead of a single Add button, so a shopper can take, for example, the same dish six times in a six-meal box. The total still cannot exceed Max meals selectable. With the setting off, each recipe can be added once.

How are meals and servings shown at checkout?

Each chosen recipe is added as a line item note with its delivery date. Plans with a servings dimension include the serving count (for example '2 servings on 06/22/2026'); plans without servings show just the date. If a recipe is chosen more than once, the note adds '× 2'.