skills.rest
vercel
vercelOFFICIAL
Explore all skills by this author →
Website𝕏@vercelGitHub

enable-shopify-menus

Replace hardcoded Next.js storefront navigation with Shopify Storefront API menus.

45|12|Updated Mar 9, 2026
Search Tags:#typescript#frontend#react#navigation#nextjs#shopify#megamenu
One-click install
npx skills add https://github.com/vercel/shop --skill enable-shopify-menus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: enable-shopify-menus
Source: https://github.com/vercel/shop/tree/main/packages/plugin/skills/enable-shopify-menus
Command: npx skills add https://github.com/vercel/shop --skill enable-shopify-menus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Replaces hardcoded navigation and footer with Shopify-powered menus, enabling dynamic updates without code changes.

Core Features & Use Cases

  • Fetches header navigation and footer menus from Shopify and renders them across locales.
  • Optionally adds a megamenu component for multi-level navigation.
  • Improves maintainability by syncing menu content with Shopify metaobjects and Markets.

Quick Start

Configure the storefront to fetch Shopify navigation and footer menus and optionally enable a megamenu.

Frequently Asked Questions about enable-shopify-menus

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fetch Shopify menus dynamically in a Next.js storefront?▼

You can fetch Shopify menus dynamically in a Next.js storefront by using the Shopify Storefront API. This Skill replaces hardcoded navigation with a getMenu operation that caches and renders dynamic menus across multiple locales.

Can I add a megamenu to my Shopify Next.js navigation?▼

Yes, you can add a megamenu to Shopify Next.js navigation. This Skill provides an optional megamenu component for multi-level navigation, syncing content directly with Shopify metaobjects and Markets.

How do I replace hardcoded storefront navigation with Shopify-powered menus?▼

To replace hardcoded storefront navigation with Shopify-powered menus, this Skill fetches header and footer menus via the Storefront API. It enables dynamic updates across locales without requiring manual code changes.

Does this Shopify menu integration support multiple locales and contexts?▼

Yes, this Shopify menu integration supports multiple locales and contexts. It fetches and renders dynamic header navigation and footer columns across different locales using the existing getMenu caching operation.

What are the prerequisites for implementing Shopify dynamic menus in Next.js?▼

To implement Shopify dynamic menus in Next.js, your storefront must use the Shopify Storefront API. This Skill provides a guided, multi-step integration workflow relying on frontfront-defined configurations in your SKILL.md file.

Related Skills

Explore More Software Engineering Skills→
tomtoto757tomtoto757
14

shopify-storefront-api

Query products and manage carts via the Shopify Storefront GraphQL API.

Community
Intermediate
jiaiyanjiaiyan
8

n-page-header

Render reusable page header UI with title, subtitle, and action slots for Naive UI pages.

Community
Intermediate
vercelvercel
45

enable-shopify-cms

Configure Shopify metaobject CMS content with GraphQL queries for homepage and marketing pages.

Official
Advanced
hanabi-jpnhanabi-jpn
3

Shopify Japan

Automate Shopify store management in Japan via Admin and Storefront APIs.

Community
Advanced