# Shopify SvelteKit Storefront — Svelte Commerce Connector

> Svelte Commerce on Shopify: 16 of 27 services wired, with cart, checkout and sign-in — but it needs a /proxy/shopify/ route the storefront does not ship.

- Canonical: https://kitcommerce.store/svelte-commerce/backends/shopify/
- Last updated: 2026-09-25

---

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](https://github.com/itswadesh/svelte-commerce/blob/main/docs/CONNECTORS.md) on 21 September 2026, 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 dev
```

The 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

*What Svelte Commerce reads to reach Shopify*

| 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 an `X-Shopify-Api-Type` header — `admin` or `storefront` — 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_…`) in `PUBLIC_SHOPIFY_ACCESS_TOKEN`. SvelteKit sends `PUBLIC_` 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 a `PUBLIC_` 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

*Errors you may meet running Svelte Commerce on Shopify, and what fixes them*

| 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 correction](https://github.com/itswadesh/svelte-commerce/discussions/new/choose)

FAQ

### 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 25 September 2026, and the coverage in CONNECTORS.md, read on 21 September 2026. 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](https://kitcommerce.store/about/#trademarks).

- [SHOPIFY.md — the full guide for Shopify](https://github.com/itswadesh/svelte-commerce/blob/main/docs/SHOPIFY.md)
- [CONNECTORS.md — coverage for all 26 connectors](https://github.com/itswadesh/svelte-commerce/blob/main/docs/CONNECTORS.md)
- [@misiki/shopify-connector on npm](https://www.npmjs.com/package/@misiki/shopify-connector)
- [Shopify](https://www.shopify.com)

### 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.

[The Shopify guide on GitHub](https://github.com/itswadesh/svelte-commerce/blob/main/docs/SHOPIFY.md) · [All 26 backends](https://kitcommerce.store/svelte-commerce/backends/) · [KitCommerce vs Shopify](https://kitcommerce.store/compare/kitcommerce-vs-shopify/) · [Shopify India vs KitCommerce](https://kitcommerce.store/compare/shopify-india-vs-kitcommerce/)