Installing SparkLayer on Shopify
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 or check out our blog post on the topic.
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!
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 (or Settings > Customer Accounts), please make sure the below is selected:
|
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
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
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
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
You can find more details of customer and product data by go to the Data Sync area within the SparkLayer Dashboard.
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.
Here to help! If you require assistance in uploading your prices, you can check out Common Issues guide or contact our support team.
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.
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.
Need assistance? Our support team can install the SparkLayer Frontend for you. You can request installation by going to app.sparklayer.io
You can also use our free Shopify B2B Dawn theme and get started in less than 5 minutes! Learn more
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.
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.
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.
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.
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
<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>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
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.
Last modified 5d ago