Shopify B2B Registration & Login
There are a number of recommended ways to add a registration form to your website.
Try our demo store You can see this in action on our B2B demo site
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.
Need help setting this up? Our team is happy to setup a trade login and register page on your Shopify store. Contact us
We've a ready-made "trade login" template that also includes a registration form. You can see this in action on our demo store.
It's 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.
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 |
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
Need help setting this up? Our team is happy to setup a trade login and register page on your Shopify store. Contact us
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: