> Note:
>
> B2B only works with [customer accounts](https://help.shopify.com/en/manual/customers/customer-accounts/new-customer-accounts). To use customer accounts, you'll need to update existing auth/login code that's related to legacy customer accounts.

This guide will help you build either a [dedicated or blended B2B](https://help.shopify.com/en/manual/b2b/blended-and-dedicates-stores) custom storefront. It'll take you through the following steps:

1. Creating a storefront `customerAccessToken`
2. Retrieving a `companyLocationId`
3. Using the `customerAccessToken` and `companyLocationId`, contextualize storefront queries to get B2B pricing, volume pricing, and quantity rules
4. Using the `customerAccessToken` and `companyLocationId`, update cart to be aware of B2B specific rules and pricing

Completing these steps should result in a storefront and cart that are contextualized for a B2B customer. Checking out with the cart will lead to a B2B checkout.

Without contextualization, your store's base pricing and product publishing will be used. Your B2B customers won't see a tailored experience from Catalogs, Payment Terms, and other B2B features that you have set up.

## Requirements

- Your store meets the requirements for B2B, notably being on a [Shopify Plus plan](https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plus-plan).
- You have [Apps and channels](https://help.shopify.com/en/manual/your-account/staff-accounts/staff-permissions/staff-permissions-descriptions#apps-and-channels-permissions) permissions on the Shopify store that you’re working with.
- You’ve completed the [Getting started with the Storefront API](/docs/storefronts/headless/building-with-the-storefront-api/getting-started) guide.
- You’re familiar with [Creating and updating a cart with the Storefront API](/docs/storefronts/headless/building-with-the-storefront-api/cart/manage).
- You’ve completed the [Getting started with the Customer Account API](/docs/storefronts/headless/building-with-the-customer-account-api/getting-started) guide.

## Step 1: Get a Customer Accounts Access Token representing your Customer

The Customer Accounts `access_token` is one component needed to contextualize Storefront API queries for B2B and set a buyer identity on cart. It's a token representing your customer, and is obtained at the outcome of an [authorization flow](/docs/api/customer#step-authorization) they will go through. Specifically, refer to the step to [obtain the `access_token` in the Customer Accounts API](/docs/api/customer#step-obtain-access-token).

The `access_token` resulting from this process is used in the step to contextualize [product queries](#step-3-contextualize-storefront-api-requests) and [cart](#step-4-set-the-buyer-identity-on-cart), below, where it is referred to as `customerAccessToken`.

## Step 2: Get a Company Location ID

A `companyLocationId` is the other component needed to contextualize Storefront API queries for B2B and set a buyer identity on cart.

To obtain a `companyLocationId`, make a [Customer Account API query](/docs/api/customer/latest/queries/customer) on the customer to get the locations they have access to.

- If this query returns a single location, save the `companyLocationId` and move on to [Step 3: Contextualize Storefront API Requests](#step-3-contextualize-storefront-api-requests)
- Otherwise continue to the next sub section, [Building a location selector for a multi-location customer](#building-a-location-selector-for-a-multi-location-customer)

### Building a location selector for a multi-location customer

If the B2B customer can buy for multiple locations, then you'll need to build a location selector so that they can choose which location they want to buy for. The selector can be rendered anywhere on your storefront. To provide a seamless user experience, we recommend redirecting the user to the location selector after successfully authenticating with the Customer Account API.

1. Display all locations from the customer query in a location selector on your storefront
2. Allow the user to select a location
3. Save the selected location’s ID for later requests

## Step 3: Contextualize Storefront API Requests

Including the `buyer` argument on the [@inContext directive](/docs/api/storefront#directives) will contextualize any Storefront API queries for a B2B customer. Any queries and mutations that need to be contextualized should be updated to include a `buyer`. Use the `customerAccessToken` and `companyLocationId` that you obtained in [Step 1](#step-1-get-a-customer-accounts-access-token-representing-your-customer) and [Step 2](#step-2-get-a-company-location-id).

With a contextualized query, you can access a `quantityRule` and `quantityPriceBreaks` on a [product variant](/docs/api/storefront/latest/objects/ProductVariant), as well as get a `price` that's contextualized for the B2B customer.

<p>
<div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
<script data-option="title" data-value="Contextualized RecommendedProducts Query"></script>


<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="title" data-value="GraphQL mutation"></script>

<script type="text/plain" data-language="graphql">
query RecommendedProducts (
   $buyer: BuyerInput
) @inContext(buyer: $buyer) {
   products(first: 5) {
     nodes {
       id
       variants(first: 5) {
        nodes {
          id
          quantityRule {
            maximum
            minimum
            increment
          }
          quantityPriceBreaks(first: 5) {
            nodes {
              minimumQuantity
              price {
                amount
                currencyCode
              }
            }
          }
        }
      }
    }
  }
}
</script>

</div>
</p>

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="title" data-value="Variables"></script>

<script type="text/plain" data-language="json">
"buyer": {
   "customerAccessToken": "shpsb_eyJh123456789",
   "companyLocationId": "gid://shopify/CompanyLocation/10079785100",
}
</script>

</div>
</p>


</div>
</p>


> Note:
> The `buyer` and `country` arguments for `@inContext` are ignored for cart queries. In order to get a contextualized cart, follow [Step 4: Set the Buyer Identity on Cart](#step-4-set-the-buyer-identity-on-cart) to explicitly set the buyer identity with [cartBuyerIdentityUpdate](/docs/api/storefront/latest/mutations/cartBuyerIdentityUpdate) or during [cartCreate](/docs/api/storefront/latest/mutations/cartCreate).
>
> Other arguments on the `@inContext` directive (`language`) will still work as expected for cart queries.

## Step 4: Set the Buyer Identity on Cart

Include buyer identity on cart with the storefront `customerAccessToken` from an authenticated user and the `companyLocationId`. For more details on carts, see the [Create and update a cart with the Storefront API](/docs/storefronts/headless/building-with-the-storefront-api/cart/manage) guide.

Call the [cartCreate](/docs/api/storefront/latest/mutations/cartCreate) mutation. The `buyerIdentity` argument should be supplied with the input fields `customerAccessToken` and `companyLocationId`.

<p>
<div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
<script data-option="title" data-value="Setting Buyer Identity on Cart"></script>


<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="title" data-value="GraphQL mutation"></script>

<script type="text/plain" data-language="graphql">
mutation cartCreate {
  cartCreate {
    cart {
      # Cart fields
    }
    userErrors {
      field
      message
    }
  }
}
</script>

</div>
</p>

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="title" data-value="Variables"></script>

<script type="text/plain" data-language="json">
{
  "buyerIdentity": {
    "customerAccessToken": "shpsb_eyJh123456789",
    "companyLocationId": "gid://shopify/CompanyLocation/10079785100",
  }
}
</script>

</div>
</p>


</div>
</p>


The [cartBuyerIdentityUpdate](/docs/api/storefront/latest/mutations/cartBuyerIdentityUpdate) mutation also supports a `buyerIdentity` argument. Use this mutation to update and existing cart with the `customerAccessToken` and `companyLocationId`.

> Caution:
> Updating the buyer identity on an existing cart with added products may result in an invalid cart.
>
> Products not published for the current B2B customer will be removed from cart. Products that are published, but with new quantity rules, will remain unchanged. Querying the cart will not return an error, but making updates to the cart may result in an error which can be read in the returned `userErrors` field.
>
> If the B2B customer continues to checkout with an invalid cart, the issues will be displayed as an error message.

## (Optional) Building a gated B2B store

With headless you have the flexibility to gate specific features to B2B customers. For example, you can, allow potential B2B customers to view products, but without prices or the ability to order.

When querying for a product, only include the price if there is a logged in session (valid `customerAccessToken` with a saved `companyLocationId`). Only show the "add to cart" button if there is a logged in session (valid `customerAccessToken` with a saved `companyLocationId`).