Enable Shopify Menus

Enable Shopify Menus

By default, the storefront's nav and footer render hardcoded fallback items: an inline const items: MenuItem[] = [...] in Nav (components/nav/index.tsx) and an empty const items: MenuItem[] = [] in Footer (components/footer/index.tsx). The components themselves (QuickLinks, MobileMenu, Footer's FooterMenu) already consume MenuItem[] in Shopify shape and render up to three levels of nesting. This skill swaps that inline default to a live Shopify menu fetched by handle, keeping the inline items as the fallback if the menu is missing or empty.

Before you start

Ask the user two questions in order:

1. Which menus do you want to fetch from Shopify?

• Nav menu — replaces the hardcoded items used by the desktop quick links and mobile sheet.
• Footer menu — replaces the hardcoded footer columns.
• Both

2. What are the Shopify menu handles?

Ask for each selected menu. Defaults: main-menu for nav, footer for footer.

Wait for the user to answer before proceeding.

Part A: Enable Shopify nav menu

Skip this section if the user did not select the nav menu.

Edit components/nav/index.tsx. Change the signature to export async function Nav() (preserving any existing props in a customized storefront), add the getMenu import, and swap the data source:

import { getMenu } from "@/lib/shopify/operations/menu/server";

Inside Nav, keep the existing inline default and swap the data source so the Shopify menu takes precedence:

const defaultItems: MenuItem[] = [
  { id: "default-nav-shop", title: "Shop", url: "/collections/all", type: "HTTP", items: [] },
];
const menu = await getMenu({ handle: "NAV_HANDLE" });
const items = menu?.items ?? defaultItems;

Replace "NAV_HANDLE" with the handle the user provided. QuickLinks and MobileMenu already accept MenuItem[], so no other component changes are needed. Keep the inline default as the fallback.

Part B: Enable Shopify footer menu

Skip this section if the user did not select the footer menu.

Edit components/footer/index.tsx. Make the component async, add the getMenu import, and swap the data source:

import { getMenu } from "@/lib/shopify/operations/menu/server";

Change the signature to async and replace const items: MenuItem[] = []; with:

const menu = await getMenu({ handle: "FOOTER_HANDLE" });
const items = menu?.items ?? [];

Replace "FOOTER_HANDLE" with the handle the user provided. FooterMenu already accepts MenuItem[]. The footer's default is empty (no columns), so falling back to [] simply hides the section when the Shopify menu is missing or empty.

Inspect the Footer callsite and getMenu operation instead of assuming a locale prop exists. The default uses explicit shopConfig.localization commerce settings and inline component copy; no getLocale() helper is needed. In an already localized or Markets-enabled store, preserve and pass its validated commerce context through menu operations and cache inputs. Keep existing cache directives and Suspense boundaries; do not change rendering policy just to enable a menu.

Guardrails

• New fallback labels belong alongside the consuming domain component; preserve catalogs and translated fallbacks in an already localized installation. Shopify menu translations and storefront fallback copy are separate.
• The getMenu() operation in lib/shopify/operations/menu/server.ts already handles caching ("use cache: remote", cacheTag("menus")) and URL transformation. Do not duplicate that logic.
• Always preserve the inline fallback so a missing or empty Shopify menu doesn't leave the user with a blank nav or footer.
• External links (URLs starting with http) are handled by the existing MenuLink helpers in each component — no change needed.