Shopify Customisations

Introduction
Shopify Dawn theme
Are you using the Shopify Dawn? Try our ready-made theme﻿﻿
﻿
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.
﻿
﻿
﻿
Standalone vs Hybrid
﻿
When you're in the process of setting up your Shopify B2B store, there are two ways to go about this:
Set up as a new standalone Shopify store 
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. You can even read our blog post on the topic!
Considerations to bear in mind
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.
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. 
Analytics and reporting: SparkLayer will show in Shopify as a Sales Channel called B2B Ordering which makes it easy to split out your reports. 
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﻿
Creating an additional store
It may be necessary to create a separate Shopify store to manage your B2B channel. 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. Learnmore﻿﻿
Stock levels: You need to separate out your B2B stock from your DTC 
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 DTC channel
Our recommended approach is as follows:
Set up your main B2B store. This will mean installing SparkLayer, and then configuring and customising your Shopify store as you require. For example, setting up a storefront theme, customising the homepage and product pages, etc. 
Set up your additional store(s). If you're using Shopify Plus Customisations﻿, 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. 
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.
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.
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.
﻿
﻿
﻿
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 (DTC) customers will also use this page, you may want to adapt it or even direct your B2B customers to different pages on your website. We've included some good options below
Adding a custom B2B login page
Creating a custom B2B login page is a great way to give your B2B customers a more tailored experience and provide them with more information. If you're running SparkLayer on an existing DTC Shopify store, it also allows you to have a separate login page that you can share with your B2B customers. You can see this in action on our demo store﻿.
﻿
To get started, we've included a recommended steps below. 
Please note
Implementing a custom log in page will require experience in Shopify coding. This is not supported by SparkLayer and we recommend speaking to a Shopify expert.
1
Add the code samples
You'll need to create two new files within your Shopify theme codebase.
Within the /sections/ directory, create a file named trade-login.liquid and add this code﻿
Within the /templates/ directory, create a file named pages.trade-login.liquid and add this code﻿
As with any Shopify file, you can apply customisations as you require, e.g. changing fonts, buttons, text, etc.
2
Create a page within your Shopify store
Next, you'll need to create the page within your Shopify store
Within your Shopify admin, go to Online Store > Pages and click "Add New".
Create a new page with title "Trade Login' and ensure it has a URL slug of trade-login (it should do this automatically)
Under "Templates", assign the trade-login template to the page
3
Visit the new page
In your browser, visit www.yourstore.com/pages/trade-login and you should see the new login page.
For available customisations, please refer to our guide here﻿ that explains how it works with our example B2B Dawn theme. The same functionality is available via the method explained above.
You can also edit the contents within Online Store > Themes and click the "Customize" button.
Adapting existing login page
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
HTML
|
<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="test@b2b.com">
                
    <label for="CustomerPassword">Password</label>
    <input type="password" value="password" name="customer[password]" id="CustomerPassword">
            
    <input type="submit" class="btn" value="Sign In">
     
</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="test@b2b.com">
                
    <label for="CustomerPassword">Password</label>
    <input type="password" value="password" name="customer[password]" id="CustomerPassword">
            
    <input type="submit" class="btn" value="Sign In">
     
</form>
﻿
Forcing customers to login
﻿
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 /account/login
3
For logged in users and those tagged with b2b, they'll then be able to view the entire website as normal.
﻿
HTML
|
<!-- Add this code to theme.liquid before the closing </head> tag-->

{%- if customer.tags contains 'b2b' or template contains 'customers/' or request.path == '/challenge' -%}
  
  <!-- Do nothing -->
  
{%- else -%}

  <script>
    window.location.href = '/account/login';
  </script>

{%- endif -%}

<!-- End of redirect code -->
<!-- Add this code to theme.liquid before the closing </head> tag-->

{%- if customer.tags contains 'b2b' or template contains 'customers/' or request.path == '/challenge' -%}
  
  <!-- Do nothing -->
  
{%- else -%}

  <script>
    window.location.href = '/account/login';
  </script>

{%- endif -%}

<!-- End of redirect code -->
﻿
﻿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, you'll need to locate the file that controls the login page (e.g. the /templates/customers/account.liquid file) and beneath where you see the login form, add the following hidden input field.
Redirect after login
HTML
|
{% raw %}
{% form 'customer_login', novalidate: 'novalidate' %}
{% endraw %}

<input type="hidden" name="checkout_url" value="/index#spark-account">
{% raw %}
{% form 'customer_login', novalidate: 'novalidate' %}
{% endraw %}

<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 the login page file and add the following code:
HTML
|
{% 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 %}
{% 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 %}
﻿
﻿
﻿
﻿
Registration form
﻿
As with the Shopify login form, SparkLayer makes use of the existing functionality of Shopify. Our best practise guide walks through a range of options on how to create the perfect registration form!
One such way of customising this process is to adapt your existing Shopify registration form with "additional fields".
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
HTML
|
<label for="CustomerFormB2BTaxID">Company Tax ID</label>
  <input
    type="text"
    id="CustomerFormB2BTaxID"
    name="customer[note][B2B: Company Tax ID]"
    placeholder="e.g. GB-2242424"
  />
<label for="CustomerFormB2BTaxID">Company Tax ID</label>
  <input
    type="text"
    id="CustomerFormB2BTaxID"
    name="customer[note][B2B: Company Tax ID]"
    placeholder="e.g. GB-2242424"
  />
﻿
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. Want to see Helium Customer Fields in action with SparkLayer? Watch the explainer video below.
﻿
You can learn more about how Helium Customer Fields works in our guide here﻿.
Try our demo store
You can see this in action on our B2B demo site﻿
﻿
﻿
﻿
Hiding products (B2B only products)
﻿
If you're running both B2B and DTC 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. There are a number of options you could consider to achieve this:
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﻿
﻿
﻿
﻿
Hiding prices
If you have a dedicated B2B Shopify store and want to fully hide prices from your logged out customers, you can do this by adding special code to your storefront theme. Typically you could apply this to:
The product cards that show on your collection pages
The product details page
To get started, you can adapt our example code below.
HTML
|
{% if customer.tags contains 'b2b' %}
  Show this content to logged-in B2B customers
  e.g. the SparkLayer product card interface
{% else %}
<div>
  Please <a href="/account">sign in</a> to see  pricing
</div>
{% endif %}
{% if customer.tags contains 'b2b' %}
  Show this content to logged-in B2B customers
  e.g. the SparkLayer product card interface
{% else %}
<div>
  Please <a href="/account">sign in</a> to see  pricing
</div>
{% endif %}
﻿
﻿
﻿
﻿
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.
HTML
|
{% if customer.tags contains 'b2b' %}

    Show this content to logged-in B2B customers

{% else %}

    Show this content to logged-out customers

{% endif %}
{% if customer.tags contains 'b2b' %}

    Show this content to logged-in B2B customers

{% else %}

    Show this content to logged-out customers

{% endif %}
﻿
Shopify also has a powerful feature called metafields that allows you to extend product data to include additional content specific to a product SKU. 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. You can learn more about metafields in our guide here﻿.
﻿
Setting up metafields on Shopify
To learn more about how to configure metafields on Shopify for SparkLayer, please refer to our guide here﻿﻿
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.
HTML
|
{% 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 %}
{% 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 %}
﻿
Showing B2B metafields
If you're using metafields﻿ on your Shopify store and want to display these to the customer (e.g. on a collection page or product detail page), you can do this by adding special Liquid code to your Shopify theme. 
HTML
|
<!-- Only show this to logged in B2B customers -->

{% if customer.tags contains 'b2b' %}

  <!-- In this example, we're outputting the pack size -->
  Pack size: {{ product.metafields.sparklayer.pack_size }}

{% endif %}
<!-- Only show this to logged in B2B customers -->

{% if customer.tags contains 'b2b' %}

  <!-- In this example, we're outputting the pack size -->
  Pack size: {{ product.metafields.sparklayer.pack_size }}

{% endif %}
﻿
Learn more about metafields
For learn more about how metafields work on Shopify, please see this guide.
Showing a B2B-only navigation menu
It's possible to create a B2B-only navigation menu for your store that you can show to logged in customers. It works by using Shopify's built-in menu system and then applying some special logic that shows for B2B customers. 
1
First, you'll need to create a new menu in your Shopify store from the "Navigation" section of Shopify (you can access it here). Proceed to set up your menu, making note of the "Handle".
﻿
2
Next, you'll need to locate the liquid file where the menu is setup (normally this is within /sections/header.liquid) You should see a line of code that looks roughly like this:
{%- for link in menu.links -%}
Once you've located this, replace this with the below code, making a note to change b2b-menu to the Handle set up above.
JS
|
{%- if customer.metafields.sparklayer.authentication -%}
{% assign menu = linklists.b2b-menu %}
{%- else -%}
{% assign menu = linklists[section.settings.main_linklist] %}
{%- endif -%}
{%- for link in menu.links -%}
{%- if customer.metafields.sparklayer.authentication -%}
{% assign menu = linklists.b2b-menu %}
{%- else -%}
{% assign menu = linklists[section.settings.main_linklist] %}
{%- endif -%}
{%- for link in menu.links -%}
﻿
If you're using the Shopify B2B Dawn Theme﻿, you can edit the following file /snippets/header-mega-menu.liquid and add the above code.
3
You can repeat this process for your website footer if you want that to vary based on a B2B customer being logged in or logged out.
Using the Shopify B2B Dawn Theme?
This theme comes with a ready-made B2B navigation menu. Learn more.﻿﻿
Redirecting URLs for logged out customers
If you're looking to 'block' specific URLs based on a customer being logged in or logged out, this can be done relatively easily within Shopify. If a customer is signed in or logged out, you can perform a simple redirect using JavaScript. To set this up, within the layout/theme.liquid file, before the closing </head> tag, simply add the below code, adjusting to your needs.
JS
|

{%- if customer.metafields.sparklayer.authentication -%}
<!-- Do nothing for logged in B2B customers -->
{%- else -%}

{%- if  request.path == '/path-to-page-here' or request.path == 'path-to-another-page-here' -%}

   <script>
   window.location.href = '/url-to-redirect-to';
   </script>
{%- endif -%}
{%- endif -%}

{%- if customer.metafields.sparklayer.authentication -%}
<!-- Do nothing for logged in B2B customers -->
{%- else -%}

{%- if  request.path == '/path-to-page-here' or request.path == 'path-to-another-page-here' -%}

   <script>
   window.location.href = '/url-to-redirect-to';
   </script>
{%- endif -%}
{%- endif -%}
﻿
﻿
﻿
﻿
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
﻿
﻿
﻿
﻿
Shopify Email Notifications
Including B2B-specific content in an email
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 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.
HTML
|
{% raw %}
  {% for tag in customer.tags %}
    {% if tag == 'b2b' %}
    
  	Content to show to B2B

    {% else %}
  
      Content to show to DTC
  
    {% endif %}
  {% endfor %}
{% endraw %}

{% raw %}
  {% for tag in customer.tags %}
    {% if tag == 'b2b' %}
    
  	Content to show to B2B

    {% else %}
  
      Content to show to DTC
  
    {% endif %}
  {% endfor %}
{% endraw %}
﻿
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.
Hide discount pricing from showing
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:
CSS
|
{% raw %}
{% 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 %}
{% endraw %}
 
{% raw %}
{% 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 %}
{% endraw %}
 
﻿
Customise the payment methods
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.
HTML
|
{% raw %}
{% assign sparkPaymentType = note_attributes["sparkPaymentType"] %}
{% if sparkPaymentType == 'paymentByInvoice' %}
 Invoice Payment [change this to the required payment name]
{% endif %}
{% endraw %}
 
{% raw %}
{% assign sparkPaymentType = note_attributes["sparkPaymentType"] %}
{% if sparkPaymentType == 'paymentByInvoice' %}
 Invoice Payment [change this to the required payment name]
{% endif %}
{% endraw %}
 
﻿
﻿
﻿
﻿
Shopify Flow
﻿
﻿Shopify Flow is powerful feature for merchants on the Shopify, Advance, or Shopify Plus plans that allow automations to be configured based on certain actions. 
When B2B customers place orders via a manual payment method on your website (e.g. Pay on Account), this will come through to the Shopify orders admin as 'Payment Pending'. In order to ensure Shopify marks the order as paid to subsequently be sent to your backend system, you'll need to set up a special Shopify Flow rule to automatically apply this workflow. You can download our sample below.
We've also included some additional ready made Shopify Flow workflows that you can import into your Shopify admin. 
Trigger
Details
Download
Mark order as paid
When a B2B customer places an order via manual payment methods, the order will automatically be marked as paid
﻿Download﻿
Send an email
Send an email to a specified email address when a B2B customer places an order; great if you need to notify other members of your team who handle B2B accounts
﻿Download﻿
Archive B2B orders
Automatically archive B2B orders from your Shopify Orders view; useful if you want to hide them from your standard DTC orders
﻿Download﻿
﻿
Updated 05 Sep 2023
Did this page help you?
Installing SparkLayer on Shopify
Shopify B2B Dawn Theme
Docs powered by
Archbee
Item	File
Account register	/templates/customers/register.liquid
Trigger	Details	Download
Mark order as paid	When a B2B customer places an order via manual payment methods, the order will automatically be marked as paid	Download
Send an email	Send an email to a specified email address when a B2B customer places an order; great if you need to notify other members of your team who handle B2B accounts	Download
Archive B2B orders	Automatically archive B2B orders from your Shopify Orders view; useful if you want to hide them from your standard DTC orders	Download
Shopify Customisations

Introduction

Standalone vs Hybrid

Creating an additional store

Login page

Adding a custom B2B login page

Adapting existing login page

Forcing customers to login

﻿Redirecting users after login﻿

Registration form

Hiding products (B2B only products)

Hiding prices

B2B-only content

Showing B2B-only content

Showing B2B metafields

Showing a B2B-only navigation menu

Redirecting URLs for logged out customers

Filtering and Reporting

Shopify Email Notifications

Including B2B-specific content in an email

Hide discount pricing from showing

Customise the payment methods

Shopify Flow

Redirecting users after login
