# Install SparkLayer on Wix
URL: https://docs.sparklayer.io/help/platforms/wix/install
Applies to: Wix
Install SparkLayer on Wix: allow site members and add SKUs, install the app, label B2B contacts, style the widgets, then set up prices and test an order.
> **Quick summary**
>
> - Install the SparkLayer app from the Wix App Market and create your SparkLayer account. SparkLayer connects to your store automatically, and our team completes the storefront install once you [invite us as a collaborator](#invite-our-team-as-a-collaborator), so there's no code to add.
> - A customer becomes a B2B customer when their Wix contact has the `b2b` label and is a site member.
> - You manage SparkLayer in the SparkLayer Dashboard at app.sparklayer.io, not in Wix. 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.
> - It works with Wix Editor and Wix Studio. Our team can set it up with you: [book an onboarding call](https://connect.sparklayer.io/onboarding-meeting).
Setting up SparkLayer on Wix:
1. **Before you start**: Site members, SKUs, payments and shipping in Wix
2. **Install**: Add the app and create your SparkLayer account
3. **Connect**: Label B2B contacts so they sync
4. **Widgets**: Added for you; match them to your brand
5. **Next steps**: Prices, customer groups, 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.
> **What happens after you install**
>
> You don't need a developer. Once you've installed the app, [invite our team as a collaborator](#invite-our-team-as-a-collaborator) and we complete the storefront install for you: B2B pricing and the buy widget on product pages, the B2B My Account area and the B2B cart. You do the rest in your Wix dashboard and the SparkLayer Dashboard. Two optional extras use code: CSS to match your brand, which you can copy from our example, and [JavaScript options](#javascript-options), which are marked "for your developer".
## Before you start
Check these in your Wix dashboard before you install. It's also worth reading [Wix limitations](https://docs.sparklayer.io/help/platforms/wix/limitations.md).
- **Site members allowed.** B2B customers sign in as site members. Go to **Settings > Site Member Settings > Signup & Login Security** and, under **Who can be a site member**, choose **Everyone who signs up**.
- **A unique SKU on every product** you sell to B2B customers. SparkLayer stores B2B prices by SKU, so a product without one can't be bought. See [Add SKUs to your products](#add-skus-to-your-products).
- **A payment method** set up in **Settings > Accept Payments**.
- **Shipping rules** set up in **Settings > Shipping and Delivery**, so orders can be placed.
Once SparkLayer is running, you'll mostly use three areas of Wix: **Catalog > Store Products > Products** for products and SKUs, **Customers & Leads > Contacts** for B2B customers, and **Sales > Orders** for B2B orders.
### Add SKUs to your products
1. In Wix, go to **Catalog > Store Products > Products** and open a product. The product list has a **SKU** column, so you can spot products without one.
2. For a product without variants, enter a **SKU** in the **Inventory and shipping** section.
3. For a product with variants (such as colour or size), turn on **Manage pricing and inventory for each product variant**. Then edit the variants in the **Product variants** section, enter a different **SKU** for each variant and click **Apply**.
4. Save the product.
To add SKUs to many products at once, use Wix's product import or bulk edit.
## Install SparkLayer
Add the app from the Wix App Market, then create your SparkLayer account.
1. Open the [SparkLayer for Wix app](https://www.wix.com/app-market/web-solution/sparklayer-b2b-wholesale) in the Wix App Market. Or, in Wix, go to **Apps > App Market** and search for **SparkLayer**.
2. Add the app and choose the Wix site to install it on.
3. Create your SparkLayer account: enter your **Email Address**, **Full Name**, **Company Name**, **Company Website** and a **Password**, then click **Create Account**. If you already have an account, sign in instead.
4. Keep a note of the email address and password. You'll use them to sign in to the [SparkLayer Dashboard](https://app.sparklayer.io/).
5. Confirm the SparkLayer billing plan in Wix to start your free trial. Billing for SparkLayer runs through your Wix account.
## Connect your store
SparkLayer connects to your Wix store as soon as you install the app. It then syncs your products, and every contact with the `b2b` label, from Wix. To finish connecting, mark your B2B customers.
To see your progress, open the app in Wix at **Apps > Manage Apps** (it's listed as **SparkLayer B2B & Wholesale**). It shows **Your Wix store is connected to SparkLayer**, the setup tasks still to do, and a **Go To Dashboard** button.
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 **Wix** as **Your platform**.
If the SparkLayer Dashboard shows **We need you to confirm your SparkLayer plan**, you can carry on setting up.
### Mark customers as B2B
SparkLayer only syncs Wix contacts with the `b2b` label. Each customer must also be a site member, so they can sign in.
1. In Wix, go to **Customers & Leads > Contacts**. Click **Create New** to add a contact, or open an existing one.
2. Make sure the contact has a name, email address and a complete address, with every address field filled in. Keep a note of the email address: the customer signs in with it.
3. Under **Labels**, click **Add Label**, type `b2b` and click **Add**.
4. For a customer in a customer group other than the base customer group, add that group's label too. It's `b2b-` followed by the group's handle, as shown on the group's page at **Customers > Groups** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/customers/groups)), or **SparkLayer Wholesale > Customers > Customer groups** in the Shopify app. For example, a VIP customer has the labels `b2b` and `b2b-vip`.
5. Under **Member info**, click **Set Contact as Member**. Wix emails the customer a **Create New Password** link, and their member status changes to **Site Member**. Customers can also use **Forgot password?** on your store's sign-in page.
Once you've created a label in Wix, don't edit it. See [Wix limitations](https://docs.sparklayer.io/help/platforms/wix/limitations.md) for how Wix handles a renamed `b2b` label.
> **Addresses sync once**
>
> When a contact is labelled `b2b` for the first time, SparkLayer copies their address once. If a required field (such as name, address line or postcode) is missing, the address isn't synced at all, and no sync error is logged. After that, address changes in Wix don't sync to SparkLayer, and changes in the customer's SparkLayer address book don't sync to Wix.
### 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.
3. If they're listed, they've synced. Click **View** to check their details: under **Identifiers**, the **Platform ID** is their Wix contact ID, the one at the end of the contact's page URL in Wix, after `/contacts/view/`.
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) for more.
## Add the widgets
On Wix, our team completes the storefront install for you: B2B pricing and the buy widget on product pages, the B2B [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md) area and the B2B [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md). There's no code for you to add. When a B2B customer signs in, product pages show their B2B prices and a way to order. See [Storefront widgets](https://docs.sparklayer.io/help/storefront/interfaces.md) for what each widget does.
If prices disappear when a B2B customer signs in, the storefront install probably isn't complete. Check you've invited our team, or [contact us](https://docs.sparklayer.io/help/support.md).
### Invite our team as a collaborator
To let us complete the install, invite us to your Wix site:
1. In Wix, go to **Settings > Roles & Permissions** and click **Invite collaborators**.
2. Enter our support address, [support@sparklayer.io](mailto:support@sparklayer.io).
3. Give us these roles: **Website Manager**, **CMS Editor**, **Marketing Manager** and **Customer Relations Manager**.
4. Send the invite, then let us know through [support](https://docs.sparklayer.io/help/support.md).
If the invite doesn't reach us, create an invite link in the same place and send it to us instead.
### Match the widgets to your brand (optional)
The widgets work as they are, with generic fonts and colours. To use your own colours and fonts, add a short piece of CSS (style code) to your site. Copy the example below and change the colours and font names, or ask your developer. Our [support team](https://docs.sparklayer.io/help/support.md) can also help.
How you add the CSS depends on your editor. For the full list of variables, see [Customising the design](https://docs.sparklayer.io/help/storefront/customising-design.md).
**Wix Editor:**
1. In your Wix dashboard, go to **Settings > Custom Code** and click **Add Custom Code**.
2. Paste the CSS into **Paste the code snippet here** and give it a **Name**.
3. Under **Add Code to Pages**, choose **All pages** and **Load code on each new page**.
4. Save the code. It's listed under **Head** with **Applied on: All pages**, and you can edit it at any time.
**Example CSS for Wix Editor**
```html
```
**Wix Studio:**
1. In your Wix dashboard, go to **Site & Mobile App > Edit Site**.
2. In the editor, click **Code** in the left-hand menu.
3. In the **CSS** section, open `global.css` and add the CSS variables.
For example, to change the colours and fonts:
```html
```
## Next steps
Once your customers are syncing, 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**. Enter a **Name**, a **Handle** and the **Currency**, then save. You can't change the handle or currency later. See [Managing pricing](https://docs.sparklayer.io/help/pricing/managing-pricing.md).
**More detail**
For prices worked out from Wix, tick **Enable automatic pricing** and choose **Wix Default Price** as the **Pricing source**. Then tick **Apply a percentage variation** and set it, for example 50% **Decrease**. Depending on your Wix tax setup, SparkLayer can also allow for tax when it works out automatic prices.
For exact prices, upload a CSV instead. This also lets you set quantity pricing.
When you create the price list, you're asked whether to assign it to your default B2B customer group. You can change this later.
2. **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. The base customer group, with the label `b2b`, applies to every B2B customer. At a minimum, assign it a price list; you can also choose its payment methods and order limits. To give some customers different rules, click **Create customer group** and add the new group's label to those contacts in Wix. You can manage a group's rules once at least one customer is in it. See [Customer groups](https://docs.sparklayer.io/help/customers/customer-groups.md).
3. **Place a test order.** Sign in to your store as your test B2B customer and open a product that has a SKU. You should see your B2B prices. Add items, check out, and try each payment method you offer. The order appears in **Sales > Orders**. See [How B2B orders arrive in Wix](#how-b2b-orders-arrive-in-wix).
4. **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 let customers know. Open a contact in **Customers & Leads > Contacts** and send a message from the **Inbox** tab, or select several contacts and click **Send Email Campaign**. The [Launch checklist](https://docs.sparklayer.io/help/get-started/launching.md) has example messages.
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
## How B2B orders arrive in Wix
Every order goes to **Sales > Orders** in Wix. Its payment status depends on the [payment method](https://docs.sparklayer.io/help/ordering/payment-methods.md) the customer chose:
| Payment method | What the customer does | Order in Wix |
| --- | --- | --- |
| **Pay on Account** | Checks out without entering payment details. | **Unpaid**. Mark it as paid once you've received payment. |
| **Pay by Invoice** | Checks out without entering payment details. | **Unpaid**. Mark it as paid once you've received payment. |
| **Pay Online by Card** | Goes to the Wix checkout and pays straight away, with any payment method you've set up in Wix (such as card or PayPal). Sometimes called pro-forma payment. | **Paid**, ready to fulfil. |
| **Request for Quote** | Submits the order without choosing a payment method. | **Unpaid**. Mark it as paid once you've received payment. |
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**.
Every order placed through SparkLayer also gets the tag `b2b` in Wix. Use it to filter orders, segment them or trigger automations.
## More settings on Wix
### Pre-orders and pre-order limits
SparkLayer supports pre-orders (also called back orders) on Wix, so B2B customers can order products that aren't in stock yet. You turn them on for each product in Wix.
1. In Wix, open the product and turn on **Track inventory**.
2. Turn on **Pre-order**.
3. Optionally, enter a **Pre-order message**, such as "Back order", to tell customers when the product will ship.
4. Under **Pre-order limit**, choose **No limit**, or **Limit to** and enter a number, such as `50`. On a product with variants, the limit applies to each variant.
B2B customers then see a pre-order message on the product page and can buy the product. See [Stock display](https://docs.sparklayer.io/help/storefront/stock-display.md) for how SparkLayer shows stock.
Wix Payments only supports pre-orders that are delivered within 12 months of purchase and aren't part of a crowdfunding campaign.
### Tax
SparkLayer uses the tax rules you've set up in Wix. To choose how tax is charged at checkout, go to **Settings > Tax**. Under **How would you like to collect tax?**, choose **Tax should be added at checkout** or **Tax is already included in my prices**. See Wix's guide to [including tax in the product price](https://support.wix.com/en/article/including-tax-in-the-product-price).
### SparkLayer shipping
By default, B2B orders use your Wix shipping methods. To use SparkLayer's own [shipping rules](https://docs.sparklayer.io/help/ordering/shipping-rules.md) instead:
1. In Wix, go to **Settings > Shipping, Delivery & Fulfillment**. You need at least one shipping region, such as the UK or USA.
2. Click **Manage Your Apps** below the shipping region.
3. Turn on **Spark Layer Shipping** and click **Save**.
4. In the SparkLayer Dashboard, go to **Settings > Shipping** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/shipping)), or **SparkLayer Wholesale > Settings > Shipping** in the Shopify app, tick **Use SparkLayer shipping rates** and create your shipping methods. See [Shipping rules](https://docs.sparklayer.io/help/ordering/shipping-rules.md).
### Sales agents
[Sales agent ordering](https://docs.sparklayer.io/help/sales-ordering.md) works on Wix, so your sales team can sign in and place orders for B2B customers. Sales agents need the Starter plan or above: Starter includes 1, Growth 2 and Pro 5.
1. Set the sales agent up as a Wix contact with a complete address and the `b2b` label, so they sync to SparkLayer.
2. In the SparkLayer Dashboard, go to **Customers > Agents** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/v2/customers/agents)), or **SparkLayer Wholesale > Sales agents** in the Shopify app and click **Add sales agent**.
3. Choose the contact under **Customer**, then choose a **Role**:
- **Sales agent**: can place orders and manage addresses, shopping lists and company access on behalf of customers.
- **Sales administrator**: all sales agent permissions, plus editing order prices and creating new customers.
4. Click **Add agent**.
### JavaScript options (for your developer)
JavaScript options are small scripts that change how the widgets behave. You don't need any of them to get started. Some settings are made in JavaScript, using [Spark Options](https://docs.sparklayer.io/help/storefront.md).
On Wix, add them in **Settings > Custom Code**: click **Add Custom Code** and paste in the script. Each example below sets `window.sparkWixOptions`, so if you use more than one, combine their settings into one script.
`window.sparkWixOptions` accepts the same options as the Core Script's `window.sparkOptions`, where Wix supports them. Use the exact option names from [Core Script options](https://docs.sparklayer.io/developers/javascript-sdk/reference/options.md). For example:
| Option | What it does |
| --- | --- |
| `termsAndConditionsLink` | The link to your terms and conditions at checkout. |
| `checkoutCustomElements` | Extra fields at checkout, such as a delivery date. |
| `accountRedirect` | Where to send signed-in customers who open a matching page. |
| `display` | Display settings, such as `darkTheme`. |
| `translations` | Your own wording for SparkLayer's text, by language. See [Languages and international](https://docs.sparklayer.io/help/storefront/languages-and-international.md). |
| `language` | The language SparkLayer uses. |
| `paymentMethodsOrder` | The order payment methods are shown in. |
| `cartRedirect` | Where to send signed-in customers, with the cart open. |
**Add a checkout field, such as a delivery date**
This example adds a required **Preferred Shipping Date** field to the checkout and sets the link to your terms and conditions.
```javascript
```
**Redirect customers after they sign in**
This example sends signed-in customers who open a page matching `/account` to `/index` instead.
```javascript
```
**Turn on dark mode for dark themes**
If your store uses a dark theme, dark mode changes the widgets' colours so text stays readable.
```javascript
```
## FAQs and troubleshooting
**Can you set up SparkLayer for me?**
Yes. [Book an onboarding call](https://connect.sparklayer.io/onboarding-meeting) and our team walks you through setup. We complete the storefront install for you once you [invite us as a collaborator](#invite-our-team-as-a-collaborator). See [Wix FAQs](https://docs.sparklayer.io/help/platforms/wix/faqs.md).
**Prices disappear when a B2B customer signs in**
The storefront install probably isn't complete. [Invite our team as a collaborator](#invite-our-team-as-a-collaborator) so we can finish it, or [contact us](https://docs.sparklayer.io/help/support.md) if you already have.
**A B2B customer can't see B2B prices**
Check that the customer's Wix contact has the `b2b` label and is a site member, and that the product has a SKU with a price in the customer's price list. Then [check the customer has synced](#check-a-customer-has-synced).
**A customer's address is missing in SparkLayer**
Addresses sync only once, when the `b2b` label is first added, and only if every required field is filled in. The customer can add the address in their [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md) address book.
**The cart shows an error code**
See [Wix error codes](https://docs.sparklayer.io/help/platforms/wix/error-codes.md) for what it means and how to fix it.
**Where can I find more help?**
See [Troubleshooting](https://docs.sparklayer.io/help/troubleshooting.md) for common issues such as pricing problems, and [Wix FAQs](https://docs.sparklayer.io/help/platforms/wix/faqs.md) for questions about plans, products, payments and orders. You can also [contact our support team](https://docs.sparklayer.io/help/support.md).