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

# Introduction

> Build custom storefront templates with the Komerza client library

## What is Storefront Development?

Komerza lets you build fully custom storefronts using any web technology you prefer. Create your store with HTML, CSS, and JavaScript-or use frameworks like React, Vue, or Svelte-and host it directly on Komerza's infrastructure.

Your storefront imports the **Komerza Client Library**, a lightweight script that handles all the e-commerce functionality:

* **Store & Products** - Fetch store info, products, variants, and reviews
* **Shopping Cart** - Manage cart state, quantities, and selections
* **Checkout** - Create orders and redirect to hosted payment pages
* **Analytics** - Automatic tracking for views and conversions (no code required)

## Why Build on Komerza?

<CardGroup cols={2}>
  <Card title="Complete Design Freedom" icon="palette">
    No templates or themes to fight against. You control every pixel.
  </Card>

  <Card title="No Backend Required" icon="code">
    The client library handles all API communication. Just HTML, CSS, and JS.
  </Card>

  <Card title="Instant Hosting" icon="rocket">
    Deploy to Komerza infrastructure or list on the theme marketplace.
  </Card>

  <Card title="Fast Performance" icon="bolt">
    Static files load instantly with global CDN delivery.
  </Card>

  <Card title="Enterprise-Grade DDoS Protection" icon="shield-halved">
    Your storefront stays online under any load. Built on Cloudflare for
    unmatched resilience.
  </Card>

  <Card title="Automatic Backups" icon="clock-rotate-left">
    Every change and deployment is automatically backed up. Store up to 20
    backups on selected plans to keep your storefront code safe.
  </Card>
</CardGroup>

## Quick Example

```html theme={null}
<!DOCTYPE html>
<html>
  <head>
    <title>My Store</title>
    <script src="https://cdn.komerza.com/komerza.min.js"></script>
  </head>
  <body>
    <h1 id="store-name"></h1>
    <div id="products"></div>

    <script>
      komerza.init('your-store-id');

      // Load store and display products
      komerza.getStore().then(response => {
        if (!response.success) return;

        const store = response.data;
        document.getElementById('store-name').textContent = store.name;

        store.products.forEach(product => {
          const variant = product.variants[0];
          document.getElementById('products').innerHTML += \`
            <div class="product">
              <h2>\${product.name}</h2>
              <p>\${variant.cost}</p>
              <button onclick="komerza.addToBasket('\${product.id}', '\${variant.id}')">
                Add to Cart
              </button>
            </div>
          \`;
        });
      });
    </script>
  </body>
</html>
```

## Theme Marketplace

Build storefronts that other Komerza merchants can use. Your templates can be:

* Listed on the theme marketplace for other stores
* Customized with configuration options
* Deployed instantly by merchants
* Monetized through the marketplace

## Client Library vs API Reference

|                | Client Library         | API Reference        |
| -------------- | ---------------------- | -------------------- |
| **For**        | Customer storefronts   | Store management     |
| **Auth**       | Public (store ID)      | Private (API keys)   |
| **Runs**       | Client-side (browser)  | Server-side          |
| **Operations** | Browse, cart, checkout | Full CRUD, analytics |

<Note>
  The client library is for **customer-facing** storefronts. For admin
  operations like creating products or managing orders, use the [API
  Reference](/api-reference/introduction).
</Note>

## Get Started

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/storefront/installation">
    Install the client library and initialize your store
  </Card>

  <Card title="Store Information" icon="store" href="/storefront/store">
    Fetch store details, logo, banner, and products
  </Card>

  <Card title="Basket Management" icon="cart-shopping" href="/storefront/basket">
    Add, remove, and manage cart items
  </Card>

  <Card title="Checkout" icon="credit-card" href="/storefront/checkout">
    Process orders and handle payments
  </Card>
</CardGroup>
