B2B registration and login

How it works

On Shopify, SparkLayer uses Shopify's own sign-in at /account, for example www.yourstore.com/account. Customers sign in with their email and password on Legacy customer accounts, or with a one-time code on new customer accounts. See Choose your customer accounts version.

Your retail customers use the same sign-in page, so you may want to send B2B customers to a dedicated B2B page instead.

Registration lets prospective customers apply for a B2B account, usually with a review step so you can check their details before giving them access. A typical flow:

Add the B2B login page

The ready-made page has a sign-in form (Email, Password, Sign in and a forgotten password link), a section inviting new customers to apply for an account, and an optional set of questions and answers. Once it's set up, customers go to /pages/b2b-login to sign in or apply.

Our team is happy to set this page up for you, free of charge: contact us. Step 1 below adds files to your theme code, so if you don't edit theme code yourself, ask us or your developer. To do it yourself, follow the steps.

Choose how applications work

Once the page is live, choose what happens when someone applies for an account. In the theme editor, the Login Page section has a Form Action setting for this. Go to Online Store,Themes (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Online Store › Themes to do this now. Opens in a new tab., click Customize, open the b2b-login page and choose an option:

Send an email to the store owner

The application form uses Shopify's built-in contact form (opens in a new tab). By default it asks for Name, Email, Phone number, Company, Website and Comment. When someone sends it, Shopify emails your store's email address with every field they filled in. The subject is usually "New customer message on [date of submission]".

To add a field:

1. In the theme editor, under the Login Page section, click Add block.
2. Choose Form Field.
3. Enter the field's name and the default text to show.

Sending the form doesn't create a customer in Shopify. When you've reviewed the application, add the customer in Shopify with the b2b tag and their customer group's tag. See Add B2B customers on Shopify.

Occasionally, Shopify's contact form doesn't deliver emails, for example if your recipient address is bouncing or being blocked by Shopify. If that happens, contact Shopify Support and tell them your store's contact form (opens in a new tab) isn't working as expected.

Embed a SparkLayer form

To manage applications with a SparkLayer form instead of the Shopify contact form, embed it in your B2B login page.

1. In the SparkLayer Dashboard, go to Forms (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Forms to do this now, whichever platform you're on. Opens in a new tab., open your form and go to its Embed tab. Forms aren't in SparkLayer Wholesale. Copy the HTML embed code. It looks like this:

   Copy Text

   <spark-form form-id="your-form-id" site-id="your-site-id"></spark-form><script src="https://cdn.sparklayer.io/spark-form.v1.0.0.js"></script>

2. In your Shopify admin, go to Online Store,Themes (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Online Store › Themes to do this now. Opens in a new tab., click Customize and open your B2B login page.

3. Set Form Action to Embed custom contact form, and paste the code into Custom Contact Form HTML.

4. Save, then visit the page to check the form shows and works.

Build and customise your form at Forms (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Forms to do this now, whichever platform you're on. Opens in a new tab.. See SparkLayer Forms to learn more.

Embed a custom contact form

To use another form, such as one from a form app:

1. In the theme editor, set Form Action to Embed custom contact form.
2. Paste your form's HTML code into Custom Contact Form HTML, then save.

Go to a new page URL

To send applicants to another page instead of showing a form, for example an existing registration page on your store or on another website:

1. In the theme editor, set Form Action to Go to new page URL.
2. Enter the address in Redirect URL, then save.

Use SparkLayer Forms for registration

For more control over registration, use SparkLayer Forms, our built-in, no-code form builder. You manage registration forms in SparkLayer, with no third-party apps. With SparkLayer Forms, you can:

• Build forms with a drag-and-drop builder and field types such as text, email, drop-downs, file uploads and addresses.
• Review and approve applications before giving access.
• Tag customers automatically, assign them to customer groups and sync their data to your platform.
• Start quickly with the ready-made Customer Registration Form template.

You handle the whole process, from application to approval and creating the customer, in one place. See SparkLayer Forms.

Translate the B2B login page

If your store uses Shopify Markets to show different languages by location, you can translate the B2B login and registration page. First, check Shopify Markets is set up with a language for each target market, for example French for France and German for Germany.

We recommend Shopify's own Translate & Adapt app (opens in a new tab), which shows translations side by side with your original content.

1. Install and open Translate & Adapt.
2. At the top, choose the language you want to edit.
3. Under Theme, click Templates.
4. In the list, select the B2B login page. It's usually called Page: B2B Login, unless you renamed the page.
5. Translate each field on the right: type your translations, or click Auto-translate (if it's available) to have Shopify translate every field.
6. Save.

This translates the page's own text, such as its title and introduction. It doesn't translate the fields of an embedded SparkLayer form: the form loads as an embed, which Translate & Adapt can't reach. Instead, make one form per language and paste each one's embed code into the Main: Custom Form Html field for that language. See Translate a form.

Make customers sign in before they see your store

To lock your whole store until a customer signs in, add code to your theme's theme.liquid file. This is a theme code change, so pass this section to your developer if you don't edit theme code yourself. The example below works like this:

1. Signed-out visitors are sent to the account login page, /account/login.
2. Customers' account pages, the Shopify Customizer and a few pages you choose (such as /pages/b2b-login and /pages/contact-us) are left open.
3. Signed-in B2B customers see the whole store as normal.

Add the code to theme.liquid before the closing </head> tag, and change the list of open pages to suit your store:

<!-- 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 -->

Wholesale-only stores: customers who sign in without a trade account

With Shopify's new customer accounts, anyone can sign in to your store with a code sent to their email. Shopify gives them a customer account, without them applying for one. SparkLayer only loads for customers tagged b2b, so a signed-in customer without the tag sees your store as a retail shopper would. If you hide prices from signed-out visitors, prices can flicker for them, because they're signed in but aren't B2B customers.

The same happens when a B2B customer signs in with a mistyped or different email address: Shopify creates a new retail customer with no b2b tag. Ask them to sign out and sign in with the email you invited. With Legacy customer accounts, customers must activate their account from the invite email before they can sign in.

On a wholesale-only store, choose one of these options:

Our team can set up the banner or the redirect for you: contact us. Options 2 to 4 are theme code changes, so if you'd rather do them yourself, pass this section to your developer.

{%- if customer and customer.metafields.sparklayer.authentication == blank -%}
  {%- unless request.path == '/pages/wholesale-account-needed' or template contains 'customers/' -%}
    <script>
      window.location.href = '/pages/wholesale-account-needed';
    </script>
  {%- endunless -%}
{%- endif -%}

Add a B2B onboarding page

An onboarding page explains the benefits of your new B2B store to customers, and encourages them to use it. Our ready-made page has a welcome heading, a picture of the B2B cart and account area, and a list of what customers can do, such as viewing their order history, tracking orders, downloading invoices, updating addresses and seeing reports.

1. In your Shopify admin, go to Online Store,Pages (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Online Store › Pages to do this now. Opens in a new tab. and click Add page.
2. In the Content editor, click Show HTML (the </> button) and paste in the onboarding page code from this gist (opens in a new tab).
3. Change the title, content and URL as you need. We recommend the URL handle b2b-onboarding, set under Search engine listing.
4. Under Visibility, choose Visible to publish the page, then save. Click View to see it.
5. Link to the page from your store, for example in your header or footer navigation, or from your B2B login page.

Invite and activate B2B customers

To invite B2B customers and activate their accounts, see the launch checklist. To change the activation emails they receive, see Shopify email notifications.

FAQs