# Connect a storefront to your store

> Create the publishable keys and sales channels a storefront sells through, and the settings it reads from the Store API.

Source: https://www.coritan.com/docs/organizations/commerce/storefront/

In the dashboard:

- /dashboard/organizations/…/commerce/storefront: https://www.coritan.com/dashboard/organizations

The **Storefront** section of the **Commerce** tab holds what a storefront needs to sell from your store: the publishable keys it calls the Store API with, the sales channels those keys sell through, and the storefront's own settings. Your storefront is the site shoppers buy on, such as one built with the [JavaScript SDK](/docs/organizations/storefront/commerce-sdk/) or the [Store API](/docs/organizations/storefront/store-api/).

## Before you begin

- You need the Admin or Owner role to create or revoke a key, to change a sales channel and to change the storefront settings. Other members see the keys, the channels and the settings, with a note that the page is read-only for them.
- The store's address and the sites that may call the Store API are under **Settings**, in the **Store** card ([Change your store's settings](/docs/organizations/commerce/settings/#store)).

## Open the section

In the [dashboard](https://www.coritan.com/dashboard/organizations), open the organization, then **Commerce**, then **Setup**, then **Storefront**. It has three cards: **Publishable keys**, **Sales channels** and **Storefront settings**.

## Create a publishable key

A storefront sends a publishable key with every Store API call. A key is safe in browser code, and a test key places test orders.

1. On the **Publishable keys** card, select **New key…**.
2. Enter a **Label** of up to 100 characters. It is for you to tell keys apart, and storefronts never see it.
3. Choose the **Mode**. **Test** places test orders. **Live** takes real orders once the store is live, and until then the Store API refuses it.
4. Under **Sells through**, tick the sales channels the key sells through. With none ticked, it sells through the default channel, and follows the default if another channel becomes it.
5. Select **Create key**.

The dialog shows the key, the header to send it in (`x-publishable-api-key`) and the Store API address. Select **Done**. The key stays in the list, where **Copy key** copies it. [Send the publishable key](/docs/organizations/storefront/store-api/#send-the-publishable-key) shows how a storefront uses it. The [JavaScript SDK](/docs/organizations/storefront/commerce-sdk/) takes the key as `publishableKey` and sends it with every request.

> [!IMPORTANT]
> A key's channels cannot be changed later. To sell through other channels, create a new key.

## Revoke a publishable key

1. On the **Publishable keys** card, select **Revoke…** on the key's row.
2. Type the key's label, then select **Revoke key**.

Storefronts that send the key stop working within 15 seconds, so create another key first if a storefront still uses it. The key stays in the list, marked Revoked.

> [!CAUTION]
> A revoked key cannot be turned back on.

## Manage sales channels

A sales channel is where the store sells. A key sells through its channels, and a product is listed in the channels it is added to under **Listing** in [Products](/docs/organizations/commerce/products/). A store has at most 50 channels.

To add one:

1. On the **Sales channels** card, select **New channel…**.
2. Enter a **Name** of up to 100 characters. Storefronts can read it from the Store API.
3. Optionally, enter a **Description** of up to 500 characters, for members only.
4. Under **Sells from**, tick the stock locations whose stock the channel sells. With none ticked, it sells the stock of every location that is turned on.
5. Select **Create channel**.

The menu on a channel's row holds the rest:

**Edit channel…**
: Change the name, the description or where it sells from, then select **Save channel**.

**Make default**
: Keys that name no channel sell through the default. When some do, the dashboard asks you to confirm, because their storefronts then show the new default's products. A channel that is turned off must be turned on first.

**Turn off…** and **Turn on**
: Storefronts whose keys sell through a channel that is turned off show none of its products until it is turned on again. Its products and keys stay as they are.

**Delete channel…**
: Type the channel's name, then select **Delete channel**. Its products leave it and its locations are unlinked. A key that sells only through it shows no products, and needs replacing with a new key.

The default channel cannot be turned off or deleted. Make another channel the default first.

## Storefront settings

The **Storefront settings** card holds your own JSON for the storefront to read, such as an age gate or a welcome popup and the weight of each popup design. Coritan gives none of its keys a meaning: the Store API serves the object to your storefront as `storefront`, and your storefront's code decides what each key does.

1. On the **Storefront settings** card, write a JSON object in **Storefront JSON**, such as `{"popup": {"enabled": true, "delay_seconds": 8}}`.
2. Select **Format JSON** to lay it out with one key a line.
3. Select **Save changes**.

The field checks the JSON as you type and says what is wrong under it. Its hint counts the size against the limit. The object is saved whole, replacing the one before, and emptying the field removes it. It must stay within these limits:

- At most 16,384 bytes, counted as compact JSON in UTF-8, so a letter such as `é` counts twice.
- Objects and arrays nested at most 8 levels deep, counting the outer object.
- Every key from 1 to 64 characters long.

Turn on **Turnstile check on sign-ups** to ask for a Cloudflare Turnstile check before a storefront sign-up is recorded in [Leads](/docs/organizations/commerce/leads/). It applies while Turnstile is set up for your storefront, and the Store API tells the storefront, as `leads_turnstile`, when to show the check. The switch saves with the card's **Save changes**.

## Result

A new key or channel appears in its list at once. Saving the storefront settings says "Storefront settings saved.", and the card shows the JSON laid out with one key a line.

## Troubleshooting

The Store API refuses a live key with `store_not_live`
: The store is still in test mode. Use a test key until staff take it live, as [Take your store live](/docs/organizations/commerce/merchant-profile/#take-the-store-live) explains.

The storefront's pages cannot call the Store API
: **Sites that may call the Store API**, in [Settings](/docs/organizations/commerce/settings/#store), lists sites, and the storefront's own site is not one of them. Add it, or empty the list.

**Make default** cannot be selected
: The channel is turned off. Turn it on first.

**Turn off…** or **Delete channel…** cannot be selected
: The channel is the default. Make another channel the default first.

The storefront settings do not save
: The alert on the card, or the message under **Storefront JSON**, gives the reason. Fix the JSON, then select **Save changes** again.

## Related

- [Run your store from the Commerce tab](/docs/organizations/commerce/)
- [Change your store's settings](/docs/organizations/commerce/settings/)
- [Build a checkout with the Store API](/docs/organizations/storefront/store-api/)
- [Build a storefront with the JavaScript SDK](/docs/organizations/storefront/commerce-sdk/)

## With the API

The store's `settings` take `storefront` (a JSON object, replaced whole) and `leads_turnstile` through `PATCH https://api.coritan.com/api/v1/orgs/{org_slug}/commerce/store`. [Create publishable keys and sales channels](/docs/organizations/storefront/commerce-api/#create-publishable-keys-and-sales-channels) covers the key and channel routes.

```bash
curl -X PATCH "https://api.coritan.com/api/v1/orgs/acme/commerce/store" \
  -H "Authorization: Bearer $CORITAN_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"settings": {"storefront": {"popup": {"enabled": true, "delay_seconds": 8}}}}'
```