3 powerful ways to make your Shopify store B2B ready, including how to set up customer-specific products

Chris Mattingly, Co-Founder

21st Nov, 2021
Shopify Guide

One of Shopify's many strengths as an eCommerce platform is how extensible it is, with a powerful toolset that allows you to customise the storefront experience to your exact requirements. If you're looking to enable B2B eCommerce or improve what you already have, it's possible to create an even more customised B2B storefront experience for your customers, simply by adapting specific areas of your storefront.

What you'll learn

In this guide, we'll walk through 3 powerful ways that you can enhance your Shopify B2B store to make it even more B2B-friendly:

  1. B2B login screen: restrict access to your B2B pricing until a customer log ins
  2. B2b only products: show customer-specific B2B-only products that are hidden from standard retail customers
  3. B2B only content: display specific content on product pages that only your B2B customers can see

In our guide, we'll also show you how to implement these with real-life code samples, doing away with the need to install third-party apps. Each example is also fully compatible with the latest Shopify Dawn theme and will work alongside SparkLayer, allowing you to create a powerful and feature-rich B2B experience!

Before you start

If you're already using SparkLayer, you can find all our examples below in our specially optimised B2B Shopify Dawn theme, making it rapid to get up and running.

It's important to note that these examples do require knowledge in editing Shopify theme files and we recommend working with a Shopify expert to implement them.

1. B2B Login Screen

B2B stores almost always require a customer to log in before being able to access their special pricing and ordering rules. With Shopify, it's possible to create a completely customised login screen that you can direct customers to before they access your store.

Shopify B2B Login page

Using our example

To get started, you can download our example files and step-by-step instructions in our guide here. In our example, we've created a completely custom login page that not only includes a login form, but also a range of additional functionality that you can optionally use:

To implement this, you can either completely replace the standard Shopify login (account/login) or set this up as a standalone custom page as seen in our online demo.

Forcing customers to log in

If you're wanting to completely lock down your Shopify store before a B2B customer signs in, it's possible to configure it in such a way to always force the customer to log in. If they try accessing a page other than the login page, they will simply be redirected back to your login page.

To get started, you'll need to modify a single file in your Shopify theme, layout/theme.liquid. This file controls the overall structure of your Shopify store and you can easily modify this to implement the redirect feature. Our example works by checking to see if the B2B customer is signed in and, if they're not, redirect them page to a specific URL (in this case, /account/login). You can adapt this code to allow certain pages to be accessible and adjust what page they are redirected to if they aren't signed in.

2. B2B only products

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 built-in tagging system, making it easy to hide and show products based on who the customer is.

Shopify B2B Only Product page

Configuring in Shopify

To get started, find the product(s) within your Shopify catalogue and assign them with an additional tag of b2b. Once tagged, we can then ensure that this product will be hidden from all customers other than B2B customers. Next, ensure that your B2B customers are similarly tagged with b2b. In this case, once you've tagged the customer we're then able to recognise on your Shopify store that they are a B2B customer.

Shopify B2B Only tags

Once you've tagged your products and customers, you'll then need to apply some special code snippets that will ensure your B2B tagged products only show for logged in B2B customers. Within your storefront code, you'll need to find the file that controls how products are displayed on a collection page. Specifically, you'll need to isolate where the Shopify 'product loop' happens. If you're using the Shopify Dawn theme, you can edit the sections/main-collection-product-grid.liquid file and add the below code snippet.

Once this code is added, only signed in B2B customers will be able to see your B2B tagged products!

B2B only product detail pages

With the above set up, it is still possible for a non B2B customer to view the product detail page, even though a product has been tagged as B2B only. To solve this, you can make use of a feature of Shopify storefronts called Templates. Shopify explain this as follows:

Each page type in an online store has an associated template type. You can use the template to add functionality that makes sense for the page type.

Shopify B2B Product template

To set this up, you'll be taking your standard product page template, creating a new version, and then assigning this template to your B2B products. If a non B2B customer tries to access one of these products, they'll be redirected back to another page.

To get started, within the Shopify admin go to the Edit code view on your storefront template, and under Templates click Add new template. From the options that show, choose product, template type JSON, and give it a file name of b2b. Note, in this example, we are using the Shopify Online Store 2.0 best practice so have opted to not choose liquid as a Template type.

Shopify B2B Product template

This will now create an empty file within the templates directly and you'll need to copy and paste the entire contents of the original product.json inside your newly created product.b2b.json. When this template is loaded, it uses the file sections/main-product.liquid to render the frontend code.

To allow us to make the changes we need, under Sections, we now need to copy the sections/main-product.liquid file. Click Add a new section, and enter main-product-b2b

Shopify B2B Product template

We now need to wrap this file in special logic whereby if the customer is not a B2B customer, we simply redirect them back to the homepage (or a destination page of your choice). Within the file, wrap the contents of the section tag with the login as shown below:

For the final code change, open templates/product.b2b.json and change type to main-product-b2b.

Shopify B2B Product template

All we need to do now is tag our products with our newly created template to make these only accessible to B2B customers. To complete this step, within the Shopify catalogue, find your B2B product(s) and within the Online store section, choose the b2b Theme template.

Shopify B2B Product template

You've now completed the process and you can now easily set up your B2B only product detail pages!

3. B2B Only Content

Within Shopify, you can also use the tagging system to customise how you show content on your Shopify storefront. In the context of B2B, this is a powerful way to show (or hide) specific content that you only want certain customers to see. For example, on a product detail page, you may want to display addition product specifications or asset downloads to B2B customers which may not be relevant to your standard customers.

Shopify B2B only content

To enable this functionality, you can simply include the below code snippet anywhere where you want to show B2B only content. The code snippet works by checking the customer has been tagged with b2b, and if it has, to then render the code within the file.

You could very easily extend this code to filter by other B2B tags and adapt as you require:

Combining with the power of SparkLayer

The above enhancements are all great ways to make your Shopify store even more B2B friendly and we hope you find them useful. With the addition of SparkLayer, you can go a step further and enable a powerful and feature-rich B2B ordering experience, making it easy for your B2B customers to place orders, track orders, and even re-order. With SparkLayer enabled, you'll benefit from:

You can see SparkLayer in action, alongside the 3 features above, in our video below:

Learn more

To learn more about how SparkLayer works with Shopify and Shopify Plus, please feel free to arrange a demo and we'll run you through the SparkLayer features and how it can integrate with all your systems.