Browser

JS library to integrate Swish into a browser environment.

JavaScript library for integrating Swish on a Shopify web store (themes and headless stacks).

Requirements

This library depends on the following browser APIs.

• Fetch API

• Service Worker API

• Web Workers API

Swish App Proxy

The Swish browser library requires a proxy service that operates on the same domain as the store. This service facilitates the loading of additional resources and ensures secure communication with the Swish API. The app proxy is automatically provided once the app has been installed.

If your store has it's own server (e.g. headless stack), then you will need to implement the proxy first. Please use the Node.js library to implement the app proxy.

Installation

To load the Swish app, you can either activate the Swish embed through your theme editor or install it via NPM. We recommend using the app embed for most scenarios. For headless stacks, NPM is necessary.

Usage

import { swishApp } from "/apps/wishlist/assets/swish.js";

const swish = await swishApp({
  proxy: {
    baseUrl: "/apps/wishlist"
  }
});

const { data } = await swish.api.items.list();

Reference

Swish API

All Swish API functions can be accessed and are automatically scoped to the current user.

const { data } = await swish.api.items.list();

Please refer to the Swish API Client docs for a comprehensive list of available functions.

Swish UI Components

This feature is still under development!

To accelerate development, consider using our built-in UI components. These components follow a general design language and allow for some customisation. For a completely tailored user experience, creating your own UI components is recommended.

Our components load only when needed, enabling you to blend custom UI elements with our standard components without impacting your page speed.

await swish.ui.showSignIn({
  returnTo: window.location.pathname
});