Install SparkLayer on BigCommerce
Applies toBigCommerce
Before you start
Install
Connect
Widgets
Next steps
New to SparkLayer? How SparkLayer works explains the basics, and Storefront widgets shows what the widgets do.
Do you need a developer?
Only for one step. You can do everything else yourself in your BigCommerce admin and the SparkLayer Dashboard. Adding the widgets means editing your theme's code: our team does it for you free of charge, or your developer can. Sections that need a developer are marked "for your developer".
Before you start
Check these in your BigCommerce admin before you install. It's also worth reading BigCommerce limitations.
- BigCommerce Plus, Pro or Enterprise. SparkLayer needs customer groups, which are available on these plans.
- Customer accounts turned on for your storefront, so customers can sign in. They're on by default; see BigCommerce's guide to customer account creation (opens in a new tab).
- A unique SKU on every product, because SparkLayer stores B2B prices by SKU. See BigCommerce's guide to product options and SKUs (opens in a new tab).
- A payment method. On a test store, turn on an example payment method (opens in a new tab).
- Shipping rules set up in Settings,Setup, so orders can be placed from the My Cart area.
Install SparkLayer
Install the app from the BigCommerce Marketplace, then create your SparkLayer account.
- In your BigCommerce admin, go to Apps,Marketplace and search for SparkLayer.
- Install the SparkLayer app (opens in a new tab).
- Create your SparkLayer account, or sign in if you already have one.
- Confirm the SparkLayer billing plan in BigCommerce to start your free trial.
Connect your store
SparkLayer connects to your BigCommerce store as soon as you install the app, and starts syncing your products and customers. To finish connecting, set up your B2B customer groups.
To see your progress, go to Apps,My Apps and open SparkLayer. The SparkLayer Setup page lists your setup tasks, with a button for each:
- Connect your BigCommerce store
- Upload your B2B pricing
- Set up your B2B customer groups
- Enable the storefront B2B widgets
- Test & Launch SparkLayer!
The page also has Install SparkLayer for me and Go to Dashboard buttons.
In the SparkLayer Dashboard, click Open Setup on Home (opens in your SparkLayer Dashboard in a new tab) to see the steps still to do. Integrations,Platform (opens in your SparkLayer Dashboard in a new tab) shows BigCommerce as Your platform.
Set up B2B customer groups
You create B2B customer groups in BigCommerce, not in SparkLayer. SparkLayer syncs only the groups whose name starts with B2B.
- In your BigCommerce admin, go to Customers,Customer Groups.
- Create a customer group, or edit an existing one.
- Set the Group Name to start with
B2B, for exampleB2B - Default, and save. - Add at least one customer to the group: open the customer and choose the group in Customer Group.
Once a B2B group has at least one customer, it appears in the SparkLayer Dashboard at Customers,Groups (opens in your SparkLayer Dashboard in a new tab), with this name and handle:
| Field | Format |
|---|---|
| Name | The exact group name from BigCommerce, for example B2B - Default. |
| Handle (or ID) | A numbered handle, such as bigcommerce-group-1 or bigcommerce-group-2. You only need it for advanced integrations. |
Check a customer has synced
- In the SparkLayer Dashboard, go to Customers (opens in your SparkLayer Dashboard in a new tab).
- Search for the customer by name or email. If they're listed, they've synced.
If some customers couldn't sync, a banner at the top of Customers (opens in your SparkLayer Dashboard in a new tab) says so: click Show errors to see who and why. See Product and customer sync.
Add the widgets
The SparkLayer widgets (the frontend interfaces) are code snippets in your BigCommerce theme. You don't have to edit any code yourself. Choose one option:
| Option | Best for |
|---|---|
| Ask us to add them (recommended) | Most merchants. Our team adds the widgets and an example B2B price list to your store free of charge, then arranges an onboarding call to walk you through it. Go to Storefront,Widgets (opens in your SparkLayer Dashboard in a new tab) and click Request installation, or click Install SparkLayer for me on the SparkLayer Setup page in BigCommerce. See Request free installation. |
| Add them yourself | You or your developer, if you're familiar with BigCommerce themes and Stencil, BigCommerce's theme templating language (opens in a new tab). Follow the steps below. |
If our team is adding the widgets, skip to Next steps.
Add the widgets to your theme (for your developer)
These steps edit your theme's code. Pass them to your developer, or follow them yourself if you're comfortable with Stencil.
Edit your theme files in your BigCommerce admin at yourstore.mybigcommerce.com/manage/channel/1/my-themes. To try the changes before they go live, copy your theme first: go to Channels,Themes, open Advanced on your theme and choose Make a Copy. Edit the copy, then publish it when you're ready.
Add the Core Script
The Core Script turns SparkLayer on in your store. Copy it from the frontend integration guide and replace yourstorehere with your store's site ID. Then paste it inside the <head>...</head> tags of /templates/layout/base.html. The Manually option at Storefront,Widgets (opens in your SparkLayer Dashboard in a new tab) links to the same guide.
New installs use the latest Core Script version. To pin a version, choose it under Version for this store at Storefront,Widgets,Core script version (opens in your SparkLayer Dashboard in a new tab) and click Save version.
Add the product detail interface
The product detail interface shows a B2B customer their prices and a way to order on each product page. Add this snippet to your product page template:
<spark-pdp parent-id="{{id}}"></spark-pdp>The template is usually in /templates/pages/, for example /templates/pages/product.html. If your theme uses components, look in /templates/components/products/product-view.html. Depending on your theme, you may need to change the id variable, for example to product.id.
Display options for this widget, such as savings on price breaks and the RRP toggle, are at Storefront,Options,Pricing and display (opens in your SparkLayer Dashboard in a new tab). See How products are shown.
Add the product card interface
The product card interface shows B2B prices on collection pages, so customers can add items to their order from anywhere. Add this snippet to the template that renders products on your collection pages:
<spark-product-card parent-id="{{id}}"></spark-product-card>This template is usually in /templates/components/, for example /templates/components/products/card.html. As with the product page, you may need to change id to product.id.
Hide retail elements from B2B customers
If you're adding SparkLayer to an existing store, hide anything B2B customers shouldn't see, such as retail prices, quantity selectors, product options and buy buttons. Add data-spark="b2c-only" to each of those elements in your templates. See the frontend integration guide.
Add your CSS (optional)
To change the widgets' colours, fonts, spacing and button styles, override SparkLayer's CSS variables. Copy the recommended starting CSS and add it inside the <head> of /templates/layout/base.html, or to a separate CSS file. See Customising the design.
Add the checkout script
When a customer pays through the BigCommerce checkout, the checkout script tells SparkLayer the order is complete. SparkLayer then empties the customer's B2B order, so they can place another. Paste the checkout script at the very end of your order confirmation template, usually /pages/order-confirmation.html. Contact us for the script for your store.
When you've finished, check your setup against the frontend integration guide. See Storefront for the other settings you can turn on.
Next steps
Once your customers are syncing and the widgets are in place, set up your prices and rules in the SparkLayer Dashboard.
- Create a price list. Go to Pricing,Price lists (opens in your SparkLayer Dashboard in a new tab) and click Create price list. An automatic price list applies a discount to your BigCommerce prices, for example 50% off retail. A manual one uses prices you upload by CSV, including quantity pricing. SparkLayer only uses price lists created in SparkLayer, and doesn't sync price lists from BigCommerce. See Managing pricing.
- Add discounts (optional, Growth plan and above). Discounts work on top of your price lists: a blanket discount, free products, or advanced discounts with requirements based on SKU, BigCommerce Brand ID, BigCommerce Category IDs, BigCommerce Condition, BigCommerce UPC or BigCommerce Search Keywords.
- Set up your customer groups. Go to Customers,Groups (opens in your SparkLayer Dashboard in a new tab) and choose each group's price lists, payment methods and order limits. The base customer group's rules apply to every B2B customer unless another group overrides them. See Customer groups.
- Place a test order. Sign in to your store as a customer in a
B2Bgroup and check your prices. Place a test order with each payment method you offer. See How B2B orders arrive in BigCommerce. - Invite your customers. Work through the steps at Home,Setup (opens in your SparkLayer Dashboard in a new tab), then invite your customers. See the Launch checklist.
These steps match Get started on other platforms. When you're ready to go live, work through the launch checklist:
Test your setup, invite your first customers and go live
Create a price list for each pricing tier you offer
Choose each group's price lists, payment methods and order rules
Use SparkLayer Forms on BigCommerce
SparkLayer Forms work on BigCommerce, for example for trade account applications. Paste the form's embed code into your registration page: see Add a form to your store (the Other platforms tab). When you approve an application, the customer is created in BigCommerce.
- Load the form script only where you need it. It only needs to be on the registration page, not in your theme's header, and you can load it with
defer, for example<script defer src="…">. - Check the applicant isn't already a customer. Approval fails if a customer with that email already exists in BigCommerce. Add the existing customer to a
B2Bgroup in BigCommerce instead. - Ask for a state or region where it's needed. Some countries, such as Australia, need a state or region on both the billing and delivery address. If one is missing, edit the entry to add it before you approve.
- Tell approved customers how to set a password. A SparkLayer form can't set a BigCommerce password. Customise the approval email (the Send email step in the form's workflow) to link to your store's login or reset password page.
How B2B orders arrive in BigCommerce
The order's status in BigCommerce depends on the payment method the customer chose:
| Payment method | Order status in BigCommerce | Order confirmation email |
|---|---|---|
| Pay on Account | Awaiting Payment | Sent |
| Pay by Invoice | Awaiting Payment | Sent |
| Pay Online by Card | Awaiting Fulfillment | Sent |
| Request for Quote | Incomplete | Not sent |
In customer groups, Pay Online by Card is called Card at checkout, Pay by Invoice is Pay by invoice and Pay on Account is Payment on account.
FAQs and troubleshooting
Check that the group's name in BigCommerce starts with B2B, and that at least one customer is in the group. SparkLayer only syncs groups that meet both conditions.
Yes, free of charge. Click Request installation at Storefront,Widgets (opens in your SparkLayer Dashboard in a new tab), or Install SparkLayer for me on the SparkLayer Setup page in BigCommerce. See BigCommerce FAQs.
No. SparkLayer only uses price lists you create in SparkLayer. Changes to price lists in BigCommerce don't apply to SparkLayer.
See Troubleshooting for common issues such as pricing problems, and BigCommerce FAQs for questions about plans, themes, products and orders. You can also contact our support team.
Last updated