Installing SparkLayer on BigCommerce

Introduction
SparkLayer enables B2B functionality on your existing BigCommerce store, allowing your B2B customers to login, place orders, manage their account, and much more. 
﻿
To familiarise yourself with SparkLayer, we also recommend reviewing the following guides:
How SparkLayer Works﻿
The fundamentals of what SparkLayer does
Frontend﻿
The special "interfaces" SparkLayer enables
Features﻿
The available features and functions.
﻿
﻿
﻿
Requirements
Before installing SparkLayer on your BigCommerce store, please ensure the following:
Item
Details
Customer Storefront Accounts
You’ll need to make sure that customer accounts are enabled on your storefront so that customers can sign in. This is turned on by default on BigCommerce, and you can learn more here.
Product SKUs
In order for SparkLayer to save B2B prices for your products, all products must have SKUs. Please see this guide to learn more.
Customers
For your B2B customers to see the SparkLayer Frontend Interfaces﻿, they must belong to a customer group within BigCommerce. You can learn more below on how to configure this.
Payment Processor
If you’re installing SparkLayer on a test store, please ensure you have an example payment method enabled.
Shipping
In order to place an order via the My Cart Interface﻿, please ensure you have shipping rules set up. You can manage this within BigCommerce under Settings, Setup.
Want to see BigCommerce and SparkLayer in action? Try out our demo store﻿
﻿
﻿
﻿
﻿
The Onboarding process
When you create an account on SparkLayer, you'll get access to the SparkLayer Dashboard. The Dashboard has a customised onboarding process that gently guides you through all the necessary steps before you're ready to start inviting your B2B customers and taking orders on your website.
﻿
1
🔗 Connecting your BigCommerce store
This enables SparkLayer to connect to your BigCommerce store and begin synchronising the information it requires.
➡️ View in dashboard
2
📓 Setting up your B2B price lists
You'll then set up the B2B price lists that you want your customers to see when they login. These can be automated or you can manually upload specific pricing.
➡️ View in dashboard
3
👪 Setting up your B2B customer groups
You'll then set the ordering rules for your customers such as minimum order values, available payment methods and price lists they are assigned to.
➡️ View in dashboard
4
🛠️ Installing the frontend widgets
You'll need to install special code snippets ("widgets") into your BigCommerce theme in order to show the special SparkLayer B2B interfaces.
➡️ View in dashboard
5
✅ Testing & launching
You'll then need to run through some final checks (such as placing a test order). Once you're happy, you can then launch SparkLayer and start taking orders! 
➡️ View in dashboard
Let's now dive into each of them!
﻿
﻿
﻿
🔗 Connecting your BigCommerce store
Once you've installed the SparkLayer BigCommerce App this step of the onboarding process happens automatically. Once SparkLayer is connected to your BigCommerce store, it will automatically synchronise product and customer data and then allow you to upload price lists and proceed to install the frontend widgets.
Installing for the first time?
When installing on BigCommerce for the first time, the process works as follows:
You'll need to install the SparkLayer app (much like you would any other app). You can do this within your BigCommerce admin by going to Apps and clicking Marketplace and then searching for SparkLayer.
You'll then be asked to create an account on SparkLayer, or sign in if you already have one. 
Finally, you need to confirm acceptance of our billing plan within BigCommerce to begin your free trial
Once the above is complete, you can then return back to the SparkLayer Dashboard to continue with the onboarding process. You can also access the SparkLayer app within your BigCommerce store by going to the Apps and clicking My Apps within your BigCommerce admin and you'll find a summary of your onboarding process.
The SparkLayer Onboarding process within BigCommerce
﻿
﻿
﻿
﻿
📓 Setting up your B2B price lists
Within the Price Lists area of the SparkLayer Dashboard, you can create and manage your B2B pricing rules.
﻿
SparkLayer allows you to set the following pricing types:
Type
Details
Manual
You can manually upload a CSV file with specific prices and even enable quantity pricing
Automatic
You can use your BigCommerce prices and apply a discount, e.g. 50% off BigCommerce retail prices
Please note the following on price lists
SparkLayer will only use the price lists set up directly within the SparkLayer Dashboard and will not synchronise any price lists you may already have set up in BigCommerce.
Ready to set your pricing?
To learn more about pricing, please see our full guide here﻿.
﻿
﻿
﻿
👪 Setting up your B2B customer groups
Customer Groups let you configure specific rules for your customers, from defining their minimum order values and which price lists they see, through to what payment methods they're allowed to use when checking out.
﻿
Much like with Price Lists, you can fully manage this via the SparkLayer Dashboard.
SparkLayer will automatically synchronise customer groups from your BigCommerce store rather than you having to manually set these up in the SparkLayer Dashboard.  To get started, please following the below steps:
1
Within BigCommerce, go to Customers and click Customer Groups
2
You can either create a new customer group, or edit an existing one
3
To synchronise to SparkLayer, the customer Group Name must start with B2B. In our example below, we've set up B2B Default
﻿
For any customer groups you want to synchronise, please ensure B2B is added in the Group Name.
Please note the following on customer groups
Once you've set up your customer groups in BigCommerce, these must be assigned to at least one customer record before SparkLayer will synchronise and show them in the Customer Groups area
SparkLayer will only synchronise customer groups that start with B2B in the customer group name
4
Once the customer groups have been set up in BigCommerce (i.e. those starting with B2B), and you've assigned the customer group to at least one customer, you'll then see these appear within the SparkLayer Dashboard, within the Customer area. 
﻿
When the customer groups are imported into Sparklayer, they will always use this format: 
Item
Details
Name
The exact name set up in BigCommerce, e.g.
B2B - Default
Handle
This will use a sequential format, e.g.
bigcommerce-group-1
bigcommerce-group-2
Note: you will only need to use the handle for more advanced integrations.
Ready to configure your customer groups?
To learn more about customer groups, please see our full guide here﻿.
﻿
﻿
﻿
🛠️ Installing the frontend widgets
SparkLayer comes with ready-made B2B-optimised "widgets" that we collectively call the SparkLayer Frontend﻿. The widgets simply overlay sections of your existing BigCommerce store and enable our powerful B2B features
We offer two ways to get started with SparkLayer on your BigCommerce theme:
1
Installing our frontend widgets yourself
If you're experienced in working with BigCommerce and the stencil templating language, you should find our onboarding process a breeze (see below).
2
Request us to install for you
Our expert team can help set up the special SparkLayer frontend widgets on your BigCommerce store and some example B2B pricing. Once we're done, we can then arrange an onboarding call to walk you through it. Contact our team﻿
Installing SparkLayer yourself
Backing up your BigCommerce theme
If you'd prefer not to make these changes on your live BigCommerce theme, you can create a "Duplicate" and make the changes there before publishing. To make a duplicate, go to Channels and click Themes from within your BigCommerce admin.
﻿
If you’re looking to install yourself, there are five steps to follow.
1
Install the SparkLayer Core Script
Within /templates/layout/base.html you'll need to add the SparkLayer Core Script that activates the SparkLayer functionality. 
To get started, head over to the SparkLayer Dashboard and you'll see your customised SparkLayer Core Script within the Frontend Configurations. 
﻿
The script simply needs to be included within the main header of your website's source code within the <head>...</head> tags in your /templates/base.html file. 
If you are making edits to your website via the BigCommerce admin, you can access the template files via this URL:
yourstore.mybigcommerce.com/manage/channel/1/my-themes
2
Install the Product Detail Interface
You'll need to update your storefront's product detail page with the SparkLayer Product Purchasing Interface. When a customer logs in and SparkLayer recognises them as being a B2B customer, this will load a special interface with their specific prices and a way to purchase. 
JS
<spark-pdp parent-id="{{id}}"></spark-pdp>
<spark-pdp parent-id="{{id}}"></spark-pdp>
﻿
To get started, add the code snippet above to your product detail pages. Depending on which BigCommerce theme you are using, this is likely to be a file within the /templates/pages/ directory, e.g. /templates/pages/product.html
If your store is setup to use components, try looking in /templates/components/products/product-view.html
Once this is added, the interface will display for all logged in B2B customers and they can begin placing orders. Based on the theme you're using, the variable id may need to be adjusted to the appropriate setting, e.g. product.id
If you are making edits to your website via the BigCommerce admin, you can access the template files via this URL:
yourstore.mybigcommerce.com/manage/channel/1/my-themes
Important!
If you're using SparkLayer on your existing website, you will need to hide elements that you don't want your B2B customers to see. To do this, you can hide elements by adding data-spark="b2c-only" to any element in the code. 
﻿
You will need to do this for any code that renders a price, quantity selection, product options, buy now buttons, and anything else you want to hide from your B2B customers.

Please see our full guide here﻿ for more details.
3
Install the Product Card Interface
You'll need to update your product collection pages to show the Product Card Interface. This allows your customers to see their unique pricing and add items to their order from anywhere on your website.
JS
<spark-product-card parent-id="{{id}}"></spark-product-card>
<spark-product-card parent-id="{{id}}"></spark-product-card>
﻿
To get started, add the code snippet above to the file that renders products on your collection pages. Depending on which BigCommerce theme you are using, this is likely to be a file within the /templates/components/ directory, e.g. /templates/components/products/card.html
Once this is added, the interface will display for all logged in B2B customers and they can begin placing orders. Based on the theme you're using, the variable id may need to be adjusted to the appropriate setting, e.g. product.id
If you are making edits to your website via the BigCommerce admin, you can access the template files via this URL:
yourstore.mybigcommerce.com/manage/channel/1/my-themes
Important!
If you're using SparkLayer on your existing website, you will need to hide elements that you don't want your B2B customers to see. To do this, you can hide elements by adding data-spark="b2c-only" to any element in the code. 
﻿
You will need to do this for any code that renders a price, quantity selection, product options, buy now buttons, and anything else you want to hide from your B2B customers.

Please see our full guide here﻿ for more details.
4
Add the CSS customisations
Within /templates/base.html or in a standalone CSS file, you can customise the look and feel of SparkLayer by editing special CSS controls that overwrite the SparkLayer defaults. For example, you can change button colours, font sizes, spacing, even typefaces.
The customisations work by adding a special snippet of CSS to the source code of your website. To get, you can add the sample CSS code available in the SparkLayer Dashboard.
﻿
Once added, these then overwrite the "default" styling for SparkLayer to match your website's look and feel. Learn more﻿.
If you are making edits to your website via the BigCommerce admin, you can access the template files via this URL:
yourstore.mybigcommerce.com/manage/channel/1/my-themes
5
Enable the checkout script
When a customer places an order via the BigCommerce Checkout, SparkLayer needs to know when the order is completed. By adding a special checkout script, this then resets contents of the customer's order and allows them to place additional orders if they wish.
To get started, head over to the SparkLayer Dashboard and you'll see your customised SparkLayer Checkout Script within the Frontend Configurations. Within your checkout order confirmation page (typically 
/pages/order-confirmation.html) simply add this code at the very end of the file.
Finished adding the code widgets?
Please review our Frontend Integration Checkout﻿
You can also explore all the configurations and customisations we have available that you may want to activate on your Shopify store! Learn more﻿
﻿
﻿
﻿
✅ Testing & launching
The final step is to run some tests and checks to ensure SparkLayer is fully configured. Within the SparkLayer Dashboard, you'll see a number of Launch checks to perform, from logging in as a B2B customer, through to placing an order.
We recommend following the below steps:
1
Set up a customer record
Within your BigCommerce admin, you'll need to ensure you have an example customer record set up (either a new one or an existing). Most importantly, a customer must be associated with a Customer Group that starts with b2b. Any Customer Groups that start with b2b will automatically synchronise with SparkLayer.
﻿
2
Place a test order
We recommend placing test orders using the payment methods﻿ you've selected to set up. Please note the following:
Payment Method
Notes
Payment by Invoice
The order will be created with the Awaiting Payment status in BigCommerce. 
This will send the customer an email order confirmation
Payment on Account
The order will be created with the Awaiting Payment status in BigCommerce. 
This will send the customer an email order confirmation
Request for Quote
The order will be created with the Incomplete status in BigCommerce. 
This will not send the customer an email order confirmation
Upfront Payment
The order will be create with the Awaiting Fulfiment status in BigCommerce
This will send the customer an email order confirmation
<video class="full-screen-video__media" preload="none" autoplay="" loop="" muted="" playsinline="" webkit-playinginline="">
    <source src="https://www.sparklayer.io/assets/videos/bigcommerce-orders.mp4" type="video/mp4">
</video>
<video class="full-screen-video__media" preload="none" autoplay="" loop="" muted="" playsinline="" webkit-playinginline="">
    <source src="https://www.sparklayer.io/assets/videos/bigcommerce-orders.mp4" type="video/mp4">
</video>
﻿
3
Invite your customers
Please refer to our guide here﻿ on our recommended way to do this
﻿
﻿
﻿
﻿
Troubleshooting
To troubleshoot the most common issues (such as issues with pricing), please see our guide here﻿. You can also contact our support team﻿ and we'll be happy to assist.
﻿
﻿
﻿
Frequently Asked Questions
Plans and pricing
All SparkLayer plans are compatible with BigCommerce, from "Starter" right through to "Enterprise". Learn more about our plans and pricing.
When you sign up to SparkLayer, our team will contact you to discuss the most appropriate plan for your needs. Billing is managed via a monthly billing cycle with the option to pay annually.
You can sign up to SparkLayer on BigCommerce without initially selecting a plan. Once you've installed SparkLayer, our team will contact you to discuss the next steps. Once you've activated a plan, we are happy to work with you to upgrade or downgrade based on your changing requirements.
BigCommerce setup
You can find the official SparkLayer for BigCommerce app in the BigCommerce App Store.
SparkLayer works on all versions of BigCommerce, from BigCommerce Essentials right through to BigCommerce Enterprise. All you need is an active BigCommerce store and you're good to go.
Yes! If you're setting up SparkLayer on a development store (e.g. a test account), we can enable a special developer-mode that lets you use SparkLayer until you're ready to activate a billing plan. Please contact us﻿ for more details.
Yes, it's possible to install SparkLayer onto your existing BigCommerce DTC store (i.e. retail), meaning you can run both DTC and B2B on the same store. We call this a 'hybrid setup'; when your B2B customers sign in, they simply see the special SparkLayer Frontend﻿ interface that allow them to see their prices and place orders.
If you want to see this in action, you can try our B2B/B2C demo store here﻿
Theme setup
Yes! Within the SparkLayer Dashboard, you'll see an option to request our team to install SparkLayer for you. Typically we can do this within 1-2 working days and you're then good to go. We then offer an onboarding session to walk you through how everything works.
Yes! SparkLayer is compatible with all BigCommerce themes, even fully customised. If you need help in the setup, our team can add all the code snippets for you. 
The SparkLayer B2B widgets, including B2B pricing, cart and my account area, are only loaded once a customer who has been added to a b2b customer group successfully signs in to your store.
For all other users, your store will remain completely unaffected.
This allows you to have full control over which customers are able to see your B2B pricing and place B2B orders.
If you already have a B2B / Wholesale app installed on your store, SparkLayer can work alongside this. It's a great way to test out SparkLayer and, once you're happy, you can simply uninstall any previous B2B apps you were using. If your previous B2B app has made code changes to your BigCommerce store, you may want to ask the app developer to remove these although this is optional.
Payments
In terms of payment methods supported by SparkLayer and BigCommerce. If your customers choose "Pay Online by Card" during the SparkLayer checkout process, they will simply be taken to the BigCommerce checkout. From there, any payment methods you have set up in BigCommerce (e.g. Paypal, Affirm Pay) will show up, allowing the customers to pay by this method. We've attached a screenshot to illustrate this.
In short, if BigCommerce support this payment method, your B2B customers could select it during the checkout providing they choose "Pay Online by Card".
Products
BigCommerce does have the ability to hide collections from Customer Groups which could be one way to achieve this.
﻿
There are a few things we recommend to make the experience better:
You could create a B2B-only collection and redirect customers to this once they login. If you wanted to show special B2B-only products, you would need to create these as separate products within BigCommerce (i.e. with unique SKUs, etc)
With SparkLayer pricing, if you don't upload a price against a SKU, the B2B customer won't be able to purchase it. So this is a way to prevent them from adding items you don't want them to purchase
It is possible to adapt the BigCommerce themes to hide/show products using custom coding
Yes! SparkLayer allows you to automatically synchronise your BigCommerce prices (e.g. your main BigCommerce retail price), making it really easy to set up B2B pricing for your customers. For example, you could set your B2B prices to be 20% off your BigCommerce prices and we can even make provisions for your tax set up in BigCommerce (e.g. exclusive or inclusive of tax).
In terms of pre-ordering, SparkLayer has full support for different stock status messages and it's possible to set up products as pre-order/back-order easily - it does rely on some configuration within BigCommerce, but it's relatively easy to do!
We've full information here﻿ on how it works and you can even set up "due in" dates to give your customers visibility.
In terms of product SKUs, SparkLayer relies on these being added to your products within BigCommerce so that we can display the correct B2B pricing when your customers log in. Without a unique SKU, there's no way for SparkLayer to do this.
If you don't already have SKUs in BigCommerce, it's relatively quick to do. You can either edit individual products and add them manually, or you can use BigCommerce's 'Import' or 'Edit products' feature to do this in bulk.
If you're installing SparkLayer on a single website and you are looking to run both DTC and B2B at the same time, it will be necessary to use the same stock pool behind the scenes. From an inventory point of view, this essentially means that both DTC and B2B customers will be ordering from the same stock source which can pose challenges. 
SparkLayer has a way to "reserve" stock for your DTC customers, essentially blocking B2B customers from ordering too much inventory for a specific product. Learn more﻿﻿
Important
It is not possible to block DTC customers from ordering from your inventory and there is no mechanism in BigCommerce to do this. If you are wanting to implement this, you will need to consider:
Creating B2B-specific products on your store 
Creating a separate store just for your B2B customers, effectively separating out your inventory completely. 
﻿
User Experience
If you're looking to enable a wholesale/B2B registration form there are a few good options for this and
In summary, these are the options we recommend:
You could use your current login/registration page and enhance the registration page with some custom coding 
You could use a recommended form builder app to achieve this
It's also worth noting that you can manually add customers via the BigCommerce Customers admin and from there you could moderate your wholesale applications.
Please refer to our guide here﻿.
No. For performance, the SparkLayer Frontend only loads when a valid B2B customer successfully logs into a website; for your standard (DTC) customers, no code is loaded at all. When a B2B customer logs in, all loading of the interfaces is asynchronous which means a negligible impact on page load times and performance even though SparkLayer is a hosted third-party solution. The result is the end customer will have a rapid experience browsing products and placing orders.
We recommend consulting with a BigCommerce expert developer before making changes to your website. For their reference, you may find the following Stencil code can be used as a mechanism to hide and show content based on a B2B customer being logged in.
HTML
{{#contains (toLowerCase customer_group_name) "b2b"}}

  <!-- This content will only show for logged in B2B customers -->

{{/contains}}
{{#contains (toLowerCase customer_group_name) "b2b"}}

  <!-- This content will only show for logged in B2B customers -->

{{/contains}}
﻿
Orders
Manual payments
For manual (non-card) payment orders (e.g. Payment by Invoice), the order is saved as a "Draft order".
You can view these in your BigCommerce admin within Orders and then click Draft Orders
You can then convert these into approved orders by marking them as paid or marking them with payment terms
It's important to note that once an order has been approved, it will only then show in the customers My Account section and the SparkLayer Dashboard.
Card payments
You can view these in your BigCommerce admin within Orders 
It is possible to edit orders within BigCommerce when an order is placed via SparkLayer. If you have it configured to create orders as 'Draft orders' you can go into the order and make changes. If you subsequently then manually complete the order (i.e. Mark as paid), you can still edit the order up until the point of fulfilment.
In terms of invoicing, SparkLayer doesn't send invoices directly but there are some good ways to do this within BigCommerce using a recommended invoicing app or by sending invoices manually to your customers via your existing back-office financial system.
Within SparkLayer, we do have support for minimum (and maximum) quantities, but you're only able to set these at a product or product-variant level. It's not currently possible to set minimum order-level quantities but it's something we are considering as part of a future update!
You can manage notifications from BigCommerce by going to Settings and clicking Order Notifications
﻿
Need assistance?
We'd be happy to help guide you through this process. Please refer to our guide here﻿.
﻿
Item	Details
Customer Storefront Accounts	You’ll need to make sure that customer accounts are enabled on your storefront so that customers can sign in. This is turned on by default on BigCommerce, and you can learn more here.
Product SKUs	In order for SparkLayer to save B2B prices for your products, all products must have SKUs. Please see this guide to learn more.
Customers	For your B2B customers to see the SparkLayer Frontend Interfaces, they must belong to a customer group within BigCommerce. You can learn more below on how to configure this.
Payment Processor	If you’re installing SparkLayer on a test store, please ensure you have an example payment method enabled.
Shipping	In order to place an order via the My Cart Interface, please ensure you have shipping rules set up. You can manage this within BigCommerce under Settings, Setup.
Type	Details
Manual	You can manually upload a CSV file with specific prices and even enable quantity pricing
Automatic	You can use your BigCommerce prices and apply a discount, e.g. 50% off BigCommerce retail prices
Item	Details
Name	The exact name set up in BigCommerce, e.g. B2B - Default
Handle	This will use a sequential format, e.g. bigcommerce-group-1 bigcommerce-group-2 Note: you will only need to use the handle for more advanced integrations.
Payment Method	Notes
Payment by Invoice	The order will be created with the Awaiting Payment status in BigCommerce. This will send the customer an email order confirmation
Payment on Account	The order will be created with the Awaiting Payment status in BigCommerce. This will send the customer an email order confirmation
Request for Quote	The order will be created with the Incomplete status in BigCommerce. This will not send the customer an email order confirmation
Upfront Payment	The order will be create with the Awaiting Fulfiment status in BigCommerce This will send the customer an email order confirmation
BigCommerce
BigCommerce Metafields & Data Mapping