Installing SparkLayer on Shopify

Introduction
SparkLayer enables B2B functionality on your existing Shopify 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:
﻿How SparkLayer Works﻿﻿
The fundamentals of what SparkLayer does
﻿Frontend﻿﻿
The special "interfaces" SparkLayer enables
﻿Features﻿﻿
The available features and functions.
﻿
﻿
﻿
Requirements
Before installing SparkLayer on your Shopify store, please ensure the following:
Item
Details
Customer Accounts
You’ll need to make sure that customer accounts are enabled on your storefront so that customers can sign in. Within your Shopify admin, go to Customer Accounts and select "Version: Classic customer accounts". 
See below for more details.
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 have a tag of b2b associated with their account in Shopify and have at least one address assigned to them.
Payment Processor
If you’re installing SparkLayer on a test store, please ensure you have an example payment method enabled.
When setting up your Shopify store, it's possible to choose from two types of 'Customer Accounts' within Shopify:
Classic customer accounts: this is how most Shopify stores are set up and allows compatibility with third-party apps and the ability to customise the look and feel
New customer accounts: this uses a 'password-less login' and has a locked down account area that uses Shopify's 'out of the box' functionality (very similar to the checkout)
Compatibility with SparkLayer
When setting up SparkLayer, you'll need to ensure the 'Classic customer accounts' option is selected within Shopify. 
﻿
There are a number of reasons for this:
SparkLayer has a B2B-optimised My Account Interface﻿ that replaces the existing account area on the Shopify store. When using the "New customer accounts", customers get directed to a separate portal which prevents this from loading
B2B processes typically require an account application process and some variety of account moderation. When using "New customer accounts", the concept of account registration is no longer possible and it's not possible to set up an account moderation flow
To check which version you're using, within your Shopify admin, click Settings and go to Checkout and accounts. Under 'Customer accounts', simply click the Edit button to change the version.
Future Compatibility
In the future, it may be possible to "combine" both SparkLayer and the "New customer accounts" but at this time, this isn't an option for merchants. You can learn more about the differences between the account types in Shopify's guide.
﻿
The Onboarding process
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.
﻿
1
🔗 Connecting your Shopify store
This enables SparkLayer to connect to your Shopify store and begin synchronising  the information it requires
➡️ View in dashboard﻿
2
🛠️ Installing the frontend widgets
You'll need to install special code snippets ("widgets") into your Shopify theme in order to show the special SparkLayer B2B interfaces. 
➡️ View in dashboard﻿
3
📓 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﻿
4
👪 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﻿
5
✅ 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!
﻿
🔗 Connecting your Shopify store
If you've installed the SparkLayer Shopify App this step of the onboarding process happens automatically. Once SparkLayer is connected to your Shopify 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 Shopify 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'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 Shopify to begin your free trial
Once the above is complete, you'll can then return back to the SparkLayer Dashboard to continue with the onboarding process. You can also access the SparkLayer app within your Shopify store by going to the B2B Ordering channel within your Shopify admin (under Sales Channels) and you'll find a summary of your onboarding process.
﻿
﻿
🛠️ Installing the frontend widgets
﻿
SparkLayer comes with ready-made B2B-optimised "widgets" that we collectively call the SparkLayer Frontend﻿. The widgets simply overlay sections of your existing Shopify store and enable our powerful B2B features
We offer three ways to get started with SparkLayer on your Shopify theme:
1
Installing our frontend widgets yourself
If you're experienced in working with Shopify and the Shopify liquid templating language, you should find our onboarding process a breeze (see below).
2
Use our B2B theme
Our ready-made Shopify B2B Dawn Theme﻿ comes preloaded with all the SparkLayer widgets, enabling everything you need to get started! In just 1-click, you can install our B2B theme in your Shopify theme library to begin using.
3
Request us to install for you
Our expert team can help set up the special SparkLayer frontend widgets on your Shopify 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 Shopify theme
If you'd prefer not to make these changes on your live Shopify theme, you can create a "Duplicate" and make the changes there before publishing.
﻿
If you’re looking to install yourself, there are five steps to follow.
1
Install the SparkLayer Core Script
Within /layout/theme.liquid you'll need to add the SparkLayer Core Script that activates the SparkLayer functionality. 
To get started, head over to the SparkLayer Dashboard and you'll see your customised SparkLayer Core Script within the Frontend Configurations. 
The script simply needs to be included within the main header of your website's source code within the <head>...</head> tags in your /layout/theme.liquid file.
﻿
2
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. 
JS
<spark-pdp parent-id="{{ product.id }}"></spark-pdp>
<spark-pdp parent-id="{{ product.id }}"></spark-pdp>
﻿
To get started, add the code snippet above to your product detail pages. 
﻿
Depending on which Shopify theme you are using, this is likely to be a file within the /sections/ directory, e.g. 
main-product.liquid
product-template.liquid 
The exact location to include the code snippet will vary on your theme. Once you've located the file that controls the product page, if your theme includes the below code, we recommend adding it directly beneath.
{%- when 'price' -%}
<spark-pdp parent-id="{{ product.id}}"></spark-pdp>
 Once this is added, the interface will display for all logged in B2B customers and they can begin placing orders.
Important!
If you're using SparkLayer on your existing website, you will need to hide elements that you don't want your B2B customers to see. To do this, you can hide elements by adding data-spark="b2c-only" to any element in the code. 
For example, let's say you want to hide some code that looks like this
<div class="product-meta__reference">
You would hide it by adjusting it to the below:
<div data-spark="b2c-only" class="product-meta__reference">
﻿
You will need to do this for any code that renders a price, quantity selection, product options, buy now buttons, and anything else you want to hide from your B2B customers.

Please see our full guide here﻿ for more details.
3
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.
JS
<spark-product-card parent-id="{{ product.id }}"></spark-product-card>
<spark-product-card parent-id="{{ product.id }}"></spark-product-card>
﻿
To get started, add the code snippet above to the file that renders products on your collection pages.
﻿
Depending on which Shopify theme you are using, this is likely to be a file within the /snippets/ directory, e.g. 
card-product.liquid 
product-grid-item.liquid
product-collection.liquid
prodct-card-grid.liquid
product-list-item.liquid
This will vary based on the theme you are using, normally the file has "grid" or "card" in the file name.
Look for this element {{ product.title }}. If you don't find this exact code, then look for something similar containing it. Add the following code directly below this line:
<spark-product-card parent-id="{{ product.id}}"></spark-product-card>
One this is added, the interface will display for all logged in B2B customers and they can begin placing orders.
Please note: based on the theme you're using, the variable product.id may need to be adjusted to the appropriate setting, e.g. card_product.id
Important!
If you're using SparkLayer on your existing website, you will need to hide elements that you don't want your B2B customers to see. To do this, you can hide elements by adding data-spark="b2c-only" to any element in the code. 
﻿
You will need to do this for any code that renders a price, quantity selection, product options, buy now buttons, and anything else you want to hide from your B2B customers.

Please see our full guide here﻿ for more details.
4
Add the CSS customisations
Within /layout/theme.liquid 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.
The customisations work by adding a special snippet of CSS to the source code of your website. To get, you can add the sample CSS code available in the SparkLayer Dashboard.
﻿
Once added, these then overwrite the "default" styling for SparkLayer to match your website's look and feel. Learn more﻿.
5
Verify the Shopify pixel
When a customer places an order via the Shopify Checkout, SparkLayer needs to know when the order is completed. By adding a special Shopify pixel, this then resets contents of the customer's order and allows them to place additional orders if they wish. Please note, this step is fully automated when you install SparkLayer and no action is typically required.
To check the SparkLayer pixel has been added to your Shopify store, go to Settings and click Customer events. You should see a pixel added by SparkLayer and this should be set to the Connected state.
﻿
If you don't see the SparkLayer pixel, you will need to reconnect your Shopify store via the SparkLayer Dashboard. Simply click the "Save" button at the bottom, and this will activate the pixel for you.
You can also watch our short video that walks through the above steps on an example Shopify store.
﻿
Finished adding the code widgets?
Please review our Frontend Integration Checkout﻿﻿
You can also explore all the configurations and customisations we have available that you may want to activate on your Shopify store! Learn more﻿﻿
﻿
📓 Setting up your B2B price lists
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
Automatic
You can use your Shopify prices and apply a discount, e.g. 50% off Shopify retail prices or 40% off your Comare-at Shopify price
Manual
You can manually upload a CSV file with specific prices and even enable quantity pricing
Ready to set your pricing?
To learn more about pricing, please see our full guide here﻿.
﻿
👪 Setting up your B2B customer groups
﻿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.
Please note
For any customers that you want to place B2B orders, they must have a tag of b2b assigned to them in Shopify within their customer record
If you intend to set up Customer Groups that apply different rules per customer, you'll also need to tag customers with additional tags (e.g. b2b  b2b-group-2) 
Customers cannot have more than two b2b related tags assigned to their customer record in Shopify. For example:
✅ This is correct b2b b2b-vip
❌ This is incorrect b2b b2b-vip b2b-user
If the tag doesn't already exist in your Shopify store, you can simply create it as a new one within Shopify by adding it to an existing customer record.
At least one valid and fully completed address must be assigned to their record in Shopify. This is to ensure the customer can go through the checkout process
﻿
Ready to set up your customer groups?
To learn more about customer groups, please see our full guide here﻿.
﻿
✅ Testing & launching
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.
🚀 See our full launch check list
You can see our full launch checklist guide here﻿ which covers the key steps to testing and then launching SparkLayer to your B2B customers.
﻿
﻿
Troubleshooting
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.
﻿
Best-practice configurations
Once you've completed the SparkLayer integration on your store, you may want to consider enhancing your B2B experience with the following. 
Customer experience
✅  Set up a B2B login page﻿
✅  Set up a B2B registration page﻿
✅  Hiding B2B products from regular DTC customers﻿
✅  Show B2B-only content﻿ 
✅  Create a B2B-only navigation menu﻿ 
✅  Modify your B2B email notifications﻿ 

Checkout process
✅  Configure B2B-only shipping﻿
✅  Customise your B2B payment methods﻿
✅  Configure custom checkout data fields﻿

Product configurations
✅  Setup product pack sizing﻿
✅  Setup minimum and maximum quantities﻿
✅  Show live inventory levels﻿
✅  Setup pre-orders and backorders﻿
✅  Set "reserve inventory" for your DTC customers﻿﻿
Automations
✅  Shopify Flow (Ready-made automations)﻿

You can explore our full list of configurations here﻿.
﻿
Frequently Asked Questions
﻿
Need assistance?
We'd be happy to help guide you through this process. Please refer to our guide here﻿.
﻿
Item	Details
Customer Accounts	You’ll need to make sure that customer accounts are enabled on your storefront so that customers can sign in. Within your Shopify admin, go to Customer Accounts and select "Version: Classic customer accounts". See below for more details.
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 have a tag of b2b associated with their account in Shopify and have at least one address assigned to them.
Payment Processor	If you’re installing SparkLayer on a test store, please ensure you have an example payment method enabled.
Type	Details
Automatic	You can use your Shopify prices and apply a discount, e.g. 50% off Shopify retail prices or 40% off your Comare-at Shopify price
Manual	You can manually upload a CSV file with specific prices and even enable quantity pricing
Updated 04 Nov 2024
Did this page help you?
Shopify
Shopify Customisations