Shopify Customisations
Important - please read The Shopify customisations detailed in this guide are recommendations only and may vary in complexity, depending on how your Shopify store is set up. Whilst the SparkLayer team can advise on how to approach implementing these recommendations, our team may not be equipped to implement them on your Shopify store. We recommend engaging a Shopify expert to assist should you wish to proceed with any of the recommendations below.
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!
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
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
- Website URL: you need to create a separate website URL to access the store such as b2b.yourstore.com.
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.
It's likely that you will need someone with Shopify expertise to help in this process and we are happy to advise where possible.
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
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.
Add the code samples You'll need to create two new files within your Shopify theme codebase.
As with any Shopify file, you can apply customisations as you require, e.g. changing fonts, buttons, text, etc.
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
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.
Using a contact form to apply for an account
The login page allows prospective customers to apply for an account and is set up to use the built in Shopify contact form to trigger an email.
When a customer fills in this form, an email will automatically be sent to the Shopify store's email address and include any additional fields you've added.
Adding custom fields is simple, and you can customise the fields exactly as you need. To add new fields, simply include a new code snippet within the /sections/trade-login.liquid file, making sure to adjust the names and id accordingly. In our example below, this is set up to capture a Company name.
Using a custom contact form
If you'd prefer to use a custom form to manage applications to your B2B store rather than the Shopify contact form, you can enable this via the Customizer. When in edit mode, simply tick the below box and then paste in your contact form HTML code. Alternatively, you can adjust this directly within the /sections/trade-login.liquid file.
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.
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:
Code is added to the theme.liquid file
For logged out users, all visitors are redirected to the account login page /account/login
For logged in users and those tagged with b2b, they'll then be able to view the entire website as normal.
By default, SparkLayer will redirect logged-in customer to the website homepage (index) with the SparkLayer My Account Interface loaded. You can modify how the redirect works by reviewing this guide.
If you're setting up a customised login page, you may need to add special coding to ensure the customer is redirected to your preferred URL. 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.
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:
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 |
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
Important to note If you are looking to customise the behaviour of your Shopify store, we strongly recommend engaging a Shopify expert to assist. Whilst we can provide an overview of how to approach making customisations, our team cannot assist in applying any code changes.
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:
- You could create a B2B-only collection and redirect customers to this once they login. If you wanted to show special B2B-only products, you would need to create these as separate products within Shopify (i.e. with unique SKUs, etc)
- With SparkLayer pricing, if you don't upload a price against a SKU, the B2B customer won't be able to purchase it. So this is a way to prevent them from adding items you don't want them to purchase
- 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. You can read our Locksmith guide here
Hiding variants Looking to hide variants for specific B2B customer groups? Read our guide
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 (e.g. on /collections/all). The code for product cards is typically found in the /snippets/ directory, e.g. /snippets/card-product.liquid
- The product details page. This is typically found in the /sections/ directory, e.g. /sections/main-product.liquid
To get started, you can adapt our example code below. This code simply shows some HTML code if the customer browsing the site is not a logged in B2B customer.
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.
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.
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.
Learn more about metafields For learn more about how metafields work on Shopify, please see this guide.
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.
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".
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.
If you're using the Shopify B2B Dawn Theme, you can edit the following files:
- /snippets/header-drawer.liquid
- /snippets/header-dropdown-menu.liquid
- /snippets/header-mega-menu.liquid
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.
Just as above in "Showing B2B-only content", it's also possible to do the inverse and hide content from B2B customers. One of the easiest ways to do this is by using special CSS which allows you to selectively hide elements based on whether a customer is logged in or not. In the example below, this CSS is only loaded when a B2B customer is signed into your store.
Please note When hiding content via CSS, the content will technically still be loaded on your website and can be access in the source code (such as via search engines). Please bear this in mind when controlling the display of content via CSS.
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.
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.
As well as this, SparkLayer also adds tags and additional data against orders placed by B2B customers and this can also be a used to generate reports within Shopify.
Attribute | Notes |
|---|---|
tag | A tag of b2b is added to any order placed via SparkLayer. This is particularly useful for filtering and segmenting orders, or even adding more advanced automations |
note | Order Note: sparkCartId This is added as an order note. This is primarily for internal use for debugging |
note | Order Note: sparkPaymentType This is added as an order note. This contains the name of the payment option used:
|
Important to note If you are looking to customise the behaviour of your Shopify emails and notifications, we strongly recommend engaging a Shopify expert to assist. Whilst we can provide an overview of how to approach making customisations, our team cannot assist in applying any code changes.
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.
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.
If you want to show additional data within your notifications, you can include the special order note attribute variables. For example, you may want to show a delivery date or a payment method to the customer.
Within the Shopify notification emails, simply add the following code to the following files:
For example, if you wanted to show the shipping date and the payment method in our example above, you would add the below.
This code will need to be added in an appropriate location and may need to be adjusted based on how your emails are formatted.
You can also show the order note by including the below code:
It's also possible to hide the discounting pricing from showing if you would prefer to just show the final price.
Within the Shopify notification emails, simply add the following CSS to the following files:
This code will need to be added before the closing </head> tag in each email template.
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.
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.
We've included some additional ready made Shopify Flow workflows that you can import into your Shopify admin.
Order automations
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 |
Mark Payment on Account order as paid | When a B2B customer places an order specifically via "Payment on Account", the order will automatically be marked as paid | 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 |
Tag pre-orders | Set up a rule to tag an order when pre-order products are purchased | Learn more |
Tag order with the net terms applicable to the customer | Based on the net terms that are set against the customer (via a metafield), this will then automatically tag their orders with a special Net Terms tag. | Download |
Customer automations
Trigger | Details | Download |
|---|---|---|
Switch tag on first order | When a B2B customer places their first order, replace their existing tag with a new one and send an internal email | Download |
Automatically adjust customer tag for customer group depending on spend | If you have different customer groups (e.g. Gold, Silver, Bronze), you can automatically update the customer's tag based on their order spend. This allows you to automatically change a customer's B2B group. | Download |
Product automations
Trigger | Details | Download |
|---|---|---|
Remove restock date in metafield when variant back in stock | If you're using pre-orders and you've set a restock date, this automation removes the restock date when the product comes back in stock. | Download |
Automatically mark new products with B2B ordering & Online store sales channels | When adding new products to your Shopify store, this will automatically assign the B2B Ordering and Online Store sales channel | Download |
Email automations
Trigger | Details | Download |
|---|---|---|
Send an email | Send an email to a specified email address when a B2B customer places an order via a specific B2B payment status; great if you need to notify other members of your team who handle B2B accounts | Download |
Send notification based on custom checkout fields (Draft Orders) | Based on specific custom checkout fields, trigger an action such as an internal email | Download |
Send notification based on custom checkout fields (Completed Orders) | Based on specific custom checkout fields, trigger an action such as an internal email | Download |
Email sales agent when order placed by customer | Based on specific rules you set, you can send notifications to sales agents when an order is placed. | Download |