> ## Documentation Index
> Fetch the complete documentation index at: https://docs.komerza.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Installation & Setup
> Install the Komerza client library and initialize your storefront
## Installation
Include the Komerza client library via CDN. Add this script tag to your HTML:
```html theme={null}
```
The library is available globally as `globalThis.komerza` after the script loads.
### CDN Benefits
* **No build step required** - Works with plain HTML/CSS/JS
* **Always up-to-date** - Latest version automatically delivered
* **Fast loading** - Cached globally via CDN
* **Lightweight** - Minimal impact on page load time
## Initialization
Initialize the library with your store ID before using any other functions:
```javascript theme={null}
komerza.init("your-store-id");
```
You **must** call `init()` before using any other `komerza` function. All
other functions will fail if the library hasn't been initialized.
### Finding Your Store ID
Your store ID is available in your Komerza dashboard. It's a unique identifier for your store, typically in UUID format.
### Example
```html theme={null}
My Store
```
## When to Initialize
Call `init()` once when your page loads, before using any other `komerza` methods:
**✅ Good - Initialize on page load:**
```javascript theme={null}
```
**❌ Bad - Using methods before init:**
```javascript theme={null}
```
## Framework Integration
### Vanilla JavaScript
```html theme={null}
```
### React
```jsx theme={null}
import { useEffect } from "react";
function App() {
useEffect(() => {
// Initialize when component mounts
if (globalThis.komerza) {
globalThis.komerza.init("your-store-id");
}
}, []);
return My Store
;
}
```
### Vue
```vue theme={null}
```
### Svelte
```svelte theme={null}
```
## Build Process
The Komerza client library works with any framework or build process-the script runs in the browser regardless of how you build your site.
**Use any framework:**
* Plain HTML/CSS/JS (no build needed)
* React, Vue, Svelte, Angular
* Next.js, Nuxt, SvelteKit, Astro
* Webpack, Vite, Rollup, Parcel
**Hosting requirement:**
To host your storefront on Komerza infrastructure or list it on the theme marketplace, your project must compile to static HTML/CSS/JS files. Server-side rendering at runtime is not supported.
## TypeScript Support
If you're using TypeScript, you can add type definitions:
```typescript theme={null}
declare global {
var komerza: {
init(storeId: string): void;
getStore(): Promise>;
getBasket(): BasketItem[];
checkout(email: string, coupon?: string): Promise>;
// ... other methods
};
}
// Use with types
globalThis.komerza.init("your-store-id");
```
Type definitions are available in the [script.json](/storefront/script.json) file for reference.
## Verification
Verify the library is loaded and initialized correctly:
```javascript theme={null}
// Check if library is loaded
if (typeof komerza === "undefined") {
console.error("Komerza library not loaded");
} else {
console.log("Komerza library loaded successfully");
// Initialize
komerza.init("your-store-id");
// Verify initialization by fetching store
komerza.getStore().then((response) => {
if (response.success) {
console.log("Store loaded:", response.data.name);
} else {
console.error("Failed to load store:", response.message);
}
});
}
```
## Troubleshooting
**"komerza is not defined"**
* Make sure the script tag is loaded before your code runs
* Check browser console for script loading errors
* Verify the CDN URL is correct
**"Komerza.init must be called before using this method"**
* Call `komerza.init()` before using other functions
* Ensure init is called only once per page load
**Store not loading**
* Verify your store ID is correct (check dashboard)
* Check browser console for API errors
* Ensure you're connected to the internet
## Next Steps
Now that you've initialized the library, learn how to use it:
Fetch store details, logo, and banner
Display and manage product listings
Handle shopping cart operations
Process orders and payments