Skip to main content
Swish works with any headless Shopify storefront that renders with React. The setup requires two packages:
  • @swishapp/react - React provider and hooks that load the SDK and give your components access to saved items, lists, counts, and intents.
  • @swishapp/auth-proxy - A small server-side helper that securely creates Swish API tokens using your app secret.

​
How it differs from themes

On Shopify themes, the Swish app embed handles everything automatically - loading the SDK, creating tokens through the Shopify app proxy, and injecting UI components. Headless storefronts don’t have an app proxy, so you need to:
  1. Host a token endpoint on your server using @swishapp/auth-proxy. This replaces the automatic token creation that themes get for free.
  2. Wrap your app in SwishProvider with your storefront credentials and the URL of your token endpoint.
  3. Use hooks like useSwishItem and useSwishItemCount to build your UI.
Once set up, the SDK handles the same features as on themes - save buttons, wishlists, notifications, and the full Swish drawer.

​
Install packages

​
Framework guides

Follow the guide for your framework to set up the auth proxy and provider.

Hydrogen

Shopify’s React framework with built-in Storefront API access.

Next.js

App Router setup with Route Handlers and server components.
Using a different framework? The pattern is the same for any React app - expose @swishapp/auth-proxy on a server route and pass its URL to SwishProvider. See the auth proxy reference for the full configuration.