Install SparkLayer on Magento
Applies toMagento
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.
Do you need a developer?
Yes, for part of it. Installing the module is a developer task, and so is adding the widgets to a theme that isn't based on Luma. You can do the rest yourself, in the Magento admin and the SparkLayer Dashboard. Sections that need a developer are marked "for your developer".
Before you start
Check these before you install. It's also worth reading Magento limitations.
- Magento Open Source or Adobe Commerce, version 2.4.2 or later, with PHP 7.4 or later.
- The Multi-Source Inventory (MSI) module turned on. MSI is Magento's built-in stock management, and it's on by default in most Magento installs. Your developer can check.
- A unique SKU on every product, because SparkLayer stores B2B prices by SKU. To check, edit a product in Catalog: the SKU field is under Product Name.
- A payment method. On a test store, turn on an example payment method in Sales,Payment Services.
- Shipping rules set up in Stores,Configuration,Delivery Methods, or in SparkLayer's own shipping, so orders can be placed.
- A Magento developer or technical partner, to install the module and fit the widgets to your theme. The module supports Luma and Luma-based themes out of the box. On other themes, your developer outputs the SparkLayer web components in place of Magento's product page and product list cards. They also load the SparkLayer script for B2B customers, and connect customer sign-in to it.
- The SparkLayer Enterprise plan.
Once SparkLayer is running, you'll mostly use three areas of Magento: Catalog for products and SKUs, Customers for B2B customers, and Sales for B2B orders.
Install SparkLayer
Your developer installs the module. You then create the integration and turn SparkLayer on in the Magento admin.
- Ask your SparkLayer account manager for access to the SparkLayer Magento module.
- Ask your developer to install the module on your store. Installing a Magento module is a developer task.
- In the Magento admin, open SparkLayer B2B in the main menu. The SparkLayer B2B Integration Connection Status page lists your store views.
- For the store you want to connect, click Create and Activate Integration in the Action column.
- Go to Stores,Configuration,SparkLayer,B2B. Under General Configuration, set Enabled to Yes for your store and click Save Config.
Connect your store
Connect SparkLayer to Magento with the integration's API credentials. You don't need to write any code. If you're not sure how, our support team can help.
- In the Magento admin, go to System,Integrations, find SparkLayer B2B for your store and click Edit. The Integration Details section shows the Consumer Key, Consumer Secret, Access Token and Access Token Secret.
- Register for SparkLayer (opens in a new tab) to create your SparkLayer account.
- In the SparkLayer Dashboard, go to Integrations,Platform (opens in your SparkLayer Dashboard in a new tab). Under Your platform, select Magento.
- Enter your store URL: the address of the site you're installing SparkLayer on, such as
www.mystore.com. - Paste in the integration credentials from step 1 and click Save.
- Wait a few seconds while SparkLayer connects to your store and sets up the module.
Your store is now connected, and SparkLayer starts syncing your products and customers. Next, put your B2B customers in a B2B group.
Put customers in a B2B group
On Magento, you create customer groups in SparkLayer, not in Magento. SparkLayer then creates a matching customer group in Magento with the prefix B2B, such as B2B: Base or B2B: VIP Customers.
- In the SparkLayer Dashboard, go to Customers,Groups (opens in your SparkLayer Dashboard in a new tab). Use the base customer group, or click Create customer group to add another.
- In the Magento admin, go to Customers and open a customer, or create one.
- Set the customer's Group to the synced B2B group, such as B2B: Base, and save.
You can manage a group's rules in SparkLayer once at least one customer is in it.
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 Magento customer ID, shown in Customers in the Magento admin.
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
How you add the SparkLayer widgets (the frontend interfaces) depends on your theme:
| Your theme | Who adds the widgets |
|---|---|
| Luma, or based on Luma | You. The module sets the widgets up for you: switch them on in the Magento admin. |
| Any other theme | Your Magento developer or technical partner. Magento stores and themes are often heavily customised, so the widgets are added in your theme code. Your developer can use the Luma setup as a reference. |
Turn on the widgets for a Luma-based theme
- In the Magento admin, go to Stores,Configuration,SparkLayer,B2B.
- Under Frontend Widget, set Enabled to Yes and click Save Config.
The Frontend Widget section has these settings:
| Setting | What it does |
|---|---|
| Enabled | Turns the widgets on for the store view. |
| Script URL | The address of the SparkLayer script. By default, Use system value is ticked. |
| Spark Domain | The SparkLayer domain. By default, Use system value is ticked. |
| Show for Related Products | Adds the widget to the catalog.product.related layout block. |
| Show for Upsell Products | Adds the widget to the product.info.upsell layout block. |
| Show in Product List Widgets | Adds the widget to product widgets on CMS pages. |
The Auth section has a JWT Token Lifetime (minutes) setting, which is 10 minutes by default.
Add the widgets to other themes (for your developer)
On a theme that isn't based on Luma, the widgets are added in your theme code. Pass these steps to your Magento developer or technical partner.
Add the Core Script
Add the Core Script to your site's header, so SparkLayer turns on when a customer in a SparkLayer B2B group signs in. In the script, replace yourstorehere with your store's site ID.
Add the product detail interface
The product detail interface shows a B2B customer their prices and a way to order on each product page. Add this snippet to your product page template. Where it goes depends on your theme.
<spark-pdp parent-id="{{id}}"></spark-pdp>Add the product card interface
The product card interface shows B2B prices on collection pages. It should be added automatically when you install SparkLayer. If it isn't, add this snippet to the template that renders products on your collection pages:
<spark-product-card parent-id="{{id}}"></spark-product-card>Hide retail elements from B2B customers
Hide anything B2B customers shouldn't see, such as retail prices, quantity selectors, product options and buy buttons, by adding data-spark="b2c-only" to each of those elements. See the frontend integration guide.
Add your CSS (optional)
Add the recommended starting CSS to your theme, then change the CSS variables to match your store's colours and fonts. See Customising the design.
When you've finished, check your setup against the frontend integration guide. See Storefront 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.
- Create a price list. Go to Pricing,Price lists (opens in your SparkLayer Dashboard in a new tab) and click Create price list. An automatic price list applies a discount to your Magento price or your RRP price. A manual one uses prices you upload by CSV, including quantity pricing. See Managing pricing.
- Set up your customer groups. Go to Customers,Groups (opens in your SparkLayer Dashboard in a new tab) and choose each group's price lists, payment methods and order limits. See Customer groups.
- 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 Magento.
- Invite your customers. Work through the steps at Home,Setup (opens in your SparkLayer Dashboard in a new tab), then let customers know, for example with a newsletter. 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 Magento
Every order goes to Sales,Orders in Magento. Its status depends on the payment method the customer chose:
| Payment method | What the customer does | Order status in Magento |
|---|---|---|
| Pay on Account | Checks out without entering payment details. | Pending. Mark it as paid once you've received payment. |
| Pay by Invoice | Checks out without entering payment details. | Pending. Mark it as paid once you've received payment. |
| Pay Online by Card | Goes to the Magento checkout and pays straight away, with any payment method you've set up (such as card or PayPal). | Processing, if your store is set up for this. Ready to fulfil. |
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. For offline payment methods, take payment in your Magento admin or offline, for example by bank transfer.
Each order also has a SparkLayer Order Information tab, which shows:
| Section | What it shows |
|---|---|
| Payment Method | The payment method the customer used, such as Payment By Invoice. |
| Customer Details | The customer's SparkLayer ID, E-mail and Accounting ID. |
| Discount Information | Any SparkLayer discounts applied to the order. |
| Line Item IDs | The sparkItemKey and sparkVariantId for each line. |
More settings on Magento
Stock levels
SparkLayer can show stock levels in several ways. To show stock numbers, such as 100, turn on Manage Stock in Stores,Configuration,Inventory.
Pre-orders
SparkLayer supports pre-orders (also called back orders). When a product is on pre-order, B2B customers see a pre-order message on the product page and can still buy it. See Stock display.
Tax
SparkLayer uses the tax rules you've set up in Magento.
SparkLayer shipping
By default, B2B orders use your Magento shipping methods. To use SparkLayer's own shipping rules instead, go to Settings,Shipping (opens in your SparkLayer Dashboard in a new tab), tick Use SparkLayer shipping rates and create your shipping methods.
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 Magento, add them in the Core Script Options. If you use more than one option, combine them into one object.
This example adds a required Preferred Shipping Date field to the checkout and sets the link to your terms and conditions.
{
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',
},
},
],
}This example sends signed-in customers who open a page matching /account to /index instead.
{
accountRedirect: {
urlRegex: /\/account/g,
goTo: "/index", // page to redirect logged in users to
},
}If your store uses a dark theme, dark mode changes the widgets' colours so text stays readable.
{
display: {
darkTheme: true,
},
}FAQs and troubleshooting
Groups are created in SparkLayer and synced to Magento. Check that your store is connected at Integrations,Platform (opens in your SparkLayer Dashboard in a new tab) and that Enabled is set to Yes in Stores,Configuration,SparkLayer,B2B. If they still don't appear, contact our support team.
Check that the customer is in a synced B2B group in Magento, that the frontend widgets are set up for your theme, and that the product has a SKU with a price in the customer's price list. Then check the customer has synced.
See Troubleshooting for common issues such as pricing problems, and Magento FAQs for questions about plans, products and orders. You can also contact our support team.
Last updated