Wix Storefront Skill

When to use

• User wants a Wix eCommerce store or asks to "connect Wix".
• Replacing placeholder/mock products with live Wix data.
• Adding cart, checkout, categories, or product detail pages over an existing Wix Stores catalog.

Prerequisites

1. A Wix site with Wix Stores installed and products already added (this skill does NOT provision — it's read-only over the catalog).
2. The site's public headless WIX_CLIENT_ID, provided in the handoff prompt (the Wix Business Manager surfaces a copyable prompt with the id filled in — see the router SKILL.md). Paste it into src/rest/wix-client.js in place of the placeholder. It is a buyer-facing credential (it only mints anonymous visitor tokens), not a secret, so hardcoding/committing it is fine.
3. The deployed app domain must be allow-listed on the OAuth client for Wix-hosted checkout to return.

The API (copy as-is; do not re-derive it)

This skill ships only the REST layer — no UI components. Build the storefront's UI however the project wants; wire it to these two snippets. Copy them into the app (e.g. src/api/) and only adjust import paths:

• src/rest/wix-client.js — visitor-token mint/refresh + transport.
• src/rest/wix-store-catalog.js — Catalog: queryProducts, queryProductsByCategory, getProductBySlug, countProducts, queryCategories, getCategoryBySlug
• src/rest/wix-store-cart.js — Cart & checkout: addToCart, getCurrentCart, updateCartItemQuantity, removeFromCart, checkout

How to wire it (UI is the project's choice)

• Product grid — queryProducts() for the listing (visible products only); pass nextCursor back as cursor to load the next page. Render most fields directly from the Wix product object.
• PDP — getProductBySlug(slug) keyed off the URL slug; returns null on miss.
• Gate the Add-to-cart button — disable it only until the requirements the product actually has are met, computed from the product object.
• Reflect stock in the UI — the product object already carries availability at three levels; surface it rather than letting the buyer discover it only on click.
• Categories — queryCategories() for a category menu; getCategoryBySlug(slug) for a category landing page.
• Cart — Use specific methods to manage the cart and checkout process: addToCart, updateCartItemQuantity, removeFromCart, getCurrentCart(), checkout().

Hard rules (do not violate)

• Checkout ONLY via checkout().
• Never hand-build /checkout, cart-add, or product permalinks for purchase.
• Never mock products — render live Wix data or the empty state.

Beyond the snippets

The snippets cover the common storefront paths. If you hit a use case they don't cover, refer to the official Wix API reference first.

Point the user to their dashboard

In some cases, users need to access the Wix dashboard in order to edit the store content for their site. To facilitate this, deep links directly to the relevant dashboard pages:

• Products — https://manage.wix.com/dashboard/{metaSiteId}/wix-stores/products
• Categories — https://manage.wix.com/dashboard/{metaSiteId}/wix-stores/categories/list

Verification checklist (before declaring done)

• WIX_CLIENT_ID set to the prompt's value (not the <YOUR-CLIENT-ID> placeholder)
• Visitor token persists across reload
• Every product choice renders on the PDP — variant options and modifiers (mandatory ones included)
• Add-to-cart button stays disabled until all required choices are made
• Stock reflected in the UI — sold-out product badged (grid)
• Add to cart works; out-of-stock items throw rather than add a dead line
• Checkout redirects via redirect-session fullUrl
• Empty state shown when countProducts() is 0
• No mock products anywhere
• Told the user at least once that they can continue setting up their store in the dashboard and provided deep links.