B2B Edition for Stencil

BigCommerce's B2B Edition offers a range of business-to-business (B2B) solutions that help businesses grow, streamline operations, and improve the experience for both their internal teams and their business customers.

B2B Edition for Stencil is a packaged offering of the BigCommerce Enterprise plan, the B2B Edition integration, and six supported Stencil themes (opens in a new tab).

Feature enhancements

B2B Edition offers multiple B2B feature enhancements to your BigCommerce store, including the following:

Customer account hierarchy with user roles and permissions
Shared shopping lists and "buy again" functionality
Sales representative enablement tools
Quote management
Invoice & payment management

For a more complete list of B2B Edition feature enhancements, see our Help Center article on B2B Edition's features (opens in a new tab).

Stencil versus the Buyer Portal

The shopping frontend of B2B Edition for Stencil runs on Stencil storefronts alone, whereas the B2B Edition Buyer Portal (opens in a new tab) is storefront technology-agnostic.

The Buyer Portal uses the Scripts API to deploy a React app that accomplishes many of the same things as B2B Edition for Stencil. It is Stencil-compatible, but does not use Stencil's context or Handlebars theme objects.

The Buyer Portal is also channel-aware and MSF-optimized. The backend can manage B2B functionality on multiple storefronts.

For more on the differences, see our Help Center article on the Buyer Portal (opens in a new tab). We encourage businesses who are installing B2B Edition for the first time to use the Buyer Portal, as the B2B Edition team is actively developing the Buyer Portal and adding new features regularly. If you choose to use the Buyer Portal, this article is not relevant to your implementation.

Installing and locating the app

If your development sandbox or merchant store didn't come with B2B Edition pre-installed, reach out to your BigCommerce representative. You can also download the app from the B2B Edition information page (opens in a new tab) in the Apps Marketplace.

The B2B Edition backend settings are accessible in the Apps > My Apps (opens in a new tab) menu of the store control panel. The client-facing portions of the app load dynamically with JavaScript.

Customizing B2B Edition for Stencil

With B2B Edition for Stencil, you can customize display text, styling, checkout configurations, and the placement of app elements. You can also access the lifecycle methods for many B2B Edition objects and inject your own JavaScript functions.

Additionally, you can use the B2B Edition API to create, read, update, and delete items such as orders, companies, addresses, payments, sales reps, and company users. This API allows you to build your own services or integrate B2B Edition with third-party business tools, such as Salesforce or Zendesk.

This section details how to edit the DOM, CSS, and display text in a B2B Edition Stencil theme, and how to define JavaScript lifecycle methods. It assumes you are familiar with editing Stencil themes locally and pushing them to a sandbox or production store using the Stencil CLI.

Prerequisites for customizing B2B Edition

Node.js 14+ and npm (opens in a new tab)
The Stencil CLI
A Stencil-scoped API account access_token, to push your custom B3-optimized theme to a store
A text editor or IDE, such as VS Code (opens in a new tab)
Access to a BigCommerce store control panel with store owner permissions

Customizing page containers

B2B Edition for Stencil renders client-facing pages and elements by mounting fixed containers to BigCommerce themes using JavaScript. B2B Edition elements and containers are B3 objects. You can change the placement of select B3 elements by specifying the DOM node on which you want B2B Edition to mount the container using the following steps:

Insert window.b3themeConfig.useContainers = {} into your theme's assets/js/global.js file.
Within window.b3themeConfig.useContainers = {}, create a property with the name of the B3 container as its key and the selector for the theme element on which it will mount as its value.

When done, the object will resemble the following:

Example: Specify a custom mount node for the dashboard container

window.b3themeConfig.useContainers = {
 /* B3 will append the dashboard container to the first returned DOM node with a class of "page" that is a descendant of an element with the class of "container" */
	'dashboard.container': '.container .page',
}

For a list of B3 container names and their default placements, see the B3 containers reference (opens in a new tab).

Customizing styles

You can customize the styling of many B3 elements using CSS.

To modify the styling of a B3 module, follow these steps:

Insert window.b3themeConfig.useStyles = {} into your theme's assets/js/global.js file.
Within window.b3themeConfig.useStyles = {}, create a property with the name of the B3 element as its key and an object that defines the desired CSS styles as its value.

Because the CSS is written in a JavaScript object, two-word properties, like background-color, must be written with camel case syntax. For example, backgroundColor: "red".

When done, the object will resemble the following:

Example: Specify custom styles for the TPA button

window.b3themeConfig.useStyles = {
/* B3 will use the specified styles for the "Trade Partner Application" button that is appended to the secondary navigation menu */
  'tpa.entryButton': {
    fontFamily: 'Karla,Arial,Helvetica,sans-serif',
    fontSize: '1rem',
    listStyle: 'none',
    boxSizing: 'border-box',
    lineHeight: 'inherit',
    transition: 'color .15s ease',
    display: 'block',
    color: '#333',
    fontWeight: 700,
    padding: '1rem .78571rem',
    textDecoration: 'none',
    textTransform: 'uppercase',
  },
};

For more on B3 element names and their styles, see the B3 styles reference (opens in a new tab).

Customizing display text

You can customize display text for many B3 elements, such as buttons, headers, and labels.

To overwrite the default text that B3 renders, follow these steps:

Insert window.b3themeConfig.useText = {} into your theme's assets/js/theme/global.js file.
Within window.b3themeConfig.useText = {}, create a property for each element you would like to overwrite, using B3 element names as keys and strings containing the new display text as values.

When done, the object will resemble the following:

Example: Specify custom display text for the quick order button

window.b3themeConfig.useText = {
/* B3 will now use the call to action "Place Quick Order" instead of the default "Quick Order Pad" for the button that is appended to the secondary navigation menu */
 'nav.button.quickOrderPad': 'Place Quick Order',
}

For B3 element names and their default text values, see the B3 text reference (opens in a new tab).

Overwriting and injecting JavaScript

B3 has lifecycle methods for many modules that allow you to inject custom JavaScript functions at different times during page render. Each supported module has the following four global keys:

Key	Type	Default	Definition
overwrite	boolean	false	Specifies whether to overwrite B3 functions for the module.
callback()	function	(no-op)	Calls all enclosed functions after all other B3 code has run, regardless of the value of `overwrite`.
beforeMount()	function	(no-op)	Calls all enclosed functions before the module renders.
mounted()	function	(no-op)	Calls all enclosed functions after the module has rendered.

To overwrite and/or inject custom functions for a supported B3 module, follow these steps:

Insert window.b3themeConfig.useJavaScript = {} into your theme's assets/js/global.js file.
Within window.b3themeConfig.useJavaScript = {}, create a property for each of the modules you'd like to customize. Uses the module name as the key and an object that defines values for the global keys as its value.

When done, your object will resemble the following example that demonstrates the call stack of each function:

Example: Specify lifecycle method values for the quick order pad module

window.b3themeConfig.useJavaScript = {
  quickorderpad: {
    overwrite: false,
    callback() {
      console.trace(`quickorderpad.callback() runs after all other quickorderpad functions`);
    },
    beforeMount() {
      console.trace(`quickorderpad.beforeMount() runs before quickorderpad mounts`);
    },
    mounted() {
      console.trace(`quickorderpad.mounted() runs after quickorderpad mounts`);
    }
  }
}

The following displays the example's browser console output:

B3 console log output

For a full list of available modules, see the B3 JavaScript reference (opens in a new tab).

B2B Edition API

You can find instructions on how to get a B2B Edition API token from the storefront context in the B2B Edition authentication article.

For the complete list of B2B Edition API endpoints, see the B2B Edition API Reference.

Additional B2B Edition resources

Did you find what you were looking for?

reCAPTCHA support Catalyst