> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# B2B Edition Elements in Stencil Themes (Legacy Experience)

B2B Edition's legacy Stencil storefront experience uses a modified Stencil theme that adds B2B functionality to different areas of the storefront. If you are upgrading to B2B Edition's [Buyer Portal experience](https://support.bigcommerce.com/s/article/Buyer-Portal-Migration), you must either use a Stencil theme without the legacy modifications or remove the modifications from your existing theme.

This article contains instructions on locating B2B elements in the theme files of each modified theme provided by B2B Edition. Use these steps to identify functionality areas for customizing the legacy Stencil storefront experience, or to remove legacy functionality in preparation for upgrading to the Buyer Portal experience.

> Removing B2B Edition elements from a modified Stencil  does not cause functionality issues in the storefront once the Buyer Portal is active, but it may interrupt any additional customizations made to the theme. Make sure that your manually-added customizations are still compatible without the removed B2B elements.

## Requirements

You will need to [install Stencil CLI](/developer/docs/storefront/stencil/cli/install) in order to locate and manage `.js` files in your theme.

## B2B Edition Elements in All Themes

The following theme files only exist in the B2B Edition modified themes. Delete these files entirely if you are adjusting the theme to support the Buyer Portal experience.

* `/assets/scss/components/b3//_b3.scss`
* `/templates/components/b3/b3json.html`

Depending on the version of your theme, there may be B2B Edition elements in the following files.

**`/templates/pages/checkout.html`**

```js title="/templates/pages/checkout.html" showLineNumbers={false}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script>
    window.b3cartId = '{{cart_id}}';
</script>
<script src="https://cdn.bundleb2b.net/checkout.2.10.0.js"></script>
```

**`/templates/pages/order-confirmation.html`**

```js title="/templates/pages/order-confirmation.html" showLineNumbers={false}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script>
    window.b3checkoutId = '{{checkout.order.id}}';
</script>
<script src="https://cdn.bundleb2b.net/order-confirmations.2.10.0.js"></script>
```

## B2B Edition Elements in Cornerstone

If you are using the modified Cornerstone theme, you can find B2B Edition elements in the following theme files.

**`/assets/js/theme/global.js`**

```js title="/assets/js/theme/global.js" showLineNumbers={false}
/* BundleB2B */

const $body = $('body');

const B3StorefrontURL = 'https://cdn.bundleb2b.net/b3-auto-loader.js';

$body.append(`<script src="${B3StorefrontURL}"></script>`);

window.b3themeConfig = window.b3themeConfig || {};
...
/* BundleB2B */
```

**`/templates/layout/base.html`**

```js title="/templates/layout/base.html" showLineNumbers={false}
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
```

**`/assets/js/theme/auth.js`**

```js title="/assets/js/theme/auth.js" showLineNumbers={false}
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
```

## B2B Edition Elements in 22 Savile Row

If you are using the modified 22 Savile Row theme, you can find B2B Edition elements in the following theme files.

**`/assets/js/theme/global.js`**

```js title="/assets/js/theme/global.js" showLineNumbers={false}
/* BundleB2B */
const url = 'https://cdn.bundleb2b.net/b3-auto-loader.js';

// const url = 'http://127.0.0.1:8080/bundleb2b.latest.js';

const el = document.createElement('script');

el.setAttribute('src', url);
...
/* BundleB2B */
```

**`/templates/layout/base.html`**

```js title="/templates/layout/base.html" showLineNumbers={false}
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
```

**`/assets/js/theme/auth.js`**

```js title="/assets/js/theme/auth.js" showLineNumbers={false}
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
```

**`/assets/scss/theme.scss`**

```js title="/assets/scss/theme.scss" showLineNumbers={false}
// BundleB2B
@import "bundleb2b/bundleb2b"; // bundleb2b
// BundleB2B
```

## B2B Edition Elements in Camden

If you are using the modified Camden theme, you can find B2B Edition elements in the following theme files.

**`/assets/js/theme/global.js`**

```js title="/assets/js/theme/global.js" showLineNumbers={false}
/* BundleB2B */
const $body = $('body');

const B3StorefrontURL = 'https://cdn.bundleb2b.net/b3-auto-loader.js';

// const B3StorefrontURL = 'http://127.0.0.1:8080/bundleb2b.latest.js';

$body.append(`<script src="${B3StorefrontURL}"></script>`);
...
/* BundleB2B */
```

**`/templates/layout/base.html`**

```js title="/templates/layout/base.html" showLineNumbers={false}
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
<script>
    const inPages = () => {
...
    };
    if(!inPages()) {
        document.querySelector('.body').style.display = "block";
    }
    if(inPages()) {
        const style = document.createElement('style');
        style.innerHTML = `
            .navBar.navBar--sub.navBar--account {
                display: block !important;
            }
        `;
        document.querySelector('head').append(style);
    }
</script>
```

**`/assets/js/theme/auth.js`**

```js title="/assets/js/theme/auth.js" showLineNumbers={false}
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
```

**`/templates/components/f/header/top-utilities.html`**

```js title="/templates/components/f/header/top-utilities.html" showLineNumbers={false}
{{!-- BundleB2B: dropdown_menu_item__logout used in login module's callback --}}
```

**`/templates/pages/account/recent-items.html`**

```js title="/templates/pages/account/recent-items.html" showLineNumbers={false}
{{!-- BundleB2B: page-heading is required for account navigation rendering --}}
```

**`/assets/scss/theme.scss`**

```js title="/assets/scss/theme.scss" showLineNumbers={false}
// BundleB2B
// -----------------------------------------------------------------------------
@import "components/b3/b3";
```

## B2B Edition Elements in Roots

If you are using the modified Roots theme, you can find B2B Edition elements in the following theme files.

**`/assets/js/theme/global.js`**

```js title="/assets/js/theme/global.js" showLineNumbers={false}
/* BundleB2B */
const $body = $('body');
const B3StorefrontURL = 'https://cdn.bundleb2b.net/b3-auto-loader.js';
// const B3StorefrontURL = 'http://127.0.0.1:8080/bundleb2b.latest.js';
$body.append(`<script src="${B3StorefrontURL}"></script>`);
window.b3themeConfig = window.b3themeConfig || {};
...
/* BundleB2B */
```

**`/templates/layout/base.html`**

```js title="/templates/layout/base.html" showLineNumbers={false}
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
```

**`/assets/js/theme/auth.js`**

```js title="/assets/js/theme/auth.js" showLineNumbers={false}
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
```

**`/assets/scss/theme.scss`**

```js title="/assets/scss/theme.scss" showLineNumbers={false}
// BundleB2B
// -----------------------------------------------------------------------------
@import "components/b3/b3";
```

## B2B Edition Elements in Supermarket

If you are using the modified Supermarket theme, you can find B2B Edition elements in the following theme files.

**`/assets/js/theme/global.js`**

```js title="/assets/js/theme/global.js" showLineNumbers={false}
/* BundleB2B */
const $body = $('body');
const B3StorefrontURL = 'https://cdn.bundleb2b.net/b3-auto-loader.js';
// const B3StorefrontURL = 'http://127.0.0.1:8080/bundleb2b.latest.js';
$body.append(`<script src="${B3StorefrontURL}"></script>`);
window.b3themeConfig = window.b3themeConfig || {};
...
/* BundleB2B */
```

**`/templates/layout/base.html`**

```js title="/templates/layout/base.html" showLineNumbers={false}
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
```

**`/assets/js/theme/auth.js`**

```js title="/assets/js/theme/auth.js" showLineNumbers={false}
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
```

**`/templates/layout/instantload-base.html`**

```js title="/templates/layout/instantload-base.html" showLineNumbers={false}
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{~inject "inDevelopment" in_development}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
```

**`/templates/pages/page.html`**

```js title="/templates/pages/page.html" showLineNumbers={false}
{{!-- BundleB2B: b2c tpa content container --}}
<div class="tpa"></div>
```

**`/templates/components/products/product-view.html`**

```js title="/templates/components/products/product-view.html" showLineNumbers={false}
{{!-- BundleB2B: add to quote button container --}}
<div id="add-to-cart-wrapper" class="add_to_cart_wrapper"></div>
```

**`/assets/scss/theme.scss`**

```js title="/assets/scss/theme.scss" showLineNumbers={false}
// BundleB2B
// -----------------------------------------------------------------------------
@import "components/b3/b3";
```

## B2B Edition Elements in Vault

If you are using the modified Vault theme, you can find B2B Edition elements in the following theme files.

**`/assets/js/theme/global.js`**

```js title="/assets/js/theme/global.js" showLineNumbers={false}
/* BundleB2B */
const $body = $('body');
const B3StorefrontURL = 'https://cdn.bundleb2b.net/b3-auto-loader.js';
// const B3StorefrontURL = 'http://127.0.0.1:8080/bundleb2b.latest.js';
$body.append(`<script src="${B3StorefrontURL}"></script>`);
window.b3themeConfig = window.b3themeConfig || {};
...
/* BundleB2B */
```

**`/templates/layout/instantload-base.html`**

```js title="/templates/layout/instantload-base.html" showLineNumbers={false}
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
```

**`/assets/js/theme/auth.js`**

```js title="/assets/js/theme/auth.js" showLineNumbers={false}
/* BundleB2B */
window.createAccountValidator = createAccountValidator;
/* BundleB2B */
```

**`/templates/layout/product.html`**

```js title="/templates/layout/product.html" showLineNumbers={false}
{{!-- BundleB2B: add to quote button container --}}
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
```

**`/templates/layout/home.html`**

```js title="/templates/layout/home.html" showLineNumbers={false}
{{!-- BundleB2B --}}
{{~inject "customer" customer}}
{{~inject 'store_hash' settings.store_hash}}
{{~inject "settings" settings}}
{{~inject "page_type" page_type}}
{{~inject "currency_selector" currency_selector}}
{{!-- BundleB2B --}}
{{!-- BundleB2B --}}
window.jsContext = JSON.parse({{ jsContext }});
{{!-- BundleB2B --}}
```

**`/templates/layout/home.html`**

```js title="/templates/layout/home.html" showLineNumbers={false}
{{!-- BundleB2B: change .navBar--sub to .navBar--sub--b3 to prevent <nav></nav> from removing --}}
```

**`/assets/scss/theme.scss`**

```js title="/assets/scss/theme.scss" showLineNumbers={false}
// BundleB2B
// -----------------------------------------------------------------------------
@import "components/b3/b3";
```

## Additional Resources

* [B2B Edition for Stencil Themes](/developer/docs/b2b-edition/storefront/stencil)
* [Installing Stencil CLI](/developer/docs/storefront/stencil/cli/install)
* [Upgrading to the Buyer Portal Experience](https://support.bigcommerce.com/s/article/Buyer-Portal-Migration) (Help Center)