# B2B registration and login

URL: https://docs.sparklayer.io/help/platforms/shopify/customisations/registration-and-login
Applies to: Shopify

Add a B2B login and registration page to Shopify, choose how account applications work, translate it, make customers sign in and add a B2B onboarding page.

> **Quick summary**
>
> - Our free, ready-made B2B login page (at `/pages/b2b-login`) lets existing customers sign in and new ones apply for an account. You customise it in the Shopify theme editor, and our team can install it for you free of charge.
> - Applications can email you through Shopify's contact form, use an embedded form (such as a [SparkLayer form](https://docs.sparklayer.io/help/forms.md)), or go to a page of your choice.
> - For approval workflows and automatic customer tagging, use [SparkLayer Forms](https://docs.sparklayer.io/help/forms.md) for registration.
> - With a small theme code change (for your developer), you can make customers sign in before they see your store.

## 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](https://docs.sparklayer.io/help/platforms/shopify/install.md#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:

From application to first order:

1. **Customer applies**: They fill in the application form on your B2B login page
2. **You review**: You check the application and create or approve the customer
3. **Give access**: Tag them `b2b` in Shopify
4. **Customer signs in**: They sign in on the B2B login page and start ordering

## 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](https://docs.sparklayer.io/help/support.md). 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.

**Step 1.** **Add the code to your theme**

Create two new files in your Shopify theme code:

1. In the `/sections/` folder, create `main-b2b-login.liquid` and [add this code](https://gist.github.com/cm-sl/c725a1de3c926257f9f81ee5fc70a029).
2. In the `/templates/` folder, create `page.b2b-login.json` and [add this code](https://gist.github.com/cm-sl/1c18244e75ed401b217f15eb1c9d6308).

To change how the page works later, edit these files in your theme.

**Step 2.** **Create the page in Shopify**

1. In your Shopify admin, go to **Online Store > Pages** ([open in the Shopify admin](https://admin.shopify.com/pages)) and click **Add page**.
2. Enter the title **B2B Login**.
3. Under **Search engine listing**, check the **URL handle** is `b2b-login` (Shopify usually sets this automatically).
4. Under **Template**, choose `b2b-login`, then save.

**Step 3.** **Customise and check the page**

1. Go to **Online Store > Themes** ([open in the Shopify admin](https://admin.shopify.com/themes)) and click **Customize**.
2. Open the `b2b-login` page from the page selector at the top, and select the **Login Page** section. You can change nearly everything, including colours, form fields and text, such as the **Title**, **Introduction Text** and **Open Account Title**.
3. Visit `www.yourstore.com/pages/b2b-login` to see the new page.

## 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** ([open in the Shopify admin](https://admin.shopify.com/themes)), click **Customize**, open the `b2b-login` page and choose an option:

| Form Action | What happens |
| --- | --- |
| **Send an email to the store owner** | The application is emailed to your Shopify store's email address, using Shopify's contact form. |
| **Embed custom contact form** | You paste in the HTML for another form, such as a [SparkLayer form](#embed-a-sparklayer-form) or a third-party form app. |
| **Go to new page URL** | Customers are sent to another page, such as an existing application form on your store or another website. |

### Send an email to the store owner

The application form uses Shopify's [built-in contact form](https://help.shopify.com/en/manual/online-store/themes/os/customize/add-contact-form). 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](https://docs.sparklayer.io/help/platforms/shopify/invite-customers.md).

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](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/add-contact-page) isn't working as expected.

### Embed a SparkLayer form

To manage applications with a [SparkLayer form](https://docs.sparklayer.io/help/forms.md) instead of the Shopify contact form, embed it in your B2B login page.

1. In the SparkLayer Dashboard, go to **Forms** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/forms)), open your form and go to its **Embed** tab. Forms aren't in SparkLayer Wholesale. Copy the HTML embed code.  It looks like this:

   ```html
   <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** ([open in the Shopify admin](https://admin.shopify.com/themes)), 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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/forms)). See [SparkLayer Forms](https://docs.sparklayer.io/help/forms.md) 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](https://docs.sparklayer.io/help/forms.md).

## 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](https://apps.shopify.com/translate-and-adapt), 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](#embed-a-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](https://docs.sparklayer.io/help/forms/embedding-and-styling.md#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:

```html
<!-- 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](https://docs.sparklayer.io/help/platforms/shopify/customisations/b2b-only-content.md#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:

| Option | How it works |
| --- | --- |
| **1. Switch back to Legacy customer accounts** | Customers need a password to sign in, so an emailed code isn't enough to get an account. We don't recommend it, because Shopify doesn't fully support Legacy accounts. See [Choose your customer accounts version](https://docs.sparklayer.io/help/platforms/shopify/install.md#choose-your-customer-accounts-version). |
| **2. Redirect them to a page** | Keep new customer accounts, and send signed-in customers without a trade account to a page that says they need a wholesale account. |
| **3. Show them a banner** | Keep new customer accounts, and show signed-in customers without a trade account a banner that links to your [application form](#choose-how-applications-work). |
| **4. Sign them out** | Keep new customer accounts, sign these customers out, and show a message on the login page. |

Our team can set up the banner or the redirect for you: [contact us](https://docs.sparklayer.io/help/support.md). Options 2 to 4 are theme code changes, so if you'd rather do them yourself, pass this section to your developer.

**Code for your developer**

These options use the same check as the rest of this page: a signed-in customer without the `customer.metafields.sparklayer.authentication` metafield isn't a B2B customer. For example, this redirects them to a page with the handle `wholesale-account-needed`. Add it to `theme.liquid` before the closing `</head>` tag:

```html
{%- 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 -%}
```

For a banner instead, use the same condition around the banner code in [Show a B2B-only banner](https://docs.sparklayer.io/help/platforms/shopify/customisations/b2b-only-content.md#show-a-b2b-only-banner), with a link to your application form.

## 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** ([open in the Shopify admin](https://admin.shopify.com/pages)) and click **Add page**.
2. In the **Content** editor, click **Show HTML** (the `</>` button) and paste in the [onboarding page code from this gist](https://gist.github.com/cm-sl/47d750425f90d527e1210efe3735dc7f).
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](https://docs.sparklayer.io/help/get-started/launching.md). To change the activation emails they receive, see [Shopify email notifications](https://docs.sparklayer.io/help/platforms/shopify/customisations/email-notifications.md#b2b-customer-account-invite-email).

## FAQs

**Where do I find my B2B login page?**

Go to `/pages/b2b-login` on your store, for example `www.yourstore.com/pages/b2b-login`. In your Shopify admin, it's listed with your other pages under **Online Store > Pages** ([open in the Shopify admin](https://admin.shopify.com/pages)). If it isn't there, it hasn't been added yet: see [Add the B2B login page](#add-the-b2b-login-page), or ask our team to add it for you.

**How do I approve a wholesale application?**

Review the application, then add the customer in Shopify with the `b2b` tag and their customer group's tag (see [Add B2B customers on Shopify](https://docs.sparklayer.io/help/platforms/shopify/invite-customers.md)). With **Send an email to the store owner**, each application arrives as a registration email at your Shopify store's email address. An application doesn't create a customer in Shopify on its own.

To review and approve applications in one place, with automatic tagging, use [SparkLayer Forms](#use-sparklayer-forms-for-registration) instead of the contact form.

**Is the B2B login page part of the SparkLayer app?**

No. The example login and registration page is standard Shopify code: Liquid and CSS written to Shopify's best practice. Any Shopify developer can change it.

**Who supports the built-in registration form?**

The built-in form uses Shopify's standard contact form system. It's no different from adding a contact page to your store, so it's supported by Shopify rather than SparkLayer.

**What happens if a customer enters the wrong email or password?**

The page redirects to Shopify's standard login page, which tells the customer their details are incorrect. With new customer accounts, a mistyped or different email signs them in as a new retail customer without the `b2b` tag, so they don't see SparkLayer. See [Wholesale-only stores](#wholesale-only-stores-customers-who-sign-in-without-a-trade-account).

**Someone signed in without applying. Why do they have an account?**

With Shopify's new customer accounts, anyone can sign in with an emailed code and get a Shopify customer account. They don't see SparkLayer unless they're tagged `b2b`. See [Wholesale-only stores](#wholesale-only-stores-customers-who-sign-in-without-a-trade-account) for your options.