Svelte

Build a Shoppex theme with Svelte (still Vite-based)

Svelte Themes

You can build a Shoppex theme with Svelte (for example, @sveltejs/vite-plugin-svelte).

The platform contract stays the same:

• bun install
• bun run build
• build output in dist/index.html

Minimal SDK Wiring (Framework-Agnostic)

// @validate
import shoppex from '@shoppexio/storefront';

shoppex.init('my-shop', { apiBaseUrl: 'https://api.shoppex.io' });

const res = await shoppex.getStorefront();
if (!res.success || !res.data) {
  throw new Error(res.message ?? 'Failed to load storefront');
}

console.log(res.data.products.length);

In Svelte you would typically store the result in a store (or component state) and render it.

Optional: Initial Data Injection

If your index.html contains:

<!--initial-data-->

Shoppex can inject initial data at build time.

Svelte Store Pattern

Use Svelte’s writable stores to manage storefront data:

// stores/store.ts
// In a real Svelte app:
// import { writable } from 'svelte/store'

declare function writable<T>(initial: T): {
  subscribe: (run: (value: T) => void) => () => void;
  set: (value: T) => void;
};

// assumes shoppex is available (via SDK import in your app entry)
declare const shoppex: any

export const storeData = writable(null)
export const products = writable([])
export const isLoading = writable(true)

export async function loadStorefront() {
  const res = await shoppex.getStorefront()
  if (res.success && res.data) {
    storeData.set(res.data.shop)
    products.set(res.data.products)
  }
  isLoading.set(false)
}

Cart Store with Event Listener

A reactive cart store that stays in sync across components:

// stores/cart.ts
// In a real Svelte app:
// import { writable } from 'svelte/store'

declare function writable<T>(initial: T): {
  subscribe: (run: (value: T) => void) => () => void;
  set: (value: T) => void;
};

// assumes shoppex is available (via SDK import in your app entry)
declare const shoppex: any

export const cart = writable([])

// Call this after `shoppex.init()` (for example in your root component's onMount)
export function startCartSync() {
  const refresh = () => cart.set(shoppex.getCart())
  refresh()

  window.addEventListener('shoppex:cart-changed', refresh)
  window.addEventListener('storage', refresh)

  return () => {
    window.removeEventListener('shoppex:cart-changed', refresh)
    window.removeEventListener('storage', refresh)
  }
}

export function addItem(productId, variantId) {
  shoppex.addToCart(productId, variantId)
  window.dispatchEvent(new CustomEvent('shoppex:cart-changed'))
}

Next Steps

Cart & Checkout

Add to cart, coupons, and the full checkout flow.

Theme Settings

Load published settings and apply them via CSS variables.

Theme Config

Define sections and settings in theme.config.ts.

SDK Reference

Complete SDK method reference for themes.