// Replace the hardcoded nav and footer menus with Shopify-powered menus.
Enable next-intl-based i18n in the shop template — locale-prefixed URLs, per-locale message catalogs, and a locale switcher. Use when the user wants "locale URLs", "multi-language", or "i18n" without Shopify Markets integration. For full Shopify Markets multi-region commerce (region-aware pricing, inventory, payments), use `enable-shopify-markets` instead — this skill is the routing/i18n layer only.
Wire Shopify metaobjects as the CMS for homepage and marketing page content. Adds GraphQL queries for cms_homepage and cms_page metaobject types and transforms them into domain types.
Reference Vercel Shop GraphQL patterns, fragments, cache conventions, and transforms for any Shopify GraphQL work in the template.
Enable Shopify Markets with multi-locale routing using next-intl. Use when the user wants to add internationalization, multi-locale support, locale-prefixed URLs, or Shopify Markets. Supports sub-path and per-domain routing strategies.
Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.
Use Shopify AI Toolkit to inspect live Storefront and Customer Account GraphQL schemas for Vercel Shop work.
| name | enable-shopify-menus |
| description | Replace the hardcoded nav and footer menus with Shopify-powered menus. |
By default, the storefront's nav and footer render hardcoded items from lib/config.ts. 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 the data source from navItems / footerItems to a live Shopify menu fetched by handle, with a fallback to the hardcoded items if the menu is missing or empty.
Ask the user two questions in order:
Ask for each selected menu. Defaults: main-menu for nav, footer for footer.
Wait for the user to answer before proceeding.
Skip this section if the user did not select the nav menu.
Edit components/nav/index.tsx. Add the getMenu import and swap the data source:
import { getMenu } from "@/lib/shopify/operations/menu";
Inside Nav, replace const items = navItems; with:
const menu = await getMenu("NAV_HANDLE", locale);
const items = menu?.items ?? navItems;
Replace "NAV_HANDLE" with the handle the user provided. QuickLinks and MobileMenu already accept MenuItem[], so no other component changes are needed. Keep the navItems import as the fallback.
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";
Change the signature to async and replace const items = footerItems; with:
const menu = await getMenu("FOOTER_HANDLE", locale);
const items = menu?.items ?? footerItems;
Replace "FOOTER_HANDLE" with the handle the user provided. FooterMenu already accepts MenuItem[]. Keep the footerItems import as the fallback.
The Footer callsite in app/layout.tsx (or wherever it is rendered) already passes locale; if it is not wrapped in <Suspense>, the menu fetch will block layout render — that is acceptable since getMenu is cached with "use cache" and cacheLife("max"). Wrap in <Suspense> only if you specifically want the rest of the page to stream ahead of the footer.
getMenu() operation in lib/shopify/operations/menu.ts already handles caching ("use cache", cacheTag("menus")) and URL transformation. Do not duplicate that logic.navItems / footerItems fallback so a missing or empty Shopify menu doesn't leave the user with a blank nav or footer.http) are handled by the existing MenuLink helpers in each component — no change needed.