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

# Guides, API Reference and SDKs

> Guides for running your store, plus the API, SDKs and integrations for building on Komerza

export const Category = ({title, description, icon, links}) => <div className="rounded-2xl border border-gray-200 bg-white p-6 dark:border-white/10 dark:bg-white/5">
    <div className="flex items-center gap-2.5">
      <span className={`kicon kicon-${icon} text-blue-600 dark:text-blue-400`} aria-hidden="true" />
      <h2 className="text-base font-medium text-gray-900 dark:text-zinc-50">
        {title}
      </h2>
    </div>
    <p className="mt-2 text-sm text-gray-600 dark:text-zinc-400">
      {description}
    </p>
    <ul className="mt-4 space-y-2">
      {links.map(link => <li key={link.href}>
          <a href={link.href} className="text-sm text-gray-700 underline-offset-4 hover:text-blue-600 hover:underline dark:text-zinc-300 dark:hover:text-blue-400">
            {link.title}
          </a>
        </li>)}
    </ul>
  </div>;

<div className="mx-auto max-w-3xl px-6 pt-20 pb-10 text-center">
  <h1 className="text-4xl font-normal tracking-tight text-gray-900 sm:text-5xl dark:text-zinc-50">
    How can we help?
  </h1>

  <p className="mx-auto mt-4 max-w-xl text-base text-gray-600 dark:text-zinc-400">
    Guides for setting up and running your store, plus the API, SDKs and
    integrations for building on Komerza.
  </p>

  <div id="hero-search" role="button" tabIndex={0} aria-label="Search the documentation" className="mx-auto mt-8 flex w-full max-w-xl cursor-pointer items-center gap-3 rounded-xl border border-gray-200 bg-white px-4 py-3 text-left shadow-sm transition hover:border-gray-300 dark:border-white/10 dark:bg-white/5 dark:hover:border-white/20">
    <span className="kicon kicon-sm kicon-magnifier" />

    <span className="flex-1 text-sm text-gray-500 dark:text-zinc-400">
      Search the documentation
    </span>

    <kbd className="rounded-md border border-gray-200 px-2 py-1 text-xs text-gray-500 dark:border-white/10 dark:text-zinc-400">
      ⌘K
    </kbd>
  </div>

  <p className="mt-6 text-sm text-gray-500 dark:text-zinc-400">
    Popular:{" "}

    <a href="/guides/delivery/introduction" className="underline-offset-4 hover:text-blue-600 hover:underline dark:hover:text-blue-400">
      How delivery works
    </a>

    {" · "}

    <a href="/guides/payment-methods" className="underline-offset-4 hover:text-blue-600 hover:underline dark:hover:text-blue-400">
      Payment methods
    </a>

    {" · "}

    <a href="/guides/orders" className="underline-offset-4 hover:text-blue-600 hover:underline dark:hover:text-blue-400">
      Managing orders
    </a>

    {" · "}

    <a href="/guides/embed-troubleshooting" className="underline-offset-4 hover:text-blue-600 hover:underline dark:hover:text-blue-400">
      Embed not loading
    </a>
  </p>
</div>

<div className="mx-auto grid max-w-6xl gap-4 px-6 pb-6 sm:grid-cols-2 lg:grid-cols-3">
  <Category
    title="Set up your store"
    icon="box"
    description="Products, pricing and the storefront itself."
    links={[
  { title: "Products & variants", href: "/guides/products-and-variants" },
  { title: "How delivery works", href: "/guides/delivery/introduction" },
  { title: "Coupons & discounts", href: "/guides/coupons-and-discounts" },
  { title: "Discord roles", href: "/guides/discord-roles" },
  { title: "Custom domain", href: "/guides/custom-domain" },
]}
  />

  <Category
    title="Design your storefront"
    icon="color-palette"
    description="The visual builder, sections and going live."
    links={[
  { title: "Storefront Builder", href: "/guides/builder/introduction" },
  { title: "Sections", href: "/guides/builder/sections" },
  { title: "Publishing", href: "/guides/builder/publishing" },
  { title: "Integrations", href: "/guides/builder/integrations" },
]}
  />

  <Category
    title="Take payments"
    icon="credit-card"
    description="Connect your own gateways and crypto processors."
    links={[
  { title: "Supported payment methods", href: "/guides/payment-methods" },
  {
    title: "Custom payment methods",
    href: "/guides/custom-payment-methods",
  },
  { title: "Self-custody crypto", href: "/guides/self-custody-setup" },
  { title: "Stripe & Apple Pay", href: "/guides/apple-pay-stripe" },
]}
  />

  <Category
    title="Orders & fulfilment"
    icon="receipt"
    description="Deliver, refund and troubleshoot orders."
    links={[
  { title: "Managing orders", href: "/guides/orders" },
  {
    title: "Order status reference",
    href: "/api-reference/payment-status",
  },
  { title: "Dynamic delivery", href: "/guides/dynamic-delivery" },
  { title: "Store webhooks", href: "/guides/webhooks" },
]}
  />

  <Category
    title="Customers & subscriptions"
    icon="users"
    description="Accounts, store credit, recurring billing and your team."
    links={[
  {
    title: "Customers & store credit",
    href: "/guides/customers-and-store-credit",
  },
  { title: "Selling subscriptions", href: "/guides/subscriptions" },
  { title: "Notifications & alerts", href: "/guides/notifications" },
  { title: "Teams & permissions", href: "/guides/teams-and-permissions" },
]}
  />

  <Category
    title="Grow your store"
    icon="chart-line"
    description="Bring people in and keep them coming back."
    links={[
  { title: "Affiliate program", href: "/guides/affiliates" },
  { title: "Email marketing", href: "/guides/email-marketing" },
  { title: "Analytics SDK", href: "/guides/analytics-sdk" },
  { title: "Migrating to Komerza", href: "/guides/migrating-to-komerza" },
]}
  />

  <Category
    title="Build & integrate"
    icon="code"
    description="Put Komerza checkout inside your own site."
    links={[
  { title: "Embed SDK", href: "/guides/embed-sdk" },
  { title: "Embed not loading", href: "/guides/embed-troubleshooting" },
  { title: "Storefront SDK", href: "/storefront/introduction" },
  { title: "Komerza CLI", href: "/guides/cli" },
]}
  />

  <Category
    title="API reference"
    icon="terminal"
    description="Full REST access to stores, products and orders."
    links={[
  { title: "Introduction", href: "/api-reference/introduction" },
  { title: "Quickstart", href: "/api-reference/quickstart" },
  { title: "Scopes & permissions", href: "/api-reference/scopes" },
  { title: "Filtering & sorting", href: "/api-reference/filtering" },
]}
  />

  <Category
    title="Reference & tools"
    icon="book"
    description="Values, errors and everything else you'll look up."
    links={[
  { title: "Enums & constants", href: "/api-reference/enums" },
  { title: "Error codes", href: "/api-reference/error-codes" },
  { title: "SDKs & libraries", href: "/api-reference/sdks" },
  {
    title: "Payment method values",
    href: "/api-reference/payment-methods",
  },
]}
  />
</div>

<div className="mx-auto max-w-6xl px-6 pb-20 text-center text-sm text-gray-500 dark:text-zinc-400">
  <a href="https://dashboard.komerza.com" className="underline-offset-4 hover:text-blue-600 hover:underline dark:hover:text-blue-400">
    Dashboard
  </a>

  {" · "}

  <a href="https://status.komerza.com" className="underline-offset-4 hover:text-blue-600 hover:underline dark:hover:text-blue-400">
    System status
  </a>

  {" · "}

  <a href="https://checkout.komerza.com/embed/demo.html" className="underline-offset-4 hover:text-blue-600 hover:underline dark:hover:text-blue-400">
    Live embed demo
  </a>
</div>