Svelte Commerce × Shopify
Svelte Commerce on Shopify
The Shopify connector is scored out of 27, not 43: several storefront services have no equivalent in the Shopify API surface it targets. Cart, checkout and sign-in are wired — but every request goes through a proxy route you have to write.
- 16/27 services wired
- @misiki/shopify-connector 1.1.0
- Cart wired
- Checkout wired
- Sign-in (auth) wired
What works on Shopify today
Cart, checkout and sign-in are wired, but it does not run as installed. The connector sends every request to a /proxy/shopify/ route on the storefront’s own server, with the Shopify request path encoded in it, and Svelte Commerce ships no such route — only one for Bagisto. Until you write it, nothing reaches Shopify.
Cart
Wired: issues a real request to Shopify.
Checkout
Wired: issues a real request to Shopify.
Sign-in (auth)
Wired: issues a real request to Shopify.
Known gaps: review, wishlist, vendor, page, profile, country — each is explained under Limitations below.
16 of 27 services wired, read from CONNECTORS.md on , where the package version is recorded too; npm may carry a newer patch. Coverage is traced by a script in the Svelte Commerce repository: a service counts as wired only if it transitively issues an HTTP request, or delegates to one that does. It is not hand-asserted. Some services are Litekart-native concepts with no equivalent elsewhere (reels, deals, chat, gallery, popularity, demo-request, feedback, plugins, banner). They stay documented placeholders on every connector and are excluded from known gaps.
Quick start
From nothing to a Svelte Commerce storefront reading Shopify. You need Node.js and a Shopify to point it at; the storefront holds no data of its own.
Clone it, choose the connector, point it at Shopify
# 1 — get the storefront
git clone https://github.com/itswadesh/svelte-commerce
cd svelte-commerce
# 2 — one connector at a time: remove the two the storefront ships with, add this one
npm uninstall @misiki/litekart-connector @misiki/vendure-connector
npm i @misiki/shopify-connector
# 3 — point it at your Shopify store
echo PUBLIC_SHOPIFY_API_URL=your-store.myshopify.com >> .env
echo PUBLIC_SHOPIFY_ACCESS_TOKEN=shpat_... >> .env
echo PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=... >> .env
# 4 — run it
npm run devThe guide removes only @misiki/litekart-connector. A fresh clone’s package.json also lists @misiki/vendure-connector, and with two connectors installed and neither of them Litekart’s, the build stops and asks for PUBLIC_CONNECTOR — so this removes both. This starts the storefront, but read the limitations: the connector needs a /proxy/shopify/ route that the storefront does not ship.
Environment variables
| Variable | Required | What it does |
|---|---|---|
PUBLIC_SHOPIFY_API_URL | Yes | Your store’s myshopify.com domain. Shopify is keyed on a domain rather than a URL, so any https:// you include is stripped. Boot fails, naming this variable, if it is missing. |
PUBLIC_SHOPIFY_ACCESS_TOKEN | No | The guide’s example is an Admin API access token, shpat_…. Handed to the connector at boot — and to every visitor’s browser; see the limitations. |
PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN | No | A Storefront API access token, handed over the same way. |
PUBLIC_SHOPIFY_PROXY_URL | No | Read at boot and stored by the connector, for stores fronted by a proxy. In 1.1.0 and 1.1.1 the request path is fixed at /proxy/shopify/, so setting it changes nothing yet. |
PUBLIC_CONNECTOR | No | Only when more than one connector is installed: @misiki/shopify-connector names the one this build runs on. |
Shopify is one of four backends init.ts configures by hand rather than by forwarding every PUBLIC_SHOPIFY_* variable: it passes the domain, the two tokens and the proxy URL to setShopifyCredentials, in that order.
Every variable here begins PUBLIC_, and SvelteKit sends PUBLIC_ variables to the browser: treat each value you set as published.
What to set up on Shopify
- Create the access tokens in Shopify: an Admin API token (the guide’s
shpat_…) and a Storefront API token. - Write a server route at
/proxy/shopify/[...path]in the storefront. The connector base32-encodes the Shopify request path into the route’s path and says which API it wants in anX-Shopify-Api-Typeheader —adminorstorefront— but attaches no token itself; the route has to add the right one and forward the request. The storefront’s/proxy/bagisto/route is the nearest pattern to copy.
How the integration works
Shopify is keyed on a store domain rather than a URL. At boot, init.ts strips any https:// from PUBLIC_SHOPIFY_API_URL and passes the domain, the Admin and Storefront tokens and the proxy URL to the connector’s setShopifyCredentials, in both the server and the client hook.
The connector sends every call — Admin API or Storefront API — to /proxy/shopify/<base32-encoded path> on the storefront’s own origin, marked X-Shopify-Api-Type: admin or storefront. It never sends a token itself: the proxy is expected to. Svelte Commerce ships a proxy route of this kind for Bagisto, not for Shopify.
There is no Litekart API behind the storefront here, so store identity — name, logo, currency, menus, plugin toggles, theme colours — comes from src/lib/core/connectors/default-store.json merged under the default export of kitcommerce.config.ts. Until you override it, the store is called “Test”. Any Litekart REST path the connector still inherits is answered from that local data, or resolved empty, rather than requested.
Limitations
- Nothing reaches Shopify until you add a
/proxy/shopify/server route: the connector sends every request there, and the storefront does not ship one. - Scored out of 27 rather than 43: several storefront services have no equivalent in the Shopify API surface this connector targets.
- Reviews: not wired.
- Wishlist: not wired.
- Vendors: not wired.
- CMS pages: not wired — legal and CMS pages render their layout with empty content.
- Profile: not wired.
- Countries: not wired.
- Pages that depend on a service that is not wired render their empty state rather than failing.
- The guide puts an Admin API token (
shpat_…) inPUBLIC_SHOPIFY_ACCESS_TOKEN. SvelteKit sendsPUBLIC_variables to the browser, so every visitor could read it and call Shopify’s Admin API with it. A server route is the place for that token, not aPUBLIC_variable. - Homepage sections other than the live product list come from the active theme’s static content — the standing rule for themes.
- The Conversational Shopping assistant is Litekart-only; its widget stays hidden when another connector is active.
Troubleshooting
| When you see | What to do |
|---|---|
Every call fails with a 404 on /proxy/shopify/… | The storefront has no Shopify proxy route. Add a server route at /proxy/shopify/[...path] that decodes the base32 path, adds the Admin or Storefront token according to X-Shopify-Api-Type, and forwards the request to Shopify. |
| Boot fails with “the shopify connector is active but PUBLIC_SHOPIFY_API_URL is not set” | Add PUBLIC_SHOPIFY_API_URL to .env. A production Node build and Docker read PUBLIC_* from the process environment rather than .env, so set it on your deploy platform too. |
| The build stops with “Several commerce connectors are installed … Set PUBLIC_CONNECTOR to pick one” | More than one @misiki/*-connector is in package.json and none is Litekart’s. Uninstall the ones you do not run — a fresh clone also lists @misiki/vendure-connector — or set PUBLIC_CONNECTOR='@misiki/shopify-connector'. |
| Boot fails with “PUBLIC_…_API_URL is set, but it configures a different backend than the one this build runs on” | Another backend’s variable is still set, usually left over from the one you switched from. Remove it, or install that backend’s connector. PUBLIC_LITEKART_API_URL is exempt: it only points the dev proxy. |
| The store is called “Test”, or shows the wrong name and logo | Store identity is static on this backend. Set name, logo, currencyCode and the rest in the default export of kitcommerce.config.ts; src/lib/core/connectors/default-store.json lists every field. |
[shopify] no native implementation for get /api/... in the console | The connector’s REST guard caught a path inherited from Litekart and answered it empty instead of requesting it. Each path is reported once. Harmless if Shopify has no such feature; if it has one, the fix belongs in the connector’s matching service. |
http proxy error: api/... ECONNREFUSED in dev | A Litekart REST path was requested from outside the connector, so its guard never saw it. Vite proxies /api to PUBLIC_LITEKART_API_URL, or to localhost:7000. |
The build fails on @misiki/litekart-connector | @misiki/kitcommerce-core declares it as a peer, and vite.config.ts redirects that specifier to whichever connector is installed. Make sure exactly one @misiki/*-connector is listed in package.json. |
Before you rely on it
The one caveat that matters
Read this before choosing
Every connector was written by reading its platform’s authoritative source — an OpenAPI spec, a RAML file, a router registration or the controller source — rather than by running against a store. No connector has been exercised against a live production instance of its platform.
Offer a sandbox or a correctionFAQ
Questions about Svelte Commerce on Shopify
Can I run a Shopify store on Svelte Commerce today?
Not as installed. Cart, checkout and sign-in are wired, but the connector sends every request to a /proxy/shopify/ route on the storefront’s server, and Svelte Commerce does not ship one. Writing that route — and keeping the Admin token in it, out of PUBLIC_ variables — is the missing step.
How do I switch Svelte Commerce to Shopify?
Remove the connectors the storefront ships with, install @misiki/shopify-connector, set PUBLIC_SHOPIFY_API_URL in .env and start the dev server. vite.config.ts resolves whichever connector is installed, so no file in the storefront changes.
Why is Shopify scored out of 27 instead of 43?
Several of the storefront’s 43 services have no equivalent in the Shopify API surface the connector targets, so they are not counted. Of the 27 that are, 16 are wired; reviews, wishlist, vendors, CMS pages, profile and countries are the gaps.
Has the Shopify connector been run against a real Shopify store?
Not against a live production instance — no Svelte Commerce connector has been. It was written by reading Shopify’s authoritative API source, and the Svelte Commerce maintainers ask Shopify’s own maintainers for a sandbox to run it against.
Sources
This page summarises SHOPIFY.md in the Svelte Commerce repository and the Shopify connector’s source, read on , and the coverage in CONNECTORS.md, read on . Where they disagree with this page, they are right and this page is out of date. Shopify is a trademark of its owner, named here only to describe compatibility; no endorsement or affiliation is implied — see trademarks.
Read the whole guide
The storefront is the same on every backend; the connector is what changes. SHOPIFY.md has the Shopify setup in full, beside the connector’s source.