The B2B Edition Buyer Portal is a shopper-facing React application that can work on both Stencil and headless storefronts. This portal is powered by the B2B GraphQL API and uses various core BigCommerce APIs.
By replacing the default BigCommerce storefront account area, the Buyer Portal improves the account experience for both B2C and B2B customers. B2B Edition manages the account experience, providing better purchasing options for all registered users on BigCommerce. It offers personalized buying experiences and simplifies the purchasing process.
For Stencil storefronts with B2B Edition provisioned, the Buyer Portal is integrated automatically. In the BigCommerce control panel, Script Manager lists the header and footer scripts that load the hosted Buyer Portal bundle. Those scripts are kept in step with the current Buyer Portal release.
The Buyer Portal is also well suited to integrating with a fully composable or “headless” storefront, and an integration is available for Catalyst, BigCommerce’s open source Next.js storefront. See the B2B Buyer Portal course for details.
The Buyer Portal has features that let you customize the buyer experience to meet your customers’ needs. These features include:
For open-source customization, the JavaScript API, and hands-on labs, see the dedicated B2B Buyer Portal developer course. Here, we’ll focus on the available control panel settings in B2B Edition for adjusting branding, styles, injected buttons, and the login experience, without changing application code.
Store owners configure the Buyer Portal from the B2B Edition area of the BigCommerce control panel.
The main logo shown on Buyer Portal pages can be set in Settings > General.
Settings > Buyer portal includes:
Buyer Portal page content is loaded inside an iframe in your storefront. You will see framing markup similar to this in the front-end source:
Your CSS selectors apply inside the iframe. Selectors that target bundle-container or bundle-app will not apply, because those elements sit outside the iframe. For CSS Override, targeting Material UI classes used in the portal structure is usually most effective.
Several settings areas control floating and injected action buttons (for example, Add to Quote on product detail pages). Typical options include:
Custom CSS gives fine-grained control over appearance. Class name and location selector help the button match your Stencil theme. Defaults are tuned for Cornerstone; if your theme differs, update the class name to your common button classes and the location selector to the container where the button should be appended.
Buttons that float on the page (such as the Super Admin Masquerade button) usually omit a location selector and instead offer placement (for example, bottom left), vertical offset, and horizontal offset.
Settings tabs that include button configuration include:
In Settings > Login Page, you can configure the Buyer Portal login and registration experience, including:
Store owners can customize account registration forms for both B2B and B2C customers. This ensures that the registration process meets the specific needs of different customer types. Offering various account options helps improve user satisfaction and makes the registration process more efficient.
Personal and business account registration forms collect different information. Both forms gather details about the individual and their company. The main difference is that a business registration form creates a Company Account and a new customer account, while a personal registration form only creates a new customer account. Users with personal accounts can upgrade to business accounts by submitting a Business Account Application on the storefront.
Customizing the account registration fields for both types of accounts ensures you collect all the necessary information for a better shopper experience.
Follow the instructions below to access the Account Form Fields page in B2B Edition:
You can edit and add additional registration form fields from the Account Form Fields page. If you want to collect customer information that is not represented by the default fields, you can create more fields by defining the B2B Edition company and user extra fields.