Installing SparkLayer on BigCommerce
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:
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
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.
🔗 Connecting your BigCommerce store This enables SparkLayer to connect to your BigCommerce store and begin synchronising the information it requires.
📓 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
👪 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
🛠️ 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
✅ 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!
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.
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.
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:
Within BigCommerce, go to Customers and click Customer Groups
You can either create a new customer group, or edit an existing one
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
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.
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:
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).
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.
Install the SparkLayer Core Script Within /templates/layout/base.html you'll need to add the SparkLayer Core Script that activates the SparkLayer functionality.
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.
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.
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.
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.
Finished adding the code widgets?
- You can also explore all the configurations and customisations we have available that you may want to activate on your Shopify store! Learn more
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:
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.
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 |
Invite your customers Please refer to our guide here on our recommended way to do this
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.
Need assistance? We'd be happy to help guide you through this process. Please refer to our guide here.