Installing SparkLayer on Shopify

Search…
The onboarding process
Are you using the Shopify Dawn Theme? Read our guide on how to integrate SparkLayer!.
Our onboarding process is designed to get your Shopify store up and running with SparkLayer and involves the following key steps:
Step
Connect SparkLayer to your Shopify website by installing the SparkLayer Shopify app​
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 or check out our blog post on the topic. 
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 Version
If you're using Shopify Plus, there are some additional features you'll benefit from. Learn more here​
Enable 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, from Settings > Checkout > Customer Accounts, please make sure one of the below is selected:

Accounts are optional
Accounts are required
Product Catalogue
If 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 Processor
If you’re installing SparkLayer on a test store, please ensure you have an example payment method enabled, e.g. the Shopify Bogus Gateway​
Product Prices
If you're intending to manually import B2B pricing, make sure you have a an example CSV ready. Learn more here​
Please note: our Dashboard has all the below steps included as part of our onboarding process. Just head over to app.sparklayer.io​
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.You'll need to authorise the SparkLayer app to access your Shopify store
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 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. You can read our guide here​
At least one valid address must be assigned to their record in Shopify
You can find more details of customer and product data by clicking either Customers or Products from within the SparkLayer Dashboard.
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.Manually importing via CSV file uploads. Read our guide here​
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.
Here to help! If you require assistance in uploading your prices, you can check out Common Issues guide or contact our support team.
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)
To enable pack sizing, SparkLayer uses Metafields and you can learn how this works here.
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
Creating customer groups: Please refer to our full guide here on how 
Testing as a customer: Please follow our steps here​
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
Need assistance? Our support team can install the SparkLayer Frontend for you. You can request installation by going to app.sparklayer.io​
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.
Why is this a manual step? SparkLayer is designed to leave as small a footprint as possible within your Shopify storefront theme code. Many apps will automatically 'inject' code into your Shopify theme, adding complicated scripts and changes that are hard to track. We purposely make this a manual process so you know exactly what's changed and code changes are kept to a minimum.
Prefer to start with a ready-made theme just to test? See our Shopify Dawn B2B theme​
You can watch our video below that guides you through all the steps.
For reference, we've also included instructions below on how to test your changes with a live B2B customer account.
Time saving tip!
Before you begin setting up the SparkLayer Frontend, we recommend the following steps:
1.Within Shopify, go to Customers and create a brand new customer account, making sure to tag it with b2b. Then click the 'Send account invite' button 
2.You'll then receive an email that includes a button to take you back to your Shopify store to create a password
3.Once the password is created, you'll then be logged in as a B2B customer and you can begin your SparkLayer Frontend implementation
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. You can find the exact code you need by going to Configuration and clicking Frontend within the SparkLayer Dashboard. 
Customisations. You can customise SparkLayer with different frontend features and even change the default language. Learn more here.
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.
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.
Read our guide on how to style SparkLayer.
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.
Please refer to our guide here on how to install the Product Purchasing Interface.
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.liquid
Within 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
<spark-product-card parent-id="{{ product.id }}"></spark-product-card>
​
<div data-spark="b2c-only">
  	......
    // Existing B2C Product Card Pricing Details
    ......
</div>
If you're using the latest Shopify Dawn theme, you'll need to adjust the code to the following in  /snippets/card-product.liquid  You can save time by using our ready-made code samples here.
/snippe/snippets/product-card.liquid
<div style="position: relative; z-index: 5;">
  <spark-product-card parent-id="{{ card_product.id }}"></spark-product-card>
</div>
<div data-spark="b2c-only">
  {% render 'price', product: card_product, price_class: '' %}
</div>
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
<spark-product-price parent-id="{{ product.id }}"></spark-product-price>
​
<div data-spark="b2c-only">
  	......
    // Existing B2C Product Card Pricing Details
    ......
</div>
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="{{ 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', paste in the code from the Checkout scripts​
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.
Importing note about placing orders on Shopify
If you're using manual payment methods such as Payment by Invoice, this will generate a Shopify Draft order that can then be reviewed. Learn more about how payments work and how you can automate this.
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.
Next up...
Shopify Customisations
Advanced Shopify Configurations
Diagnosing Common Issues
SparkLayer Connector - Previous
Shopify Integration
Shopify Customisations
Last modified 16d ago
Copy link
On this page
The onboarding process
Watch our onboarding video
Before you start
1. Connect your Shopify Store
2. Synchronise your B2B data to SparkLayer
3. Customer Groups
4. Installing the SparkLayer Frontend
5. Testing SparkLayer
Next up...