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.
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!
To really customise the registration process on Shopify, you may want to consider installing a customer registration app such as Customer Fields via the Shopify App store.
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. Additional product data
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 proceeds to checkout, 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​
8. 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
9. 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.