Shopify Customisations

Search…
Introduction
Once SparkLayer is installed, you can immediately allow your B2B customers to login and start placing orders. Beyond the initial SparkLayer installation, you may also want to apply some further modifications to really customise the B2B experience. In our guide below, we've detailed a range of suggested customisations that will supercharge your Shopify B2B store! 
Please note, some customisations vary in complexity and you may want to engage a Shopify expert to assist.
Are you using the Shopify Dawn Theme? Read our guide on how to integrate SparkLayer.
Using Shopify Plus? See what's also possible in our Shopify Plus configurations guide​
1. Storefront configuration
First up, how to set up your Shopify store! When you're in the process of setting up your Shopify B2B store, there are two ways to go about this:
1.Set up as a new standalone Shopify store 
2.Enable wholesale functionality on existing Shopify store
Both have positives and negatives and it's ultimately a business decision as to which is the best route to take. Read our blog post on the topic and we've also got a guide below on how to create an additional Shopify store.
Considerations when adding SparkLayer to your existing Shopify store 
A major benefit of SparkLayer is being able to integrate it without needing to duplicate stores. If you're looking to implement SparkLayer in this way, it's important to consider the following:
Stock and warehouses: currently, it's not possible to route B2B orders to use specific stock locations in Shopify when using the checkout. This means that, if you're installing SparkLayer on your main Shopify store, B2B orders will need to share the same stock pool. This can have knock-on effects on stock allocation and the impact needs to be carefully considered.
Multi-currency: Due to limitations in the Shopify API behind-the-scenes not supporting multi-currency per store, SparkLayer can only support the base currency of the store. If you're looking to enable multiple currencies, a work-around is to create a store per currency. 
Verify your apps: Do you have any apps installed that may interfere with the B2B experience? E.g. apps that send 'leave a review' emails or any post-purchase follow ups. Many will allow you to exclude interactions based on customer tags; remember, all customers that use SparkLayer will have a tag of b2b assigned. Learn more​
Analytics and reporting: SparkLayer will show in Shopify as a Sales Channel called B2B Ordering which makes it easy to split out your reports. You can also follow our Google Analytics guide to split out your more in-depth reporting
Affiliate and tracking pixels: your Shopify site and Shopify checkout may have special tracking code installed to monitor sales; you'll need to make sure this is excluded for B2B customers. Within Shopify, go to Settings, choose Checkout and look for Additional scripts. It's possible to hide and show Additional scripts based on criteria such as the customer tag (e.g. b2b) so consideration will need to be given if certain tags need to be excluded. Learn more​
2. Login page
When SparkLayer is used with Shopify, the existing Shopify login functionality is used whereby a customer can sign in with an email address and password via the /account URL
Because your standard (B2C) customers will also use this page, you may want to adapt it slightly with specific messaging or even pointing users to different pages on your website. To do so, open and edit the following file:
Item
File 
Account login
/templates/customers/login.liquid
The Shopify login form can be dropped into any page so you could create a very bespoke layout for your B2B customers.
When creating your page, simply include the below code to generate the login form.
Shopify login form
1
<form method="post" action="/account/login" id="customer_login" accept-charset="UTF-8" novalidate="novalidate"><input type="hidden" name="form_type" value="customer_login">
2
                    
3
    <input type="hidden" name="utf8" value="✓">
4
    <input type="hidden" name="checkout_url" value="/index#spark-account">
5
                    
6
    <label for="CustomerEmail">Email</label>
7
    <input type="email" name="customer[email]" id="CustomerEmail" autocomplete="email" autocorrect="off" autocapitalize="off" value="[email protected]">
8
                
9
    <label for="CustomerPassword">Password</label>
10
    <input type="password" value="password" name="customer[password]" id="CustomerPassword">
11
            
12
    <input type="submit" class="btn" value="Sign In">
13
     
14
</form>
Copied!
Forcing customers to login before browsing the site
If you're wanting to restrict your entire website to be locked down until a customer successfully logs in, you can do so by editing the theme.liquid file within your storefront theme. We've included an example on how to setup this up or you could install a Shopify third-party application. 
Example login page
Our sample code works as follows:
1.Code is added to the theme.liquid file
2.For logged out users, all visitors are redirected to the account login page with content accessible in templates/customer/login.liquid 
3.For logged in users and those tagged with b2b, they'll then be able to view the entire website as normal.
/layout/theme.liquid
1
<!-- Add this code to theme.liquid after the <body> tag-->
2
​
3
 {% comment %} Define pages that are restricted {% endcomment %}
4
  {%- if customer.tags contains 'b2b' or template contains 'customers/' or request.path == '/challenge' -%}
5
    {% assign showSiteForTrade = true %}
6
  {% endif %}
7
  {%- if showSiteForTrade == blank -%}
8
    {% assign showTradeLogin = true %}
9
  {% endif %}
10
​
11
  {% comment %} Show content for logged in users {% endcomment %}
12
  {%- unless showTradeLogin -%}
13
  
14
  <!-- Content you want to show for logged in users -->
15
  
16
  {% endunless %}
17
​
18
  {% comment %} Show content for logged out users {% endcomment %}
19
    {%- if showTradeLogin -%}
20
      <script>
21
        window.location.href = '/account/login';
22
      </script>
23
    {% endif %}
24
  {% comment %} END {% endcomment %}
25
  
26
​
Copied!
Redirecting users after login
It's possible to redirect the customer after they login to a specified URL on your Shopify store. In the templates directly, open /templates/customers/account.liquid and beneath where you see the login form, add the following hidden input field.
Redirect after login
1
{% form 'customer_login', novalidate: 'novalidate' %}
2
​
3
<input type="hidden" name="checkout_url" value="/index#spark-account">
Copied!
Even with this code, you may find that you are still redirected to the account area very briefly before being redirected. You can get around this by adding a meta refresh to the account area. Open templates/customers/account.liquid and add the following code:
Redirect after login
1
{% if customer.tags contains 'b2b' %}
2
	
3
  <div style="text-align: center">
4
    You're now being redirected. If you're not redirected in 10 seconds, 
5
    <a href="/index#spark-account"><strong>click here.</strong></a>
6
  </div>
7
  
8
  {% else %}
9
  
10
  ......
11
  
12
  Standard my account area goes here
13
  
14
  ......
15
  
16
  {% endif %}
Copied!
3. Registration form
As with the Shopify login form, SparkLayer makes use of the existing functionality of Shopify. Our best practise guide includes which form fields you should ideally capture when prospective customers apply for an account.
To enable additional fields, you can modify the customer registration form and collect the additional information you need via customer metafields. Read the Shopify guide on how to do this and we've included a sample below.
Item
File 
Account register
/templates/customers/register.liquid
Customer Registration Form - Liquid Code
1
<label for="CustomerFormB2BTaxID">Company Tax ID</label>
2
  <input
3
    type="text"
4
    id="CustomerFormB2BTaxID"
5
    name="customer[note][B2B: Company Tax ID]"
6
    placeholder="e.g. GB-2242424"
7
  />
Copied!
Using a third-party application
To really customise the registration process on Shopify, you may want to consider installing a form builder app to allow you more control over the experience.
A highly-popular app is Customer Fields, and it's powerful functionality allows you to tailor the form fields you capture, moderate applications, and even customise the notifications. Learn more about Customer Fields.
You can see this in action on our B2B demo site​
4. Products: Hiding & Showing
If you're running both B2B and B2C within the same Shopify store, there may be a range of products that you want to only show and be purchasable to logged in B2B customers. Perhaps they can only be purchased in high-volumes or they are exclusive to your B2B customers. It's possible to achieve this by using Shopify's tagging system making it easy to hide and show products based on who the customer is.
​Read our full guide here​
To make things easier, the Shopify app store also has a number of third-party applications that make this possible and one we recommend is Locksmith.
If you're looking to implement this in a more custom fashion, please refer to the following documentation.
5. B2B-only content
Showing B2B-only content
Within Shopify, you can very easily adapt your Shopify code to show (or hide) content based on who the customer is. This means, for B2B customers, you could show additional links in the navigation, content on the homepage or product pages, or even hide content from showing.
The code to do this is very simple and we've included a sample below.
Product Detail Page - Liquid Code
1
{% if customer.tags contains 'b2b' %}
2
​
3
    Show this content to logged-in B2B customers
4
​
5
{% else %}
6
​
7
    Show this content to logged-out customers
8
​
9
{% endif %}
Copied!
Showing additional B2B product content
Shopify has a powerful feature that allows you to extend product data to include additional content specific to a product SKU; you can learn more about this in the Shopify metafield guide. In the context of wholesale (B2B) ordering, it can be a great way to enrich your product pages with additional wholesale-specific information such as bar codes, marketing content, and anything else.
To begin using product metafields, you'll need to install a Shopify app to allow these to be viewed and edited. Visit the Shopify App store to find a suitable one for you (some are free)
Once you've populated additional content against your products, you can then update your product detail template to render the data. Here's a sample that renders additional product information but only if a customer is signed in and has a tag of b2b assigned against them. For any other customer, this additional content will be hidden from view.
Product Detail Page - Liquid Code
1
{% if customer.tags contains 'b2b' %}
2
​
3
  {%assign custom_attributes = product.metafields.products %}
4
  
5
  {%if custom_attributes.size > 0 %}  
6
  
7
  <div class="product-meta">
8
    <p><strong>Additional wholesale information:</strong></p>
9
    <ul>
10
      {% for field in custom_attributes %}
11
        {% assign attribute_code = field | first %}
12
        {% assign attribute_value = field | last %}
13
        <li class="custom-attribute-item">
14
        <span class="custom-attribute-name">{{ attribute_code }}</span>: 
15
        <span class="custom-attribute-value">{{attribute_value}}</span> 
16
        </li>
17
      {% endfor %}
18
    </ul>
19
    </div>
20
  {%endif%}
21
​
22
{% endif %}
Copied!
6. Automatically mark Draft Orders as paid
By default, when you set up SparkLayer on your Shopify store, unless you're using 'Upfront Payment', all orders created by customers will be generated as Draft orders within Shopify (learn about Shopify Draft Orders). You can access these in the Shopify admin by clicking Orders and then Draft Orders.
One of the big benefits of using Draft orders is the ability to make changes before you then take payment and fulfil. For example, you may need to adjust quantities of products ordered or apply a special shipping method.
It's possible to automatically mark these orders as paid and then process them like any other order.
If you're using Shopify Plus, you can force customers to go through the checkout even if they choose a manual payment method. Learn how this works​
You can use an automation app such as Mechanic to also achieve this and you can use our sample scripts here​
7. Shopify checkout
When a customer adds products to their Quick Order and uses the Pay Online by Card payment method they'll be taken to the Shopify checkout process. This will operate in the same way as a normal Shopify checkout but also include the following additions:
The price they will pay per product with their specific B2B pricing
An automatically applied discount code that applies their B2B discount
Shopify Plus checkout
If you're using Shopify Plus, you can apply further customisations to make the checkout process B2B-centric. Read our guide on the Shopify Plus checkout

Please note: If customers are using other payment methods, these will be sent to Shopify as Draft orders. Learn more​
8. Creating an additional store
As noted in Storefront configuration above, it may be necessary to create a separate Shopify store to manage your B2B channel (see our guide here). Although this may sound daunting, the good news is it's relatively straightforward to set up and you can automate a lot of the process.
The most common reasons why you'd create a secondary Shopify store include:
Multiple-currencies: You want to allow your B2B customers to place orders in different currencies (e.g. USD, EUR, GBP). Currently, Shopify only allows B2B orders to be created in the 'default' currency of the store.
Stock levels: You need to separate out your B2B stock from your B2C 
Products: You want to create a totally different product catalogue for your B2B customers
Integrations: you need to integrate your B2B channel with a different system and keep it separate from your B2C channel
Our recommended approach is as follows:
1.Set up you main B2B store. This will mean installing SparkLayer, and then configuring and customising your Shopify store it as you require. For example, setting up a storefront theme, customising the homepage and product pages, etc. 
2.Set up your additional store(s). If you're using Shopify Plus, you can do this easily from your Shopify dashboard. If you're not using Shopify Plus, you'll need to sign up and create an additional store per currency. 
3.Set up your storefront theme. It's likely you'll want these to use the same design, so the first step is to export your theme from your main B2B store and import it into your additional stores. This Shopify guide shows you how to do this.
4.Install SparkLayer on your additional stores. Just as with your main store, you will need to install SparkLayer on each additional store. We're happy to assist in this process and also discuss a combined pricing rate.
5.Synchronise your data. The final step is to set up a mechanism to synchronise data between all your stores. This can include product data, CMS content, even orders. We recommend two highly rated Shopify apps to do this: Matrixify and Syncio​
It's likely that you will need someone with Shopify expertise to help in this process and we are happy to advise where possible.
9. Filtering and Reporting
Because SparkLayer works as a Sales Channel within Shopify, it makes filtering and reporting by SparkLayer orders easier. In most areas of the Shopify Admin, it's possible to filter by Sales Channel and, in the case of SparkLayer, you simply need to filter by Sales Channel B2B Ordering to apply specific filters.
Filtering data in Shopify by the B2B Ordering Sales Channel
Note, your main eCommerce channel will appear as Online Store
10. Shopify Notifications: adding B2B-only content
If you need to show B2B-specific content in your Shopify email notifications, it's possible to add special code snippets that give this flexibility.
To get started, go to the Shopify Notifications admin (typically yourstore.myshopify.com/admin/settings/notifications) and load the template you want to edit, e.g. the Order confirmation. Within the code, simply add the following code snippet and adjust as required.
Example Email Notification Liquid code
1
 {% for tag in customer.tags %}
2
    {% if tag == 'b2b' %}
3
    
4
  	Content to show to B2B
5
​
6
    {% else %}
7
  
8
      Content to show to B2C
9
  
10
    {% endif %}
11
  {% endfor %}
Copied!
To test your changes, you'll need to trigger the email notification (e.g. by placing a real order) and we advise testing with a customer that has been tagged with b2b and one that hasn't.
11. Sending an invoice from Shopify
If a customer places an order using Pay by Invoice this will, by default, generate a Draft order within Shopify. Shopify has a built-in mechanism to send a customer a follow to subsequently take payment, and they call this feature Send invoice. Although it isn't technically an invoice as such, it's a useful way to manage your B2B customer payments.
When using the Send invoice feature, the customer receives a branded email (the Draft order invoice within Shopify notifications), giving them a summary of their B2B order and a link to make payment. 
When clicking this link, they'll simply be redirected to the checkout on your Shopify store where they can then pay via card payments you've enabled. You can learn more about how this works here.
For a more advanced way to manage invoicing, you could also see our integration with Sufio.
12. Google Analytics
One of the benefits of using SparkLayer is being able to use your current B2C storefront to also allow B2B ordering. If you are using the same Shopify store for B2C and B2B, you'll likely want to be able to segment the Google Analytics data to exclude B2B data to allow more accurate reporting on your store's performance.
This is possible by adding a minor configuration option to our Core Script snippet and then creating a custom dimension within Google Analytics. 
How it works
When you add the script (see below), this triggers a dimension to be attributed to the users session when they are logged into SparkLayer. This can be used to filter the data as required with Google Analytics.
1.First you'll need to create a new custom dimension within Google Analytics. To do this, follow the instructions here and assign it a "User" scope. 
2.Then add the following code to your Core Script snippet. Ensure that you modify the dimension index to be inline with the dimension you've created. For example, the below shows using index 1.
SparkLayer Core Script
1
<script>
2
  window.sparkOptions = {
3
  ...
4
    onLoad: (spark) => {
5
      setTimeout(function(){ 
6
        ga('set', 'dimension1', 'Wholesale Customer');
7
      }, 500);
8
    },
9
  ...
10
  };
11
</script>
Copied!
This will then allow you to either segment your data, use dimensions to split out the reporting, or finally create separate views which include / exclude the B2B data.