Register WebMCP tools (search, cart, checkout, order) on Shopify with one script tag. Which agents invoke them and the Shopify attribution gap.
WebMCP is the draft browser API for letting in-browser AI agents invoke actions on your site — search products, add to cart, hand off checkout, look up orders. On Shopify it's a one-script-tag install, with the standard four tools auto-wired to your Storefront API.
The honest 2026 read before you install: today's WebMCP-invoking agents are a small set — Perplexity Comet, browser extensions, custom enterprise buying agents — not the mainstream consumer chat apps. ChatGPT and Claude's first-party flows still operate via citation rendering or screen-control, not WebMCP API calls. So shipping the snippet now is a forward investment: you become actionable for the agents that exist today (small but real), and you're ready when the major consumer agents add WebMCP support.
This is the install. What WebMCP changes for Shopify specifically, the four tool surfaces that matter most, the actual snippet you paste into theme.liquid, and where the work begins if you have a non-standard store. If you want the general explainer for what WebMCP is, read that first — this post assumes you know the spec and you're trying to ship it.
Three concrete shifts, when invoked by a WebMCP-aware agent:
searchProducts({ query, maxPrice, features }) and gets a clean array of matches. The agent ranks them by user intent, not by your CSS class names.addToCart({ variantId, quantity }), the cart populates, and the user sees what's in it before they pay. No copy-paste of product URLs across tabs.The story for merchants: when an agent does invoke these tools, it handles the discovery and assembly — the friction-heavy parts of an unfamiliar buying flow — and the human still owns the moment of payment. That's the trust model that makes "agentic commerce" not a security disaster.
You could register a dozen tools. Most stores need exactly four. These are the ones today's WebMCP-aware agents know how to invoke against the Shopify ecosystem:
| Tool | What it does | Shopify API it hits |
|---|---|---|
| searchProducts | Returns products matching query + filters (price, tag, vendor, availability). | Storefront API products query with predicates. |
| addToCart | Adds a variant + quantity to the current cart. Returns updated cart state. | Storefront API cartLinesAdd. |
| checkoutHandoff | Returns a checkoutUrl with the cart loaded — agent shows it to the user to complete payment. | Storefront API cart.checkoutUrl. |
| lookupOrder | Customer-scoped order status check (requires customer access token). | Customer Account API order query. |
That's the standard pack. Stores with subscription products want a fifth (changeSubscription); stores with configurators want a sixth (buildConfiguration); BOPIS stores want a findNearbyStock. The four-tool default covers roughly 90% of standard Shopify catalogs.
You're going to paste one script tag in theme.liquid right before the closing </body>. The snippet bootstraps the WebMCP tool registry, points at your Storefront API, and registers the four standard tools wired to your store's IDs.
From the Shopify admin, go to Online Store → Themes → Edit code → Layout → theme.liquid. Paste this block (replace the two placeholders with your store domain and Storefront API public token — you create the token under Apps → Develop apps → Configure Storefront API access):
<!-- WebMCP Shopify integration -->
<script
src="https://cdn.crawlytics.app/webmcp/shopify/v1.js"
data-shop-domain="your-store.myshopify.com"
data-storefront-token="YOUR_PUBLIC_STOREFRONT_TOKEN"
data-tools="search,cart,checkout,order"
async>
</script>
Save the theme. Open your storefront in a browser with WebMCP support (Chromium-based browsers with the flag enabled, or an agent-first browser like Comet). You can verify the tools are live in the DevTools console:
navigator.modelContext.getRegisteredTools()
// → [{ name: 'searchProducts', ... }, { name: 'addToCart', ... }, ...]
That's the entire install for a default Shopify store. The snippet auto-discovers your Storefront API schema, pulls your active product types, wires the search predicates to your tag taxonomy, and registers the tools. When a WebMCP-aware agent visits, your store is actionable to it.
The Shopify-flavored snippet does a few things you'd otherwise hand-write:
searchProducts({ query: "running shoes size 11", maxPrice: 150 }), the snippet builds the right GraphQL query with product_type, variants.price, and variants.option2 predicates against your shop. You don't write the GraphQL.Size, Color, Material, Style (the four standard Shopify option names), plus any custom ones.lookupOrder uses their access token. If not, the tool returns a friendly "log in to check order status" error the agent can relay.None of that requires custom Liquid. If your theme is stock Dawn, Sense, Studio, or any of the other free themes — or any of the major paid themes (Impulse, Prestige, Motion, Symmetry) — the default tool pack works without modification.
Three patterns where the default snippet isn't enough:
If you sell custom-printed apparel, configured furniture, or build-your-own subscription boxes, the agent needs a buildConfiguration tool that knows your option tree and returns a quote. You write that one tool handler, hook it into your existing configurator state, and register it alongside the defaults.
Default addToCart doesn't know about selling plans. For subscription SKUs you either pass a sellingPlanId through addToCart (the snippet supports this if your products have selling plans defined) or register a separate subscribeToProduct tool that wraps your subscription app's API.
If you run a B2B catalog with company-specific pricing and net-terms checkout, the default Storefront API query misses your customer pricing. You override searchProducts with a handler that queries the Shopify Plus B2B endpoints scoped to the logged-in company.
In each case you're writing 30-60 lines of tool handler, not rebuilding the integration from scratch. The base snippet handles registration, schema, the agent confirmation flow, and the attribution beacon — you supply the function body for the custom tool.
The single most-asked Shopify WebMCP question: "can the agent complete checkout without my customer involved?" The answer is no, and the reason is structural.
The WebMCP spec explicitly forbids agents from entering credit card details or typing passwords. The browser enforces this at the consent layer — when a tool's schema includes a cardNumber or password field, the browser refuses to invoke it. So even a malicious site that tried to register completeCheckout({ cardNumber, cvv }) would have the call blocked.
The Shopify pattern works around the limitation cleanly: the agent assembles the cart, calls checkoutHandoff(), gets back a checkoutUrl like https://your-store.myshopify.com/checkouts/cn/abc123. The agent surfaces that URL to the user. The user clicks. Shopify Payments runs the real checkout — same Apple Pay button, same Shop Pay button, same address autofill — and the user authorizes payment. No PCI scope, no card data through the agent.
For Shop Pay specifically, the flow is even tighter: customers who've previously authorized Shop Pay see a one-tap confirm instead of a full form. That's the agent-friendly checkout the spec is implicitly designed around.
Shopify Analytics will tell you that a sale came from "Direct" or "Other" when an agent drove it. That's because the agent's session has no UTM, no Referer, and no Shopify Sales Channel ID — it's anonymous from Shopify's point of view.
The fix is to capture the agent identifier at the tool layer, where you actually have it. WebMCP invocations carry agent identity in metadata where the implementation exposes it — Comet does; many extensions do too. You log that on the tool call, persist it through the cart token, and attribute the eventual order to the agent that started the journey.
What that gets you, in practice (calibrated to the realistic 2026 volume — small but trackable):
None of that is in Shopify's native reports. Any WebMCP-aware analytics layer can capture it; Crawlytics' Commerce tier ships it as a default dashboard.
If you're on Shopify Plus and you've customized your checkout with Checkout Extensibility, double-check one thing after installing WebMCP: that your custom checkout extensions still fire on the agent-handed-off URL. They should — the checkoutUrl from cart.checkoutUrl uses the same checkout pipeline as a normal cart-to-checkout transition — but if you've got conditional logic gated on a specific session attribute or marketing source, an agent-driven cart may not match that attribute.
Quick test: open your store in a WebMCP-capable browser, manually trigger an agent-style cart build via the DevTools console (navigator.modelContext.invokeTool('addToCart', { ... })), grab the checkoutUrl, walk through it, confirm your extensions render. If they do, you're done. If they don't, the fix is usually adding a fallback condition that catches the agent-source attribute the WebMCP layer sets.
Written by Crawlytics Team. Crawlytics tracks AI bots, generates llms.txt, and powers WebMCP commerce, all from one snippet on any stack. See how it works →
Yes. All Shopify plans have access to the Storefront API, which is the only API the standard tool pack needs. No Shopify Plus required for the install.
The snippet is ~12KB gzipped and loads async. It does not block render and does not run any code until an agent actually invokes a tool. Real-user perf impact is negligible.
No, and this is by design. The WebMCP spec carves out payment and authentication — agents cannot enter card details. The Shopify pattern is agent assembles cart → agent hands off URL → human pays. Shop Pay one-tap is the closest thing to "agent buys it for you" and even that requires the customer's prior Shop Pay authorization.
Yes. The default snippet uses Shopify's buyer-context query, so prices, currencies, and product availability returned to the agent match what the customer would see based on their region. If you have Markets-specific catalogs (different SKUs per region), the snippet respects that automatically.
Today, primarily: Perplexity Comet, browser extensions with built-in agents, and custom enterprise buying agents. ChatGPT and Claude's first-party apps don't currently invoke WebMCP — they use citation rendering or screen-control. The mainstream consumer agent rollout is the 6-12 month bet you're making by installing now. If you need conversion volume today, prioritize llms.txt and earning AI citations first; ship WebMCP as the next layer.
You don't, natively — Shopify Analytics aggregates agent traffic into Direct/Other. You need a layer above that captures the agent ID at the WebMCP tool call and persists it through the cart. The free DIY version: write a small app that listens for cart-create events, tags the cart with the agent metadata, and writes order-level notes you can filter in reports. The paid version: Crawlytics' Commerce dashboard does it as a default chart.
This page is part of Crawlytics.app. View all pages: llms.txt · llms-full.txt