Shopify B2B Registration & Login
Introduction
When you’re setting out to build and implement your B2B eCommerce store, one of the most integral elements is the B2B Registration and Login area.
The B2B registration flow is simply a way to allow prospective customers to register with your website and to typically have some variety of “moderation” process built-in that also you to verify their details before granting access.
We've set out a number of ways you can approach this, read on to learn more!
B2B Login and Register Page
Need help setting this up? Our team is happy to setup the B2B login and register page on your Shopify store. Contact us and we'll action this for you!
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 (e.g. www.yourstore.com/account).
Since your standard (DTC) customers will also use this page, you may want to adapt it or even direct your B2B customers to a different page on your website. You can see this setup on our example store here.
To set this up on your own Shopify store, you can use our ready-made functionality by following the guide below. Once setup, customers can access a URL of /pages/b2b-login to login or apply for access.
To get started, please follow the steps below.
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 main-b2b-login.liquid and add this code
- Within the /templates/ directory, create a file named page.b2b-login.json and add this code
- Should you wish to make code changes, you can simply edit the contents of these files within your Shopify theme.
Create a page within your Shopify store
Next, you'll need to create the page within your Shopify store. Once setup, it'll allow users to access the page via /pages/b2b-login
- Within your Shopify admin, go to Online Store > Pages and click "Add New".
- Create a new page with title "B2B Login' and within "Search engine listing " ensure it has a URL handle of b2b-login (it should do this automatically)
- Under "Templates", assign the b2b-login template to the page
Customize and visit the new page
- You can edit how the page looks and functions by going to Online Store > Themes and click the "Customize" button.
- Search for b2b-login to begin making changes. You can customise nearly all areas of the page such as colours, form fields, text, and more.
- To see how the page works, in your browser, visit www.yourstore.com/pages/b2b-login and you should see the new login page.
Customising the registration process
You can customise how you want applications to work within the Customizer tool of your Shopify store. To get started, go to Online Store > Themes and click the "Customize" button.
It's possible to select from 3 options
Option | Details |
|---|---|
Send an email to the store owner | This will send an email to the store owner of the Shopify store |
Embed custom contact form | This allows you to embed a third party form (e.g. an app, see below) |
Go to new page URL | This allows you to direct customers to a new page URL where you may have an existing application form |
Send an email to the store owner
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. The email will typically have a subject of "New customer message on [Date of submission]".
Please note: When this form is filled in, it will not automatically create a customer record in your Shopify store. You will need to manually create the customer by going to your Shopify admin and going to the Customers section. You can then proceed to invite your new customer by following these steps.
Adding custom fields is simple, and you can customise the fields exactly as you need. To add new fields, within the Customizer tool, under Login Page, select "Form Field".
You can then specify the name of the field and the default text you wish to show.
Please note: The form created uses the standard "Shopify contact form" and in rare instances, you may not receive emails when a form is submitted (e.g. your email recipient address is bouncing or being blocked by Shopify). If you do experience this issue, we recommend speaking directly to Shopify Support, noting that your store's contact form isn't working as expected.
Embed SparkLayer Form
If you'd prefer to use a SparkLayer Form to manage applications to your B2B store rather than the Shopify contact form, you can embed it directly into your B2B login page via the Customizer.
- Get your embed code - In the SparkLayer Dashboard, go to Forms, open your form, and click the Preview tab. Click "Copy code to clipboard" to copy the HTML embed code. The code will look something like this:
- Add to your B2B login page - In your Shopify admin, go to Online Store > Themes and click "Customize". Navigate to your B2B login page, then select "Embed custom contact form" from the "Form Action" menu. Paste in the embed code you copied.
- Save and test - Save your changes, then visit the page in your browser to check the form is displaying and working as expected.
You can build and customise your form in the SparkLayer Dashboard - learn more about SparkLayer Forms.
Embed 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.
Simply select the "Embed custom contact form" from the "Form Action" menu and paste in your contact form HTML code.
Go to new page URL
If you'd prefer to not include an application form on this page, you can instead direct the user to a specific page URL. For example, you may have an existing registration page on your store or a URL on a different website address.
Simply select the "Go to new page URL" from the "Form Action" menu and specify the URL within the "Redirect URL" field.
Important notes & considerations
Please note the following:
- The example login and registration page detailed above is essentially standard Shopify code and is not technically part of the SparkLayer App. It is built using best-practice Shopify Liquid code and standard CSS and can easily be modified by a Shopify developer
- The built-in registration form uses the standard Shopify contact form system - it is no different to adding a generic contact page to your Shopify store and as such is technically a form supported by Shopify (and not SparkLayer)
- If a customer submits the login form with incorrect credentials (e.g. an incorrect email and/or password), the page will redirect to the standard Shopify login page with the standard validation to notify the customer that their login details are incorrect.
Translating the B2B Login & Register Page
If your Shopify store uses Shopify Markets to display different languages based on a user's location, you can fully translate the SparkLayer B2B Login and Registration forms to match.
Please note Before starting, ensure your Shopify store is correctly configured to use Shopify Markets. You must have languages specified for your target markets (e.g., French for France, German for Germany).
We recommend using Shopify's native solution for the best compatibility. Install the Shopify Translate & Adapt app from the Shopify App Store. This app provides a visual interface to apply translations side-by-side with your default content.
Open the Shopify Translate & Adapt app. At the top of the dashboard, use the dropdown menu to select the language you wish to edit.
Then click "Templates" under "Themes".
In the resource list, search for and select the B2B Login page. This is typically named Page: B2B Login, unless you have manually renamed the page title.
Once the page is selected, you will see the translatable fields on the right side of the screen. You have two options:
- Manual Translation: Type your specific translations into the corresponding fields.
- Auto-translate: Click the Auto-translate button (if enabled) to automatically generate translations for all fields using Shopify's translation engine.
SparkLayer Forms
If you're looking for more control over your B2B registration process, SparkLayer Forms is our built-in, no-code form builder that lets you create and manage registration forms directly within SparkLayer - no third-party apps needed.
With SparkLayer Forms, you can:
- Build forms visually using a drag-and-drop builder with flexible field types including text, email, dropdowns, file uploads, addresses and more
- Set up approval workflows to review and approve applications before granting access
- Automatically tag customers, assign them to customer groups, and sync data to your platform
- Get started quickly using the ready-made Customer Registration Form template
Since everything is managed within SparkLayer, you can handle the entire process from application through to approval and customer creation in one place.
Inviting & activating B2B customers
To begin inviting and activating B2B customers, please see our full guide here.
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 and 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.
<!-- Add this code to theme.liquid before the closing head tag
template refers to files within your theme
request.path refers to URLs on your store
-->
{%- if customer.metafields.sparklayer.authentication -%}
<!-- Don't redirect for B2B customers -->
{%- else -%}
{%- if request.design_mode -%}
<!-- Don't redirect if using Shopify Customiser tool -->
{%- else -%}
{%- if template contains 'customers/'
or request.path == '/challenge'
or request.path == '/pages/contact-us'
or request.path == '/pages/b2b-login'
or request.path == '/pages/about-us'
or request.path == '/pages/terms-and-conditons'
-%}
<!-- Do nothing -->
{%- else -%}
<script>
window.location.href = '/account/login';
</script>
{%- endif -%}
{%- endif -%}
{%- endif -%}
<!-- End of redirect code -->
B2B Onboarding page
A great way to encourage your customers to use your new B2B store is to explain the benefits. To help you get started, you can use our ready-made "onboarding landing page" that gives a great overview of the features to your customers.
B2B Activation Emails
Depending on how your Shopify accounts are set up, you can also customise the activation emails that your B2B customers receive when you invite them to your Shopify store. Learn more in Shopify Email Notifications.