Shopify B2B Registration & Login
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!
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.
- 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.
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 |
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.
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.
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.
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.
ou can learn more about how Helium Customer Fields works in our guide hereο»Ώ.
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.
ο»Ώ
ο»Ώ