# Analytics
Source: https://docs.headkit.io/admin/analytics

See detailed data on your traffic, usage, performance and commerce wins.

<img alt="HeadKit Commerce Cloud Admin Analytics" title="Admin | Analytics" />

<img alt="HeadKit Commerce Cloud Admin Analytics" title="Admin | Analytics" />

We're currently building our detailed Analytics feature. Please contact us if you need this feature earlier.


# Plan & Billing
Source: https://docs.headkit.io/admin/plan-billing

Choose a plan that best fits your store. You can scale up as you grow.

<img alt="HeadKit Commerce Cloud Admin PLan & Billing" title="Admin | Plan & Billing" />

<img alt="HeadKit Commerce Cloud Admin PLan & Billing" title="Admin | Plan & Billing" />

All stores start on a free plan where you can start building for free until you’re ready to launch.

When you want to go live, at a production domain and take live payments then its time to upgrade.

From the Plan & Billing tab in the HeadKit dashboard, select the plan that best fits your store and you will complete your subscription securely through Stripe.


# Store Settings
Source: https://docs.headkit.io/admin/store-settings

Global configuration applied to your store.

<img alt="HeadKit Commerce Cloud Admin Store Settings" title="Admin | Store Settings" />

<img alt="HeadKit Commerce Cloud Admin Store Settings" title="Admin | Store Settings" />

## Store Name

Store name is set during onboarding but can be changed at any time. Choose a unique name for your store. While this is usually your business name, you can use any name that's relevant. The Store Name is however used as a fallback everywhere for default SEO.

## Store URL

Store URL is set during onboarding but can be changed at any time. Use the store URL to set your preview domain. The format will be '[mystore@headkit.app](mailto:mystore@headkit.app)' and must be unique across the HeadKit platform.

This can be replaced with a custom domain when you are ready to ship.

## Store ID

The Store ID is automatically assigned and can't be changed. This is your unique store ID. This can be used with your API.

## GTM ID

Enter your Google Tag Manager ID to track your store. We will automatically add this to the header of all your Storefront pages. You can add your own GTM, GA4, or custom tracking pixels to your storefront code directly if you prefer however we have already added this tag optimised for best performance.

## Transfer Store

Transfer your store to another team. You will lose access unless you are a member of the destination team.

## Delete Store

Deleting your store is irreversible and can't be undone. This will also remove all connections to your existing composable store. **Proceed with caution.**


# Create Plant
Source: https://docs.headkit.io/api-reference/endpoint/create

POST /plants
Creates a new plant in the store



# Delete Plant
Source: https://docs.headkit.io/api-reference/endpoint/delete

DELETE /plants/{id}
Deletes a single plant based on the ID supplied



# Get Plants
Source: https://docs.headkit.io/api-reference/endpoint/get

GET /plants
Returns all plants from the system that the user has access to



# Introduction
Source: https://docs.headkit.io/api-reference/introduction

Example section for showcasing API endpoints

<Note>
  If you're not looking to build API reference documentation, you can delete
  this section by removing the api-reference folder.
</Note>

## Welcome

There are two ways to build API documentation: [OpenAPI](https://mintlify.com/docs/api-playground/openapi/setup) and [MDX components](https://mintlify.com/docs/api-playground/mdx/configuration). For the starter kit, we are using the following OpenAPI specification.

<Card title="Plant Store Endpoints" icon="leaf" href="https://github.com/mintlify/starter/blob/main/api-reference/openapi.json">
  View the OpenAPI specification file
</Card>

## Authentication

All API endpoints are authenticated using Bearer tokens and picked up from the specification file.

```json theme={null}
"security": [
  {
    "bearerAuth": []
  }
]
```


# Commerce
Source: https://docs.headkit.io/connections/commerce

Choose a new or existing commerce connection to power your product catalogue.

<img alt="HeadKit Commerce Cloud Connections Commerce" title="Connections | Commerce" />

<img alt="HeadKit Commerce Cloud Connections Commerce" title="Connections | Commerce" />

## Connect Commerce

Select your commerce integration from available connections. This connection will power your product catalogue, inventory and orders in the native experience of that platform.

<AccordionGroup>
  <Accordion title="WooCommerce" icon="https://mintcdn.com/headkit/53zOtu53ciiSFXlm/images/icons/HeadKit_Integration_WooCommerce.svg?fit=max&auto=format&n=53zOtu53ciiSFXlm&q=85&s=9bf1a5ca73b29aefec7107c666cdd99b">
    Choose to create a new site or connect an existing site

    **New**

    We'll create a new WooCommerce install on HeadKit Commerce Cloud. The install will take around 2 mins and be preconfigured ready to go. You will be provided the link to the WooCommerce admin, along with an email to reset your password for access. 

    **Existing**

    You’ll need to follow some steps before we can connect WooCommerce to HeadKit

    * make a backup of your WooCommerce site
    * download and install the HeadKit WooCommerce theme and required plugins
    * set permalink structure
    * create and assign menus

    Once these steps have been completed, connect you can proceed to connecting WooCommerce with HeadKit.

    More detailed instructions [here](https://docs.headkit.io/connections/commerce)

    *Tip: For existing stores, we recommend using a duplicate version to avoid disruption to your live site.*
  </Accordion>
</AccordionGroup>

*More commerce providers coming soon*


# Content
Source: https://docs.headkit.io/connections/content

Choose a Content provider to bring advanced, personalised user experience to your store.

<img alt="HeadKit Commerce Cloud Connections Content" title="Connections | Content" />

<img alt="HeadKit Commerce Cloud Connections Content" title="Connections | Content" />

<Card icon="credit-card">
  &#x20;is available on  level plans and above.
</Card>


# Framework
Source: https://docs.headkit.io/connections/framework

HeadKit Commerce Cloud. The cloud platform to simplify building complex headless commerce stores.

<img title="Connections | Framework" alt="HeadKit Commerce Cloud Connections Framework" />

<img title="Connections | Framework" alt="HeadKit Commerce Cloud Connections Framework" />

## Framework Connection

HeadKit is currently for Next.js only and our Storefront template supports the latest Next.js features.

We create and connect your framework automatically when you connect a repository.

*We will add support for more frameworks in future.*

## Hosting

We connect your frontend hosting automatically when you connect a repository.

HeadKit Commerce Cloud includes frontend hosting on Vercel which we have optimised for best performance of HeadKit stores using all the best features of Vercel routing and caching.

*If you require a self-hosted solution, this is available on our Enterprise plan, contact us for details.*


# Payments
Source: https://docs.headkit.io/connections/payments

Select a payment provider to start accepting payments from customers

<img alt="HeadKit Commerce Cloud Connections Payments" title="Connections | Payments" />

<img alt="HeadKit Commerce Cloud Connections Payments" title="Connections | Payments" />

## Connect Payments

Connect a payment integration to accept payments seamlessly through your HeadKit custom checkout.

<AccordionGroup>
  <Accordion title="Stripe" icon="https://mintcdn.com/headkit/LbyeY6wQS5jDFJey/images/icons/HeadKit_Integration_Stripe.svg?fit=max&auto=format&n=LbyeY6wQS5jDFJey&q=85&s=cbd5482c0f51466cbdc27d0c29c9bdd2">
    Connect or create your Stripe account. Follow the Stripe onboarding to complete your business details. Stripe is already integrated with your store and settings can be managed through your connected dashboard.
  </Accordion>
</AccordionGroup>


# Repository
Source: https://docs.headkit.io/connections/repository

The HeadKit Storefront code is editable and extendable from your own repo.

<img alt="HeadKit Commerce Cloud Connections Repository" title="Connections | Repository" />

<img alt="HeadKit Commerce Cloud Connections Repository" title="Connections | Repository" />

## Select a Git provider to create your code repo.

<AccordionGroup>
  <Accordion title="GitHub" icon="github">
    Authorise the HeadKit GitHub app to connect to a new or existing GitHub account. This will add the HeadKit Storefront codebase to your own repository and you will see the link to access the repo instantly. Our GitHub app automatically deploys your changes to your  store, so you don't need to manage deployments yourself.
  </Accordion>
</AccordionGroup>

*More Git providers coming soon.*

The HeadKit Storefront codebase is cloned to your own repository, so you are free to make changes and extend your store as you wish. Create a beautiful design-led UI for a custom, on-brand user experience.

Commit and push your changes to Git for your changes to update in your store. If you push and don't see that the changes are successfully deployed, you can also trigger a [deployment](https://docs.headkit.io/connections/framework).


# API
Source: https://docs.headkit.io/customisation/api

HeadKit Engine connects everything through our single API. This can be used to power custom features and integrations for your store.

<img alt="HeadKit Commerce Cloud Customisation API" title="Customisation | API" />

<img alt="HeadKit Commerce Cloud Customisation API" title="Customisation | API" />

## API Tokens

API tokens issued for your store connections will be displayed here automatically and can be revoked and re-issued as required. Add a custom token for connection to an external service.


# Branding
Source: https://docs.headkit.io/customisation/branding

HeadKit provides an easy option to customise the HeadKit Storefront directly through the app. Add your logo, colours and domain and your live with a clean and customised store.

<img alt="HeadKit Commerce Cloud Customisation Branding" title="Customisation | Branding" />

<img alt="HeadKit Commerce Cloud Customisation Branding" title="Customisation | Branding" />

## Store Logo

Upload a logo to show on your store navigation. The upload supports .svg and .png. We recommend svg for best results.

## Store Icon

Upload your icon and we will convert for favicon, webclip and Apple touch. Supports .svg and .png.

## Brand Colours

Set your primary brand colour using the picker or HEX code. This colour will feature through buttons and links throughout the store UI.

## Custom Domain

<Card icon="credit-card">
  &#x20;is available on  level plans and above.
</Card>

When you're ready to go live, add a custom domain. Once you enter your domain name and choose 'Add Domain', you will be prompted through steps to verify your domain and add DNS records to point your domain to HeadKit. Once these steps have been completed and verified, the domain will show as Active and your store will show live at your custom domain name.

## Further Customisation

It's possible to customise your entire UI to make it your own. Any customisations that you do to your HeadKit Storefront codebase will override these settings.

To customise your storefront further, edit your codebase using your favourite editor.


# Email
Source: https://docs.headkit.io/customisation/email

HeadKit Cloud enables you to easily connect email services for Transactional and Marketing emails.

<img alt="HeadKit Commerce Cloud Customisation Email" title="Customisation | Email" />

<img alt="HeadKit Commerce Cloud Customisation Email" title="Customisation | Email" />

## HeadKit Transactional

We're currently building our custom Transactional Email feature. Please contact us if you need this feature earlier.

<CardGroup>
  ##
</CardGroup>


# SEO
Source: https://docs.headkit.io/customisation/seo

HeadKit Storefront ships with built in SEO. Use the cloud settings to set defaults for all pages.

<img alt="HeadKit Commerce Cloud Customisation SEO" title="Customisation | SEO" />

<img alt="HeadKit Commerce Cloud Customisation SEO" title="Customisation | SEO" />

## Title

Set a default browser title for your store which will show for all pages. Recommended length up to 55 characters.

<CardGroup />

## Meta Description

Set a fallback description which will be used on all pages of your store. Recommended length up to 300 characters.

<CardGroup />

## OG Image

Upload an image to use as a standard Open Graph image for all pages of your store. Recommended size of 1200x 630px. Supports .png .jpg and .webp.

## Sitemap

HeadKit will auto-generate your sitemap at /sitemap.xml. Toggle this setting off if you choose not to create a sitemap or want to provide your own in a specific format.


# Introduction
Source: https://docs.headkit.io/introduction

HeadKit is the cloud platform making it fast and easy to build headless commerce stores.

<div>
  <div>
    <img alt="Decorative background image." />

    <img alt="Decorative background image." />
  </div>

  <div>
    <h1>
      HeadKit Documentation
    </h1>

    <div>
      HeadKit is the cloud platform to build, deploy, and grow headless
      commerce stores with your own storefront codebase, commerce backend, and
      managed infrastructure.
    </div>

    <div>
      <HeroCard title="Quickstart" description="Create your store and connect repository, commerce, and payments in minutes." href="/quickstart" />

      <HeroCard title="Customisation" description="Quickly brand your store with logo and colours to make it yours." href="/customisation/branding" />

      <HeroCard title="Commerce" description="Connect WooCommerce and sync catalogue, inventory, and orders." href="/connections/commerce" />

      <HeroCard title={'Storefront & deploy'} description="Framework setup, environments, and how deployments reach your live store." href="/connections/framework" />
    </div>
  </div>
</div>

<div>
  ### Other Resources

  <Columns>
    <Card title="Customer Success" icon="desktop" href="https://headkit.io/book-demo">
      Want to see what's possible on HeadKit? We can show you around.
    </Card>

    <Card title="Join our Community" icon="discord" href="https://discord.gg/bSNe29JtsX">
      Be part of the conversation, get support and share tips.
    </Card>

    <Card title="Support" icon="circle-question" href="https://headkit.io/support">
      We're ready to help you build the best headless store. Please create a ticket.
    </Card>
  </Columns>
</div>


# Quickstart
Source: https://docs.headkit.io/quickstart

Spin up your headless store in minutes

<img alt="HeadKit Commerce Quickstart" />

<img alt="HeadKit Commerce Quickstart" />

## Create your Store

Getting started is quick and easy. First you will be prompted to create your new store.

* Enter your Store Name.
* Confirm or change your Store URL. This is your preview subdomain, you can add a custom domain later.

## Configure your Store

Follow the steps to hook up vital connections to HeadKit Commerce. We’ll spin up your headless store within minutes.

<Steps>
  <Step title="Connect Repository">
    Select a Git provider to create your code repo.

    <AccordionGroup>
      <Accordion title="GitHub" icon="github">
        Authorise the HeadKit GitHub app to connect to a new or existing GitHub account. This will add the HeadKit Storefront codebase to your own repository and you will see the link to access the repo instantly. Our GitHub app automatically deploys your changes to your  store, so you don't need to manage deployments yourself.
      </Accordion>
    </AccordionGroup>

    *More Git providers coming soon.*

    The HeadKit Storefront codebase is cloned to your own repository, so you are free to make changes and extend your store as you wish. Create a beautiful design-led UI for a custom, on-brand user experience.

    Commit and push your changes to Git for your changes to update in your store. If you push and don't see that the changes are successfully deployed, you can also trigger a [deployment](/connections/framework).
  </Step>

  <Step title="Connect Commerce">
    Select your commerce integration from available connections. This connection will power your product catalogue, inventory and orders in the native experience of that platform.

    <AccordionGroup>
      <Accordion title="WooCommerce" icon="https://mintcdn.com/headkit/53zOtu53ciiSFXlm/images/icons/HeadKit_Integration_WooCommerce.svg?fit=max&auto=format&n=53zOtu53ciiSFXlm&q=85&s=9bf1a5ca73b29aefec7107c666cdd99b">
        Choose to create a new site or connect an existing site

        **New**

        We'll create a new WooCommerce install on HeadKit Commerce Cloud. The install will take around 2 mins and be preconfigured ready to go. You will be provided the link to the WooCommerce admin, along with an email to reset your password for access. 

        **Existing**

        You’ll need to follow some steps before we can connect WooCommerce to HeadKit

        * make a backup of your WooCommerce site
        * download and install the HeadKit WooCommerce theme and required plugins
        * set permalink structure
        * create and assign menus

        Once these steps have been completed, connect you can proceed to connecting WooCommerce with HeadKit.

        More detailed instructions [here](/connections/commerce)

        *Tip: For existing stores, we recommend using a duplicate version to avoid disruption to your live site.* 
      </Accordion>
    </AccordionGroup>

    Learn more about [commerce](/connections/commerce) connections

    *More commerce providers coming soon.*
  </Step>

  <Step title="Connect Payments">
    Connect a payment integration to accept payments seamlessly through your HeadKit custom checkout.

    <AccordionGroup>
      <Accordion title="Stripe" icon="https://mintcdn.com/headkit/LbyeY6wQS5jDFJey/images/icons/HeadKit_Integration_Stripe.svg?fit=max&auto=format&n=LbyeY6wQS5jDFJey&q=85&s=cbd5482c0f51466cbdc27d0c29c9bdd2">
        Connect or create your Stripe account. Follow the Stripe onboarding to complete your business details. Stripe is already integrated with your store and settings can be managed through your connected dashboard.
      </Accordion>
    </AccordionGroup>

    Learn more about [payments](/connections/payments)
  </Step>
</Steps>

That's it! You're all setup and ready with a headless store running on HeadKit.

## Next Steps

Because it was so quick and easy to go headless, you can now spend your time on making the store yours and creating an awesome user experience.

<Card title="Customise Branding" icon="swatchbook" href="/customisation/branding">
  Add your logo, icon, colours and custom domain to quickly make your store your own.
</Card>