Menu
Replace the hardcoded nav and footer menus with Shopify-powered menus.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.
Integrate Shopify-validated Storefront or Customer Account GraphQL into Vercel Shop. Use after Shopify AI Toolkit has supplied and validated an API operation, or when adapting existing GraphQL to the template's operation placement, fragments, domain transforms, locale flow, cache role, invalidation, and route architecture.
Update an existing Vercel Shop storefront with newer template changes. Use when the user wants to check drift, plan an upgrade, or apply template updates to a project scaffolded from Vercel Shop.
Build or adapt a Shopify storefront with Vercel Shop source-backed patterns. Use when creating, redesigning, refactoring, or reviewing storefront routes, commerce data, rendering, caching, streaming, navigation, cart, account, mutations, product cards, media, loading states, or when applying Vercel Shop outside the template.
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.
| 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({ handle: "NAV_HANDLE" });
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({ handle: "FOOTER_HANDLE" });
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: remote" 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: remote", 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.