Headless with B2B

This guide will help you build either a dedicated or blended B2B custom storefront. It'll take you through the following steps:

Creating a storefront customerAccessToken
Retrieving a companyLocationId
Using the customerAccessToken and companyLocationId, contextualize storefront queries to get B2B pricing, volume pricing, and quantity rules
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's 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

Anchor link to section titled "Requirements"

Your store is on a Shopify Plus plan.
You have Apps and channels permissions on the Shopify store that you’re working with.
You’ve completed the Getting started with the Storefront API guide.
You’re familiar with Creating and updating a cart with the Storefront API.
You’ve completed the Getting started with the Customer Account API guide.
You’ve obtained a Customer Accounts API token.

Step 1: Get a Storefront `customerAccessToken`

Anchor link to section titled "Step 1: Get a Storefront customerAccessToken"

A storefront customerAccessToken is one component needed to contextualize Storefront API queries for B2B and set a buyer identity on cart.

After authenticating with the Customer Accounts API, call the storefrontCustomerAccessTokenCreate mutation to get a Storefront customerAccessToken. Save the Storefront customerAccessToken that's returned by this request as it will be used to contextualize product queries and cart.

Step 2: Get a Company Location ID

Anchor link to section titled "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 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
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

Anchor link to section titled "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.

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

Step 3: Contextualize Storefront API Requests

Anchor link to section titled "Step 3: Contextualize Storefront API Requests"

Including the buyer argument on the @inContext directive will contextualize any storefront queries for a B2B customer. Any queries and mutations that need to be contextualized should be updated to include a buyer.

With a contextualized query, you can access a quantityRule and quantityPriceBreaks on a product variant, as well as get a price that's contextualized for the B2B customer.

Step 4: Set the Buyer Identity on Cart

Anchor link to section titled "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 guide.

Call the cartCreate mutation. The buyerIdentity argument should be supplied with the input fields customerAccessToken and companyLocationId.

The cartBuyerIdentityUpdate mutation also supports a buyerIdentity argument. Use this mutation to update and existing cart with the customerAccessToken and companyLocationId.

(Optional) Building a gated B2B store

Anchor link to section titled "(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).