Manually Restore Classic Password Login Form (Advanced)

Advanced / technical section Only follow this if you’re comfortable editing your theme code. If not, we strongly recommend using the free setup service instead.

This page gives a high-level guide for developers or technical store owners who want to manually restore the classic email + password login form in their theme.

---

1. Before you start

Who should use this guide

• You are comfortable with:

  • Editing theme code (Liquid / JSON templates)

  • Using the Shopify theme editor and code editor

• You understand that:

  • Changes can affect your live store

  • The final result might not perfectly match your theme’s built-in styling

Important: Always back up first

1. In Shopify admin, go to Online Store → Themes.

2. Click … next to your current theme → Duplicate.

3. Work on the duplicate when editing code, then publish when ready.

---

2. Overview of what you’ll do

At a high level, manual setup involves:

1. Creating or editing a login template that uses Shopify’s classic customer_login form (email + password).

2. Ensuring the login page is reachable via a stable URL.

3. Updating B2B Lock’s lock messages / button links (and/or your navigation) to point customers to this password-based login page.

4. Testing to make sure:

   • Customers can log in using email + password

   • B2B Lock recognizes them as logged-in and applies rules correctly

---

3. Step 1 – Create a classic login template

1. In Shopify admin, go to Online Store → Themes.

2. On your duplicate theme, click Edit code.

3. Look for an existing customer login template, such as:

   • templates/customers/login.liquid or

   • templates/customers/login.json

If one exists and already uses a password form, you may only need to link to it (see Step 3).

If it doesn’t exist or only shows OTP:

1. Create a new template:

   • In the Templates folder, click Add a new template.

   • Choose customers as type, login as the template name (or a variant such as login-password).

2. Insert or adapt Shopify’s classic login form structure:

   • A form using form 'customer_login'

   • Input fields for:

     • Email

     • Password

   • A Submit button

   • Links for “Forgot your password?” and optionally “Create account”

You can refer to Shopify’s official docs or your previous theme’s login template to copy a standard login form layout, then adjust classes to match your theme’s styling.

---

4. Step 2 – Verify the login page URL

Once the template is created:

1. In the theme editor, open Customize.

2. Navigate to the Customer login page (if your theme exposes it in the pages dropdown).

3. Confirm:

   • The page uses your new password-based template.

   • The URL is something stable like /account/login or a new custom path depending on the theme setup.

If needed, you can:

• Create a new page in Shopify that uses your login template and note its URL.

• Or rely on the default customer account URL if your theme maps it correctly.

This URL is what you will plug into B2B Lock’s Login buttons and navigation links.

---

5. Step 3 – Connect B2B Lock to the password login page

Now that you have a working password login page:

1. Open the B2B Lock app.

2. Edit one of your locks that uses login-based access (e.g. “Hide prices from guests”, “Lock wholesale page”).

3. In Step 3 – Advanced settings, find the section where you configure:

   • Login button URL

   • Or any link that sends users to log in

4. Replace the login URL with the URL of your password login page (from Step 2).

For example:

• Old: /account/login (showing OTP)

• New: /account/login-password (your classic password template)

Adjust the exact paths based on how you named your template and how the theme routes customer login pages.

You can also update:

• Header/footer “Login” menu links in your theme navigation to point to the same URL.

---

6. Step 4 – Test end-to-end

Test with at least two accounts:

1. Existing customer with a password

   • Go to your password login URL.

   • Log in using email + password.

   • Confirm that:

     • Login succeeds.

     • You’re redirected to account page or wherever your theme sends logged-in users.

   • Visit a page locked by B2B Lock:

     • You should now pass the “customer is signed in” check and see protected content.

2. Guest / unapproved user

   • Visit a locked page or product as a guest.

   • Confirm you see the lock message with the new login button.

   • Click the login button:

     • It should correctly open the password login form.

   • If you log in with the wrong credentials:

     • You should see an error from the login form, not from B2B Lock itself.

If anything doesn’t behave as expected:

• Double-check that:

  • The login form uses the correct form 'customer_login'.

  • The theme is not overriding the login route with the OTP-based layout.

  • B2B Lock’s lock buttons link to the correct URL.

If you’re stuck, you can always switch back to your original theme and contact BSS Commerce support for help.

---

7. Limitations & maintenance

A few important caveats:

• Design: The manual login form might not perfectly match your theme’s native design. You can adjust CSS and classes, but this requires front-end work.

• Shopify roadmap: Shopify is steadily moving toward Email + OTP and may change underlying behaviour in the future. Be prepared to revisit this setup when Shopify makes major account updates.

• Theme changes: If you:

  • Install a new theme, or

  • Update your current theme heavily You may need to reapply or re-check this password login customization.

Because of these limitations, the manual approach is best suited for:

• Stores with internal dev capacity

• Merchants who need a short-to-medium term password solution while planning a gradual move to OTP in the future

If you’d rather not manage this manually, use the simpler and safer option:

Contact BSS Commerce and ask for the free password login setup — they’ll handle it for you and make sure it works smoothly with B2B Lock.