> ## Documentation Index
> Fetch the complete documentation index at: https://docs.firmhouse.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Developer guides

> Browse practical guides for building custom Firmhouse integrations and developer workflows.

<div className="mx-auto max-w-6xl px-6 py-16 lg:py-24">
  <div className="mx-auto max-w-3xl text-center">
    <p className="mb-4 text-sm font-semibold uppercase tracking-normal text-[#2454FF] dark:text-[#8ac3e9]">
      Guides
    </p>

    <h1 className="m-0 text-4xl font-semibold tracking-normal text-gray-950 dark:text-white md:text-5xl">
      Developer guides
    </h1>

    <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-600 dark:text-gray-300">
      Practical examples for using Firmhouse APIs, Liquid, and webhooks with external e-commerce builds.
    </p>
  </div>

  <div className="mt-10 flex flex-wrap justify-center gap-2 text-sm">
    <span className="rounded-full border border-gray-200 px-4 py-2 font-medium text-gray-700 dark:border-gray-700 dark:text-gray-200">
      Headless, Adobe, SFCC
    </span>

    <span className="rounded-full border border-gray-200 px-4 py-2 font-medium text-gray-700 dark:border-gray-700 dark:text-gray-200">
      Automation and webhooks
    </span>

    <span className="rounded-full border border-gray-200 px-4 py-2 font-medium text-gray-700 dark:border-gray-700 dark:text-gray-200">
      GraphQL API
    </span>

    <span className="rounded-full border border-gray-200 px-4 py-2 font-medium text-gray-700 dark:border-gray-700 dark:text-gray-200">
      React and Next.js storefronts
    </span>
  </div>

  <div className="mt-16">
    <div className="max-w-3xl">
      <h2 className="text-2xl font-semibold tracking-normal text-gray-950 dark:text-white">
        Headless, Magento, Salesforce Commerce Cloud
      </h2>

      <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-300">
        Guides for connecting external e-commerce platforms and customer account experiences to Firmhouse.
      </p>
    </div>

    <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
      <a href="/developers/guides/self-service-center-token-login" className="group rounded-lg border border-gray-200 bg-white p-6 no-underline transition hover:border-[#2454FF] hover:shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[#8ac3e9]">
        <div className="text-xs font-semibold uppercase tracking-normal text-[#2454FF] dark:text-[#8ac3e9]">
          Headless, Magento, Salesforce Commerce Cloud
        </div>

        <h3 className="mt-4 text-xl font-semibold tracking-normal text-gray-950 dark:text-white">
          Log customers into the Self Service Center with a token
        </h3>

        <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-300">
          Generate a Self Service Center login token by email address and redirect customers into their portal session.
        </p>

        <div className="mt-5 flex flex-wrap gap-2 text-xs font-medium text-gray-600 dark:text-gray-300">
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">GraphQL API</span>
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">Self Service Center</span>
        </div>
      </a>

      <a href="/developers/guides/switch-upgrade-plan-flow-requires-payment" className="group rounded-lg border border-gray-200 bg-white p-6 no-underline transition hover:border-[#2454FF] hover:shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[#8ac3e9]">
        <div className="text-xs font-semibold uppercase tracking-normal text-[#2454FF] dark:text-[#8ac3e9]">
          Headless, Magento, Salesforce Commerce Cloud
        </div>

        <h3 className="mt-4 text-xl font-semibold tracking-normal text-gray-950 dark:text-white">
          Build a paid plan switch or upgrade flow
        </h3>

        <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-300">
          Let customers switch plans only after accepting an offer and completing an initial payment.
        </p>

        <div className="mt-5 flex flex-wrap gap-2 text-xs font-medium text-gray-600 dark:text-gray-300">
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">GraphQL API</span>
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">Offers</span>
        </div>
      </a>

      <a href="/developers/guides/activate-subscription-with-recalculated-billing-date" className="group rounded-lg border border-gray-200 bg-white p-6 no-underline transition hover:border-[#2454FF] hover:shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[#8ac3e9]">
        <div className="text-xs font-semibold uppercase tracking-normal text-[#2454FF] dark:text-[#8ac3e9]">
          Headless, Magento, Salesforce Commerce Cloud
        </div>

        <h3 className="mt-4 text-xl font-semibold tracking-normal text-gray-950 dark:text-white">
          Activate with a recalculated billing date
        </h3>

        <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-300">
          Activate delayed subscriptions through the GraphQL API and recalculate the plan billing date from activation.
        </p>

        <div className="mt-5 flex flex-wrap gap-2 text-xs font-medium text-gray-600 dark:text-gray-300">
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">GraphQL API</span>
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">Activation</span>
        </div>
      </a>
    </div>
  </div>

  <div className="mt-16">
    <div className="max-w-3xl">
      <h2 className="text-2xl font-semibold tracking-normal text-gray-950 dark:text-white">
        GraphQL API
      </h2>

      <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-300">
        Guides for working with Firmhouse data through the GraphQL API. For large exports that would otherwise run into query complexity or timeout limits, use GraphQL bulk operations.
      </p>
    </div>

    <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
      <a href="/developers/guides/run-graphql-bulk-operation-queries" className="group rounded-lg border border-gray-200 bg-white p-6 no-underline transition hover:border-[#2454FF] hover:shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[#8ac3e9]">
        <div className="text-xs font-semibold uppercase tracking-normal text-[#2454FF] dark:text-[#8ac3e9]">
          GraphQL API
        </div>

        <h3 className="mt-4 text-xl font-semibold tracking-normal text-gray-950 dark:text-white">
          Run large queries with bulk operations
        </h3>

        <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-300">
          Start an asynchronous GraphQL query, track its status, and download connection results as JSONL.
        </p>

        <div className="mt-5 flex flex-wrap gap-2 text-xs font-medium text-gray-600 dark:text-gray-300">
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">GraphQL API</span>
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">JSONL</span>
        </div>
      </a>
    </div>
  </div>

  <div className="mt-16">
    <div className="max-w-3xl">
      <h2 className="text-2xl font-semibold tracking-normal text-gray-950 dark:text-white">
        Automation and webhooks
      </h2>

      <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-300">
        Guides for reacting to Firmhouse events and keeping external workflows in sync with subscription activity.
      </p>
    </div>

    <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
      <a href="/developers/guides/update-discount-amount-on-each-order" className="group rounded-lg border border-gray-200 bg-white p-6 no-underline transition hover:border-[#2454FF] hover:shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[#8ac3e9]">
        <div className="text-xs font-semibold uppercase tracking-normal text-[#2454FF] dark:text-[#8ac3e9]">
          Automation and webhooks
        </div>

        <h3 className="mt-4 text-xl font-semibold tracking-normal text-gray-950 dark:text-white">
          Update discount amounts on each order
        </h3>

        <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-300">
          Use webhooks and GraphQL to increase a subscription discount after each confirmed order.
        </p>

        <div className="mt-5 flex flex-wrap gap-2 text-xs font-medium text-gray-600 dark:text-gray-300">
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">Webhooks</span>
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">GraphQL API</span>
        </div>
      </a>
    </div>
  </div>

  <div className="mt-16">
    <div className="max-w-3xl">
      <h2 className="text-2xl font-semibold tracking-normal text-gray-950 dark:text-white">
        React and Next.js storefronts
      </h2>

      <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-300">
        Guides for building custom storefronts on top of Firmhouse using JavaScript frameworks and the GraphQL API.
      </p>
    </div>

    <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
      <a href="/developers/guides/creating-a-storefront-app" className="group rounded-lg border border-gray-200 bg-white p-6 no-underline transition hover:border-[#2454FF] hover:shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[#8ac3e9]">
        <div className="text-xs font-semibold uppercase tracking-normal text-[#2454FF] dark:text-[#8ac3e9]">
          React and Next.js storefronts
        </div>

        <h3 className="mt-4 text-xl font-semibold tracking-normal text-gray-950 dark:text-white">
          Create a storefront app
        </h3>

        <p className="mt-3 text-base leading-7 text-gray-600 dark:text-gray-300">
          Build a custom storefront flow with products, plans, carts, address details, and payment links.
        </p>

        <div className="mt-5 flex flex-wrap gap-2 text-xs font-medium text-gray-600 dark:text-gray-300">
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">GraphQL API</span>
          <span className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-800">Checkout</span>
        </div>
      </a>
    </div>
  </div>
</div>