SparkLayer Connector
SparkLayer Backend
SparkLayer Frontend
Sparklayer Dashboard
Installing SparkLayer on Shopify
The onboarding process
Our onboarding process is designed to get your Shopify store up and running with SparkLayer and involves the following key steps:
Step
Synchronise your product and customer data and upload a price list
Configure your customer settings
Install the SparkLayer Frontend scripts
Test and set live on your Shopify website
Installing SparkLayer on your existing Shopify store?
One of the benefits of SparkLayer is being able to install it on your existing Shopify store without having to create a brand new standalone store. Please read our guide on what to be aware of before you begin the installation process.
Watch our onboarding video
Our onboarding video guides you through how to set up SparkLayer on your Shopify store. From uploading a price list and setting your B2B customer groups, right through to installing the frontend widgets!
Before you start
There are some important things to note before you begin the onboarding process:
Item
Details
Your Shopify VersionIf you're using Shopify Plus, there are some additional features you'll benefit from. Learn more here​
Enable Customer AccountsYou’ll need to make sure that customer accounts are enabled on your storefront so that customers can sign in. From Settings > Checkout > Customer Accounts, please make sure one of the below is selected:
- Accounts are optional
- Accounts are required
Product CatalogueIf you’re installing SparkLayer on a test store, please ensure there are a range of example products and customers as you’ll need this to start the data synchronisation
Customers For customers to see the SparkLayer Frontend, they must have a tag of
b2b associated with their account in Shopify and have at least one address assigned to them. Learn more here​Payment ProcessorIf you’re installing SparkLayer on a test store, please ensure you have an example payment method enabled, e.g. the Shopify Bogus Gateway​
Product PricesIf you're intending to manually import B2B pricing, make sure you have a an example CSV ready. Learn more here​
1. Connect your Shopify Store
The SparkLayer Shopify App connects SparkLayer and your Shopify store and its purpose is to ensure data is synchronised between both systems. Once connected, SparkLayer will automatically synchronise product and customer data and then allow you to upload price lists and install the frontend widgets.
When installing on Shopify for the first time, the process works as follows:
- 1.
- 2.You'll then be asked to create an account on SparkLayer, or sign in if you already have one.
- 3.If you're signing in, you'll then need to associate your SparkLayer account with your Shopify store
- 4.Finally, you need to confirm acceptance of the billing plan within Shopify to start your 14 day trial
Once the above is complete, you'll can then click the B2B ordering button within your Shopify admin (under Sales Channels) and view the status of your onboarding process.
Installing SparkLayer on a test store
With the SparkLayer Test mode, it's possible to create both a test and live environment for your SparkLayer integration. Learn more​
2. Synchronise your B2B data to SparkLayer
Once you've connected your Shopify store to SparkLayer by installing the Shopify App, product and customer data will automatically be synchronised with SparkLayer. Here's why:
Data type
Notes
Customer
By synchronising customer data, SparkLayer can recognise when a B2B customer signs into your website and display them their correct pricing;
Products
By synchronising product data, SparkLayer knows what product pricing to display when a B2B customer is signed in and visits a product page.
Important note about customer synchronisation
For a customer to be synchronised between Shopify and SparkLayer, please note the following
- The customer must be mapped between the two systems. Either through meta field mapping or via customer tags that you set up in Shopify.
- The customer must have a tag of
b2bassigned 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. You can read our guide here​
- At least one valid address must be assigned to their record in Shopify
Importing price lists
The final step is to connect to your price list data. There are two ways to send your price list data:
- 1.
- 2.Automatically by connecting to your backend system (e.g. ERP or CRM) to import and synchronise price list data. You can learn more about how this works in our guide here.
Importing pack sizes
SparkLayer has full support for pack sizing, meaning you can force customers to always add items to an order in your predefined packs (e.g. packs of 3, packs of 6)
Completed this step?
When you've completed this step, you'll then need to mark this as complete from within SparkLayer. In the SparkLayer Dashboard, click Configuration and under Onboarding and Setup, click Synchronise your data. From there, click the Mark as complete button to finish the process.
3. Customer Groups
Customer Groups let you configure specific rules for your customers; from defining their minimum order values and price lists, through to what payment methods they're allowed to use when checking out. Once you've set these in SparkLayer, you then need to ensure your customers in Shopify are set up to match these rules
Completed this step?
When you've completed this step, you'll then need to mark this as complete from within SparkLayer. In the SparkLayer Dashboard, click Configuration and under Onboarding and Setup, click Configure settings. From there, click the Mark as complete button to finish the process.
4. Installing the SparkLayer Frontend
Once you've completed steps above, the next step is to install the SparkLayer Frontend. Within the SparkLayer Dashboard, head over to the Frontend Integration section and you'll get personalised instructions on the steps necessary to activate the frontend.
For reference, we've also included instructions below.
Are you using the latest Shopify Dawn theme?
Completed this step?
When you've completed this step, you'll then need to mark this as complete from within SparkLayer. In the SparkLayer Dashboard, click Configuration and under Onboarding and Setup, click Install the frontend From there, click the Mark as complete button to finish the process.
4.1 Installing the core scripts
Within
/layout/theme.liquidyou'll need to add the SparkLayer core script that activates the SparkLayer functionality. We've included a sample below and you can find the exact code you need by going to Configuration and clicking Frontend within the SparkLayer Dashboard. Configuration Code
1
{%- if customer.metafields.sparklayer.authentication -%}
2
<!-- Start of SparkLayer core script-->
3
<script>
4
window.sparkOptions = {
5
"siteId": "your-site-id",
6
"platform": "shopify",
7
auth: {
8
user: {{ customer.email | json }},
9
token: {{ customer.metafields.sparklayer.authentication | json }},
10
},
11
};
12
</script><script async
13
src="https://cdn.dev.sparklayer.io/spark.latest.js"
14
></script>
15
<!-- End of SparkLayer core script-->
16
{%- endif -%}
Copied!
You can find this script in the SparkLayer Dashboard in the Configuration section, and then clicking Frontend
4.2 Installing CSS styling
Within
/layout/theme.liquidor 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.We've included a sample below and you can find the exact code you need by going to Configuration and clicking Frontend and then CSS within the SparkLayer Dashboard.
Here's a sample that changes colours, font sizes, and spacing that's been included in the main header template file.
HTML Example
1
<head>
2
...
3
...
4
5
<style type="text/css">
6
7
:root {
8
9
/* Colours */
10
--spark-secondary-color: #5b36f5;
11
--spark-link-color: #5b36f5;
12
13
/* Font sizes */
14
--spark-pricing-fontsize: 18px;
15
--spark-pricing-fontsize-small: 16px;
16
17
/* Buttons */
18
--spark-border-radius-button: 28px;
19
--spark-button-font-weight: 600;
20
--spark-button-padding: 1rem 2.75rem;
21
22
/* Tables */
23
--spark-table-header-background-color: #ddd;
24
--spark-table-header-text-color: #222;
25
26
}
27
28
</style>
29
30
</head>
Copied!
4.3 Installing the Product Purchasing 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. To update the product listing pages, please see below.
4.4 Collection Listing pages and Product Cards
SparkLayer will update the customer's specific pricing on both your product detail page and your product listing pages plus anywhere else you display product details. This allows your customers to see their unique pricing and add items to their order from anywhere on your website.
You should have a central file that controls the layout and functionality of your product card, for example
/snippets/product-card.grid.liquidWithin this file, isolate the code that displays standard pricing and anything else you want to hide. This needs to be wrapped in a special tag and then a line of code added before this as shown below
HTML Example
1
<spark-product-card parent-id="{{ product.id }}"></spark-product-card>
2
​
3
<div data-spark="b2c-only">
4
......
5
// Existing B2C Product Card Pricing Details
6
......
7
</div>
Copied!
If you're using the latest Shopify Dawn theme, you'll need to adjust the code to the following in
/snippets/product-card.liquid You can save time by using our ready-made code samples here./snippe/snippets/product-card.liquid
1
<div style="position: relative; z-index: 5;">
2
<spark-product-card parent-id="{{ product_card_product.id }}"></spark-product-card>
3
</div>
4
<div data-spark="b2c-only">
5
{% render 'price', product: product_card_product, price_class: '' %}
6
</div>
Copied!
If you only want to display the wholesale price and hide the ability to add items to an order, you can include the below code instead.
HTML Example
1
<spark-product-price parent-id="{{ product.id }}"></spark-product-price>
2
​
3
<div data-spark="b2c-only">
4
......
5
// Existing B2C Product Card Pricing Details
6
......
7
</div>
Copied!
If you're using the latest Shopify Dawn theme, you'll need to adjust the code to the following. You can save time by using our ready-made code samples here.
<spark-product-price parent-id="{{ product_card_product.id }}"></spark-product-price>4.5 Installing the Shopify Checkout Script
When a customer places an order via the Shopify Checkout, SparkLayer needs to know when the order is completed. By adding a special Shopify checkout script, this then resets contents of the customer's order and allows them to place additional orders if they wish.
To configure this setting, within the Shopify admin, go to 'Settings' and click 'Checkout'. Under 'Order Processing', add the following into the 'Additional scripts' box.
Shopify checkout script
1
<script><!-- SparkLayer Thanks Page Widget -->
2
window.sparkOptions = {
3
siteId: "your-site-id",
4
sparkDomain: 'https://app.sparklayer.io',
5
platform: "shopify",
6
onLoad: (spark) => {spark.externalClearBasket()},
7
};
8
</script><script async
9
src="https://cdn.sparklayer.io/spark.latest.js"
10
></script><!-- SparkLayer Thanks Page Widget -->
Copied!
You can find this script in the SparkLayer Dashboard in the Configuration section, and then clicking Frontend
5. Testing SparkLayer
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.
Completed this step?
When you've completed this step, you'll then need to mark this as complete from within SparkLayer. In the SparkLayer Dashboard, click Configuration and under Onboarding and Setup, click Launch SparkLayer! From there, click the Mark as complete button to finish the process.
Last modified 11d ago