Install SparkLayer on Wix
Applies toWix
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.
What happens after you install
You don't need a developer. Once you've installed the app, 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, 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.
- 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.
- 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
- 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.
- For a product without variants, enter a SKU in the Inventory and shipping section.
- 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.
- 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.
- Open the SparkLayer for Wix app (opens in a new tab) in the Wix App Market. Or, in Wix, go to Apps,App Market and search for SparkLayer.
- Add the app and choose the Wix site to install it on.
- 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.
- Keep a note of the email address and password. You'll use them to sign in to the SparkLayer Dashboard (opens in a new tab).
- 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 (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 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.
- In Wix, go to Customers & Leads,Contacts. Click Create New to add a contact, or open an existing one.
- 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.
- Under Labels, click Add Label, type
b2band click Add. - 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 (opens in your SparkLayer Dashboard in a new tab). For example, a VIP customer has the labelsb2bandb2b-vip. - 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 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
- 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. 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 (opens in your SparkLayer Dashboard in a new tab) says so: click Show errors to see who and why. See Product and customer sync 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 area and the B2B My Cart. 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 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.
Invite our team as a collaborator
To let us complete the install, invite us to your Wix site:
- In Wix, go to Settings,Roles & Permissions and click Invite collaborators.
- Enter our support address, support@sparklayer.io.
- Give us these roles: Website Manager, CMS Editor, Marketing Manager and Customer Relations Manager.
- Send the invite, then let us know through support.
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 can also help.
How you add the CSS depends on your editor. For the full list of variables, see Customising the design.
- In your Wix dashboard, go to Settings,Custom Code and click Add Custom Code.
- Paste the CSS into Paste the code snippet here and give it a Name.
- Under Add Code to Pages, choose All pages and Load code on each new page.
- Save the code. It's listed under Head with Applied on: All pages, and you can edit it at any time.
<style>
:root {
/* Set the brand styling */
--b2b-brand-color: #5b36f5; /* Main brand colour */
--b2b-brand-color-hover: #82ACFF; /* Main brand colour hover */
--b2b-brand-font: Roboto, sans-serif; /* Main brand font */
--b2b-brand-font-heading: Roboto, sans-serif; /* Main brand heading font */
/* Update colours */
--spark-default-body-color: #555555; /* Main body colour */
--spark-primary-color: #000000; /* Main title colour */
--spark-secondary-color: var(--b2b-brand-color); /* Main highlight colour */
--spark-link-color: var(--b2b-brand-color); /* Link colour */
/* Typefaces */
--spark-font-default: var(--b2b-brand-font); /* Body typeface */
--spark-font-highlight: var(--b2b-brand-font-heading); /* Highlight typeface */
--spark-font-weight-default: 400; /* Default font weight */
--spark-font-weight-medium: 500; /* Medium font weight */
--spark-font-weight-heavy: 600; /* Bold font weight */
/* General */
--spark-border-radius-default: 0; /* Default border radius */
--spark-drawer-max-width: 700px; /* Width of overlay */
--spark-drawer-max-width-wide: 1000px; /* Width of overlay in maximised view */
/* Font sizes */
--spark-font-default-size: 14px; /* Default font size */
--spark-font-default-size-small: 14px; /* Default font size - small screens */
--spark-header-font: var(--b2b-brand-font-heading); /* Header typeface */
--spark-header-font-weight: 500; /* Header font weight */
--spark-h1-fontsize: 24px; /* Header 1 font size */
--spark-h2-fontsize: 22px; /* Header 2 font size */
--spark-h3-fontsize: 20px; /* Header 3 font size */
--spark-h4-fontsize: 16px; /* Header 4 font size */
--spark-h5-fontsize: 15px; /* Header 5 font size */
--spark-h6-fontsize: 14px; /* Header 6 font size */
--spark-pricing-fontsize: 16px; /* Font size of pricing */
--spark-pricing-font-weight: 500; /* Font weight of pricing */
--spark-pricing-fontsize-small: 14px; /* Font size of pricing on mobile */
--spark-product-code-fontsize: 16px; /* Font size of product code */
--spark-product-code-font-weight: 500; /* Font weight of product code */
--spark-product-code-fontsize-small: 14px; /* Font size of product code on mobile */
--spark-product-stockstatus-align: flex-start; /* Alignment of stock status for single variants */
/* Buttons */
--spark-button-font-family: var(--b2b-brand-font-heading); /* Button typeface */
--spark-button-color: var(--b2b-brand-color); /* Default sutton colour */
--spark-button-color-highlight: var(--b2b-brand-color-hover); /* Default button colour hover */
--spark-button-large-color: var(--b2b-brand-color); /* Large button colour */
--spark-button-large-color-highlight: var(--b2b-brand-color-hover); /* Large button colour hover */
--spark-border-radius-button: 0; /* Button border radius */
--spark-button-font-weight: 600; /* Button font weight */
--spark-button-text-transform: none; /* Button text transform */
--spark-button-text-letter-spacing: 0; /* Button letter spacing */
--spark-button-padding: 1em 2.75em; /* Button padding */
--spark-button-small-font-size: 16px; /* Small button font size */
/* Tables */
--spark-table-border-color: #CCCCCC; /* Table border colour */
--spark-table-header-background-color: #F1F1F1; /* Table header background */
--spark-table-header-text-color: #222222; /* Table header font colour */
--spark-table-header-font-weight: 500; /* Table header font weight */
/* Product Card */
--spark-product-card-button-radius: 0; /* Button radius */
--spark-product-card-button-padding: 0.75em 1em; /* Button padding */
--spark-product-card-pricing-font-size: 15px; /* Pricing font size */
--spark-product-card-pricing-font-size-small: 14px; /* Pricing font size on mobile */
--spark-product-card-select-min-height: 0; /* Set a min-height for select menu */
}
</style>- In your Wix dashboard, go to Site & Mobile App,Edit Site.
- In the editor, click Code in the left-hand menu.
- In the CSS section, open
global.cssand add the CSS variables.
For example, to change the colours and fonts:
<style>
:root {
/* Set the brand styling */
--b2b-brand-color: #5b36f5; /* Main brand colour*/
--b2b-brand-color-hover: #82ACFF; /* Main brand colour hover */
--b2b-brand-font: Roboto, sans-serif; /* Main brand font */
--b2b-brand-font-heading: Poppins, sans-serif; /* Main brand heading font */
}
</style> Next steps
Once your customers are syncing, 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. Enter a Name, a Handle and the Currency, then save. You can't change the handle or currency later. See Managing pricing.
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.
-
Set up your customer groups. Go to Customers,Groups (opens in your SparkLayer Dashboard in a new tab). 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. -
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.
-
Invite your customers. Work through the steps at Home,Setup (opens in your SparkLayer Dashboard in a new tab), 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 has example messages.
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
How B2B orders arrive in Wix
Every order goes to Sales,Orders in Wix. Its payment status depends on the payment method 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.
- In Wix, open the product and turn on Track inventory.
- Turn on Pre-order.
- Optionally, enter a Pre-order message, such as "Back order", to tell customers when the product will ship.
- 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 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 (opens in a new tab).
SparkLayer shipping
By default, B2B orders use your Wix shipping methods. To use SparkLayer's own shipping rules instead:
- In Wix, go to Settings,Shipping, Delivery & Fulfillment. You need at least one shipping region, such as the UK or USA.
- Click Manage Your Apps below the shipping region.
- Turn on Spark Layer Shipping and click Save.
- In the SparkLayer Dashboard, go to Settings,Shipping (opens in your SparkLayer Dashboard in a new tab), tick Use SparkLayer shipping rates and create your shipping methods. See Shipping rules.
Sales agents
Sales agent ordering 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.
- Set the sales agent up as a Wix contact with a complete address and the
b2blabel, so they sync to SparkLayer. - In the SparkLayer Dashboard, go to Customers,Agents (opens in your SparkLayer Dashboard in a new tab) and click Add sales agent.
- 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.
- 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.
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. 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. |
language | The language SparkLayer uses. |
paymentMethodsOrder | The order payment methods are shown in. |
cartRedirect | Where to send signed-in customers, with the cart open. |
This example adds a required Preferred Shipping Date field to the checkout and sets the link to your terms and conditions.
<script>
window.sparkWixOptions = {
termsAndConditionsLink: "/policies/terms-of-service",
checkoutCustomElements: [
{
name: 'shipping-date',
translations: {
en: {
title: 'Preferred Shipping Date',
detail: 'Shipping unavailable on weekends.',
},
},
attributes: {
required: true,
type: 'date',
},
},
],
};
</script>This example sends signed-in customers who open a page matching /account to /index instead.
<script>
window.sparkWixOptions = {
accountRedirect: {
urlRegex: /\/account/g,
goTo: "/index", // page to redirect logged in users to
},
};
</script>If your store uses a dark theme, dark mode changes the widgets' colours so text stays readable.
<script>
window.sparkWixOptions = {
display: {
darkTheme: true,
},
};
</script>FAQs and troubleshooting
Yes. Book an onboarding call (opens in a new tab) and our team walks you through setup. We complete the storefront install for you once you invite us as a collaborator. See Wix FAQs.
The storefront install probably isn't complete. Invite our team as a collaborator so we can finish it, or contact us if you already have.
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.
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 address book.
See Wix error codes for what it means and how to fix it.
See Troubleshooting for common issues such as pricing problems, and Wix FAQs for questions about plans, products, payments and orders. You can also contact our support team.
Last updated