Extending with Agents

Coding agents can build and extend your storefront. Every project includes the Shop skills and AGENTS.md conventions, so an agent works with the same patterns and verification steps your team uses.

Set up the agent

New projects include the Shop skills in .agents/skills/. Claude Code reads them through the .claude/skills link in the same project. To add the Shop skills to an existing storefront, run this from its root:

pnpm dlx skills add vercel/shop --skill '*' --yes

Also install these for your agent:

Vercel plugin for Vercel platform guidance and skills:
```
npx plugins add vercel/vercel-plugin
```
Shopify AI Toolkit for current Shopify documentation, API schemas, and operation validation. The Shop skills rely on it before adding or changing Shopify GraphQL. Follow Shopify's install instructions for your agent.

Use an agent that reads AGENTS.md and supports project skills, such as fx, Claude Code, Cursor, or Codex.

Give the agent a focused task

State the outcome, placement, data source, constraints, and expected verification. For example:

Add a size guide below the product description.
Read it from the product metafield custom.sizing_guide.
Hide the section when the metafield is empty.
Run the relevant checks and verify the product page in a browser.

Ask the agent to propose its plan before editing when the change spans several parts of the storefront. Include exact errors when asking it to fix a failure.

Use storefront skills

Skills provide task-specific instructions and checks. Ask your agent to use a skill by name, such as enable-shopify-markets, or run it as a slash command in Claude Code:

/enable-shopify-markets

You can also describe the outcome and let the agent pick the matching skill. Use the update-shop skill when bringing an existing storefront up to date.

Skill	What it does	Shopify docs
Initialize Vercel Shop	Create a storefront from the template and connect a Shopify store.
Build with Vercel Shop	Build or adapt storefront routes, commerce data, and rendering with template patterns.
Update Vercel Shop	Compare a storefront with the current template and apply the updates you choose.
Shopify GraphQL integration	Add Shopify-validated Storefront or Customer Account GraphQL using template conventions.	Storefront API
Enable analytics	Add Vercel Web Analytics, Speed Insights, and Google Tag Manager.
Enable i18n	Add locale-prefixed URLs and per-locale copy with next-intl, without Shopify Markets.
Enable Shopify Markets	Add multi-region locales, currency, and localized commerce context.	Markets
Enable Shopify menus	Replace the hardcoded nav and footer with Shopify-managed menus.	Menus and links

What’s next

Start with a contained storefront change, such as adding a product metafield, adjusting navigation, or changing a merchandising section. For repeated work, turn your preferred conventions and checks into a project skill so future agent changes follow the same approach.