# Install SparkLayer on BigCommerce

URL: https://docs.sparklayer.io/help/platforms/bigcommerce/install
Applies to: BigCommerce

Install SparkLayer on BigCommerce: check requirements, add the app, set up B2B customer groups, add the widgets to your Stencil theme, then test an order.

> **Quick summary**
>
> - Install the SparkLayer app from the BigCommerce Marketplace and create your SparkLayer account. SparkLayer connects to your store and syncs your products and customers.
> - A customer becomes a B2B customer when they're in a BigCommerce customer group whose name starts with `B2B`.
> - The B2B widgets are code snippets in your BigCommerce theme. Our team adds them for you free of charge, or your developer can.
> - You manage SparkLayer in the SparkLayer Dashboard at app.sparklayer.io. You set B2B prices and ordering rules at **Pricing > Price lists** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/pricing/lists)), or **SparkLayer Wholesale > Pricing > Price lists** in the Shopify app and **Customers > Groups** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/customers/groups)), or **SparkLayer Wholesale > Customers > Customer groups** in the Shopify app.

Setting up SparkLayer on BigCommerce:

1. **Before you start**: Customer accounts, SKUs, payments and shipping in BigCommerce
2. **Install**: Add the app and create your SparkLayer account
3. **Connect**: Create B2B customer groups so customers sync
4. **Widgets**: Add the code snippets to your theme
5. **Next steps**: Prices, customer group rules, a test order, launch

New to SparkLayer? [How SparkLayer works](https://docs.sparklayer.io/help/get-started/how-sparklayer-works.md) explains the basics, and [Storefront widgets](https://docs.sparklayer.io/help/storefront/interfaces.md) 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](https://docs.sparklayer.io/help/platforms/bigcommerce/limitations.md).

- **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](https://support.bigcommerce.com/s/article/Customer-Account-Creation?language=en_US).
- **A unique SKU on every product**, because SparkLayer stores B2B prices by SKU. See BigCommerce's guide to [product options and SKUs](https://support.bigcommerce.com/s/article/Product-Options-v2?language=en_US#skus).
- **A payment method.** On a test store, turn on an example [payment method](https://support.bigcommerce.com/s/article/Available-Payment-Gateways?language=en_US).
- **Shipping rules** set up in **Settings > Setup**, so orders can be placed from the [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md) area. 

## Install SparkLayer

Install the app from the BigCommerce Marketplace, then create your SparkLayer account.

1. In your BigCommerce admin, go to **Apps > Marketplace** and search for **SparkLayer**.
2. Install the [SparkLayer app](https://www.bigcommerce.com/apps/sparklayer-b2b-wholesale/).
3. Create your SparkLayer account, or sign in if you already have one.
4. 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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/)), or **SparkLayer Wholesale** in the Shopify app to see the steps still to do. **Integrations > Platform** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/integrations/platform)), or **SparkLayer Wholesale > Integrations > Platform** in the Shopify app 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`.

1. In your BigCommerce admin, go to **Customers > Customer Groups**.
2. Create a customer group, or edit an existing one.
3. Set the **Group Name** to start with `B2B`, for example `B2B - Default`, and save.
4. 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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/customers/groups)), or **SparkLayer Wholesale > Customers > Customer groups** in the Shopify app, 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

1. In the SparkLayer Dashboard, go to **Customers** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/customers/list)), or **SparkLayer Wholesale > Customers** in the Shopify app.
2. 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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/customers/list)), or **SparkLayer Wholesale > Customers** in the Shopify app says so: click **Show errors** to see who and why. See [Product and customer sync](https://docs.sparklayer.io/help/integrations/data-sync.md).

## Add the widgets

The SparkLayer widgets (the [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md)) 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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app and click **Request installation**, or click **Install SparkLayer for me** on the SparkLayer Setup page in BigCommerce. See [Request free installation](https://docs.sparklayer.io/help/support.md#request-free-installation). |
| **Add them yourself** | You or your developer, if you're familiar with BigCommerce themes and Stencil, BigCommerce's [theme templating language](https://developer.bigcommerce.com/stencil-docs/overview). Follow the steps below. |

If our team is adding the widgets, skip to [Next steps](#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. 

**Step 1.** **Add the Core Script**

The Core Script turns SparkLayer on in your store. Copy it from the [frontend integration guide](https://docs.sparklayer.io/developers/frontend.md) and replace `yourstorehere` with your store's [site ID](https://docs.sparklayer.io/help/dashboard/account.md). Then paste it inside the `<head>...</head>` tags of `/templates/layout/base.html`. The **Manually** option at **Storefront > Widgets** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app 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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets > Core script version** in the Shopify app and click **Save version**.

**Step 2.** **Add the product detail interface**

The [product detail interface](https://docs.sparklayer.io/help/storefront/interfaces/product-detail.md) shows a B2B customer their prices and a way to order on each product page. Add this snippet to your product page template:

```javascript
<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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Pricing and display** in the Shopify app. See [How products are shown](https://docs.sparklayer.io/help/storefront/product-display.md).

**Step 3.** **Add the product card interface**

The [product card interface](https://docs.sparklayer.io/help/storefront/interfaces/product-card.md) 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:

```javascript
<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`.

**Step 4.** **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](https://docs.sparklayer.io/developers/frontend.md).

**Step 5.** **Add your CSS (optional)**

To change the widgets' colours, fonts, spacing and button styles, override SparkLayer's CSS variables. Copy the [recommended starting CSS](https://docs.sparklayer.io/help/storefront/customising-design.md#recommended-starting-css) and add it inside the `<head>` of `/templates/layout/base.html`, or to a separate CSS file. See [Customising the design](https://docs.sparklayer.io/help/storefront/customising-design.md).

**Step 6.** **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](https://docs.sparklayer.io/help/support.md) for the script for your store.

When you've finished, check your setup against the [frontend integration guide](https://docs.sparklayer.io/developers/frontend.md). See [Storefront](https://docs.sparklayer.io/help/storefront.md) 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.

1. **Create a price list.** Go to **Pricing > Price lists** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/pricing/lists)), or **SparkLayer Wholesale > Pricing > Price lists** in the Shopify app 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](https://docs.sparklayer.io/help/pricing/managing-pricing.md).
2. **Add discounts (optional, Growth plan and above).** [Discounts](https://docs.sparklayer.io/help/pricing/discounts.md) 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**.
3. **Set up your customer groups.** Go to **Customers > Groups** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/customers/groups)), or **SparkLayer Wholesale > Customers > Customer groups** in the Shopify app 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](https://docs.sparklayer.io/help/customers/customer-groups.md).
4. **Place a test order.** Sign in to your store as a customer in a `B2B` group and check your prices. Place a test order with each payment method you offer. See [How B2B orders arrive in BigCommerce](#how-b2b-orders-arrive-in-bigcommerce).
5. **Invite your customers.** Work through the steps at **Home > Setup** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/)), or **SparkLayer Wholesale > Setup** in the Shopify app, then invite your customers. See the [Launch checklist](https://docs.sparklayer.io/help/get-started/launching.md).

These steps match [Get started on other platforms](https://docs.sparklayer.io/help/get-started.md#other-platforms). When you're ready to go live, work through the launch checklist:

- [Launch checklist](https://docs.sparklayer.io/help/get-started/launching.md): Test your setup, invite your first customers and go live
- [Price lists](https://docs.sparklayer.io/help/pricing/managing-pricing.md): Create a price list for each pricing tier you offer
- [Customer groups](https://docs.sparklayer.io/help/customers/customer-groups.md): Choose each group's price lists, payment methods and order rules

## Use SparkLayer Forms on BigCommerce

[SparkLayer Forms](https://docs.sparklayer.io/help/forms.md) 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](https://docs.sparklayer.io/help/forms/embedding-and-styling.md#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 `B2B` group 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](https://docs.sparklayer.io/help/forms/entries.md#edit-an-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](https://docs.sparklayer.io/help/forms/workflows.md)) 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](https://docs.sparklayer.io/help/ordering/payment-methods.md) 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

**My customer group doesn't appear in SparkLayer**

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.

**Can you add the widgets for me?**

Yes, free of charge. Click **Request installation** at **Storefront > Widgets** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app, or **Install SparkLayer for me** on the SparkLayer Setup page in BigCommerce. See [BigCommerce FAQs](https://docs.sparklayer.io/help/platforms/bigcommerce/faqs.md).

**Can I use my BigCommerce price lists?**

No. SparkLayer only uses price lists you create in SparkLayer. Changes to price lists in BigCommerce don't apply to SparkLayer.

**Where can I find more help?**

See [Troubleshooting](https://docs.sparklayer.io/help/troubleshooting.md) for common issues such as pricing problems, and [BigCommerce FAQs](https://docs.sparklayer.io/help/platforms/bigcommerce/faqs.md) for questions about plans, themes, products and orders. You can also [contact our support team](https://docs.sparklayer.io/help/support.md).