🔐How do I set up passwordless login?

Brands can create magic links or one time log-in codes for customers in lieu of a traditional password experience.

Last updated: April 10, 2024

Overview

Passwordless login allows a frictionless login experience for your customers.

Passwordless login feature is available on our 💎 Excel plan.

Example of magic link passwordless type. Magic links allow the customer to log in with a link sent to their email address.

Example of one-time code passwordless type. prompts the customer to paste a six-digit generated code sent to their email address.

Passwordless Login Setup

Step 1: Smartrr Admin

In Smartrr's admin, navigate to Theming in the left-hand menu. Under the Advanced settings tab, you will see a toggle to turn on Passwordless log-in.

The default passwordless login type is Magic Link. Select to change to One Time Code if you prefer.

Press Save changes and confirm changes will be applied to either your live theme or a duplicate of your current live theme.

Step 2: Shopify Liquid

After passwordless has been toggled on in your Smartrr admin, a liquid file called smartrr-passwordless-login.liquid snippet file will be generated in the Shopify theme you saved to. Please check in the selected theme to see if this file is present.

Next, check the following code has been injected into the theme’s main-login.liquid file or customers/login.liquid file. If this code is not injected, please copy onto line 1 of the file:

// <div id="smartrr_passwordless_form" class="customer login section-{{ section.id }}-padding">
    {%- form 'customer_login', novalidate: 'novalidate' -%}
      {% render 'smartrr-passwordless-login' %}
    {%- endform -%}
  </div>

Finally, check your shop's account login page to confirm Smartrr's passwordless login page is visible. By default, the page should look like this:

Default login page for Magic Link passwordless login.

🎨 Want to apply additional styling to your shop's passwordless login page? Use CSS to style at the top of the smartrr-passwordless-login.liquid file.

If you need any assistance in the setup process or additional theming for the login page, please contact us at [e-mail].

Step 3: Disabling reCAPTCHA (required for Magic Link ONLY)

When using Magic Link as your passwordless login option you will need to disable reCAPTCHA for login within your Shopify store.

To do this go to Shopify: Sales Channels > Online Store > Preferences > deselect "Enable reCAPTCHA on login, create account and password recovery pages" (see below).

This is the required reCAPTCHA configuration for using Smartrr Magic Link.

Customer Notifications

You can configure what the emails look like for both Magic Link and One Time Code passwordless options from the Customer Notifications settings in the Smartrr App.

Scroll down to the card for Passwordless Login. Click on emails to edit.

Default email for One Time Code passwordless login type.

Default email for Magic Link passwordless login type.

FAQs

1. Why do customers still need to enter a password when initially creating an account?

Due to Shopify limitations, customers will still be expected to create a password if they creating a new account with your store. After this, the customer will not be required to use this password again to log in to their account and will be able to log in with a one-time code.

2. Can I revert back to traditional Shopify login from passwordless login?

Technically, yes. Under Theming > Advanced, switch the radio option from Passwordless login back to Traditional login. However, if you switch back to traditional from passwordless login, all customers will be required to reset their passwords upon next log in.

Note: If you switch back to traditional from passwordless login, all customers will be required to reset their passwords upon next log in.