Shopify Customisations
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.
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.
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
b2bassigned. 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
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 URLBecause 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
<form method="post" action="/account/login" id="customer_login" accept-charset="UTF-8" novalidate="novalidate"><input type="hidden" name="form_type" value="customer_login">
<input type="hidden" name="utf8" value="✓">
<input type="hidden" name="checkout_url" value="/index#spark-account">
<label for="CustomerEmail">Email</label>
<input type="email" name="customer[email]" id="CustomerEmail" autocomplete="email" autocorrect="off" autocapitalize="off" value="[email protected]">
<label for="CustomerPassword">Password</label>
<input type="password" value="password" name="customer[password]" id="CustomerPassword">
<input type="submit" class="btn" value="Sign In">
</form>
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
<!-- Add this code to theme.liquid after the <body> tag-->
{% comment %} Define pages that are restricted {% endcomment %}
{%- if customer.tags contains 'b2b' or template contains 'customers/' or request.path == '/challenge' -%}
{% assign showSiteForTrade = true %}
{% endif %}
{%- if showSiteForTrade == blank -%}
{% assign showTradeLogin = true %}
{% endif %}
{% comment %} Show content for logged in users {% endcomment %}
{%- unless showTradeLogin -%}
<!-- Content you want to show for logged in users -->
{% endunless %}
{% comment %} Show content for logged out users {% endcomment %}
{%- if showTradeLogin -%}
<script>
window.location.href = '/account/login';
</script>
{% endif %}
{% comment %} END {% endcomment %}
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
{% form 'customer_login', novalidate: 'novalidate' %}
<input type="hidden" name="checkout_url" value="/index#spark-account">
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
{% if customer.tags contains 'b2b' %}
<div style="text-align: center">
You're now being redirected. If you're not redirected in 10 seconds,
<a href="/index#spark-account"><strong>click here.</strong></a>
</div>
{% else %}
......
Standard my account area goes here
......
{% endif %}
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
<label for="CustomerFormB2BTaxID">Company Tax ID</label>
<input
type="text"
id="CustomerFormB2BTaxID"
name="customer[note][B2B: Company Tax ID]"
placeholder="e.g. GB-2242424"
/>
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.
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.
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.
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
{% if customer.tags contains 'b2b' %}
Show this content to logged-in B2B customers
{% else %}
Show this content to logged-out customers
{% endif %}
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
{% if customer.tags contains 'b2b' %}
{%assign custom_attributes = product.metafields.products %}
{%if custom_attributes.size > 0 %}
<div class="product-meta">
<p><strong>Additional wholesale information:</strong></p>
<ul>
{% for field in custom_attributes %}
{% assign attribute_code = field | first %}
{% assign attribute_value = field | last %}
<li class="custom-attribute-item">
<span class="custom-attribute-name">{{ attribute_code }}</span>:
<span class="custom-attribute-value">{{attribute_value}}</span>
</li>
{% endfor %}
</ul>
</div>
{%endif%}
{% endif %}
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. Learn more
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
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). Whilst this is supported, there are some restrictions to be aware of. Read our full guide here
- 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.
It's likely that you will need someone with Shopify expertise to help in this process and we are happy to advise where possible.
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
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
{% for tag in customer.tags %}
{% if tag == 'b2b' %}
Content to show to B2B
{% else %}
Content to show to B2C
{% endif %}
{% endfor %}
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.It's also possible to hide the discounting pricing from showing if you would prefer to just show the final price.
Within the order confirmation email, simply add the following CSS:
Example Email Notification Liquid code
{% for tag in customer.tags %}
{% if tag == 'b2b' %}
.order-list__item-original-price,
.order-list__item-discount-allocation,
p.total-discount {
display: none;
}
{% else %}
{% endif %}
{% endfor %}
The order notification email will by default show a payment method at the bottom. It's possible to customise what is shown here by adding the below code to the Order confirmation email.
Example Email Notification Liquid code
{% assign sparkPaymentType = note_attributes["sparkPaymentType"] %}
{% if sparkPaymentType == 'paymentByInvoice' %}
Invoice Payment [change this to the required payment name]
{% endif %}
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.
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.
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
<script>
window.sparkOptions = {
...
onLoad: (spark) => {
setTimeout(function(){
ga('set', 'dimension1', 'Wholesale Customer');
}, 500);
},
...
};
</script>
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.
Last modified 2mo ago