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.
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.

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. Your theme's styles can affect how they look, so preview after enabling; changes take up to a minute to apply.

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 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'.