Guide to Setup OTP login on your Shopify Store

Overview

miniOrange provides the best OTP Login & Verification Solution for Shopify Plus & Non-Plus Stores. Easily login & register your users using OTP sent over their phone/email, this will keep away spammers or bots from your store and only allow genuine users to access your store. You can also prevent fake orders by verifying OTP before the user checks out.

How easier OTP Login is?
We provide OTP verification via email i.e. sending the OTP to the customer’s email address. With the flexibility of sending OTPs on both phone numbers and emails, a user is bound to sign up and stay with your platform.

Download Application Pricing Plans

Pre-requisite: Shopify OTP Login Application

To enable OTP Login/ Registration feature, you will need to install miniOrange OTP Login Application on your store.

Configuration Steps

Step-by-Step Guide for configuring OTP Login on Shopify Store.

Step 1: Enable OTP Login widget on your Shopify Store

• Select the theme version installed on your store from the options below, and follow the steps accordingly.

• New Theme (2.0)
• Old Themes

• Navigate to the Apps section and then click on the 2FA - OTP Login application

• You will be navigated to the application dashboard as shown in the below image.

• You can place OTP Login option on the Shopify Store Login, Register, Checkout page. Choose from the option given below where you want to add the OTP Login/Registration option.

• OTP Login as Popup
• OTP as Default Login
• OTP Over Registration
• OTP Over Checkout

Configure OTP Login as popup over the Shopify Login Page

• Enable the Display OTP Login Widget option as shown in the below image.

• You will be taken to the Enable Widget page within the theme customization section where you can check that the OTP Login Popup widget is added to the login page. Click on Save.

• Now navigate to the App Embeds section and enable OTP Login Popup widget as shown in the below screen. You can view the Login with OTP button is added to the Login page. Click on Save.

• To check how the OTP Login widget is shown to the end users. Go to the three dots and click on View.

• Click on the User icon. You will be able to view how the Login with OTP option is shown to the end users.

• Click on the Login with OTP button. You will be able to view how the Login with OTP as Popup option is shown to the end users.

• Select your Country and enter your registered mobile number. Click on Continue.

• A OTP Verification Screen wil appear. Enter the OTP received on your mobile and click on Continue.

• You will be successfuly logged in to your Shopify Store.

Configure OTP as Default Login option to access the Store

• Enable the Enable Default Login Method: OTP option as shown in the below image.

• You will be taken to the Enable Widget page within the theme customization section where you can check that the OTP Login option is added as default login option. Click on Save.

• To check how the default OTP Login option is shown to the end users, go to the three dots and click on View.

• Click on the User icon. You will be able to view how the default OTP Login option is shown to the end users.

• Select your Country and enter your registered mobile number. Click on Continue.

• A OTP Verification Screen wil appear. Enter the OTP received on your mobile and click on Continue.

• You will be successfuly logged in to your Shopify Store.

Configure OTP Over Registration page

• Enable the Enable OTP over Registration option as shown in the below image.

• You will be taken to the Enable Widget page within the theme customization section where you can check that the OTP Login widget is added to the login page. Click on Save.

• To check how the OTP Verification step is shown to the end users. Go to the three dots and click on View.

• Click on the User icon and click on the Create account option. You will be able to see the OTP Verification step on the account creation page.

• Select your Country and enter your mobile number. Click on Continue.

• Enter the OTP received on your mobile in the Verification Code section and click on Continue.

• A New Shopify user account will be created and you will be logged in to the Shopify Store.

Configure OTP Over Checkout Page

• Enable the Enable Default Login Method: OTP option as shown in the below image.

• You will be taken to the Enable Widget page within the theme customization section where you can check that the OTP Login option is added as default login option. Click on Save.

• Now navigate to the setting section and then click on Checkout tab, and check the option to allow the customer to log in to their account before checkout.

• If you need assistance configuring or customizations around OTP Login over checkout, please contact us at shopifysupport@xecurify.com.

• You can choose the approach to enable OTP Login/ Registration from the options available.

OPTION A:

• Enable OTP Login widget and click on Save button. Then click on the Style widget button to customize the widget/login button which will be displayed at your store login page.

• You can either customize the login widget yourself or can choose from predefined templates as shown in the image below.

• Click on Save button at bottom of the screen.

OPTION B:

• Make OTP Login as default login option in this case, OTP Login form will directly appear on /account/login page and Shopify Login will be optional.

• Click on Save button at bottom of the screen.

OPTION C:

• Enable OTP over Registration option and click on Save.. Click on Style setting which will redirect you to customise page.

• Enable the Shopify OTP registration option and click on Save button at bottom of the screen. (This steps is mandatory if your are enabling the feature for the 1st time)

• Click on Save.

Step 2: OTP Configuration

• Navigate to App section and click on 2FA - OTP Login application. You will be redirected to the home page of the application dashboard.

• Navigate to the Configuration >> Basic settings section in the left navigation menu.

2.1 BASIC SETTINGS

• Redirection page after OTP Login : Enter the page extension of the store on which you want to redirect the user when they login using OTP. For example: if you want to redirect users to cart pagr after login then enter /cart in the redirection field.

• Receive OTP balance info at: Enter the email on which you will get notification when you exhaust 80%, 90% and 99% of the allocated OTP transactions.

2.2 STOREFONT DIGEST COOKIE

If you want to restrict your shopify store to only logged-in users please follow the below steps and if you want to allow OTP Verification only from the /account/login page you can skip this step.

Prerequisite: You should have enabled password protection on your shopify store.

• You need to get a storefront_digest cookie for configuring the complete store with OTP Verification. Right click on your keyboard and click on Inspect option.

• Now navigate to Application section and then select Cookie option in left menu. Select your store and search for Storefront_digest. Copy this Value.

• Paste the storefront_digest cookie value in the storefont digest cookie section as shown below.

2.3 MULTIPASS SECTION (This feature is only available for the Shopify Plus customers)

• If you have a Shopify Plus store, then enable this option for providing OTP login into your Store.

• Click on Save.

Step 3: Delivery Method

3.1 SMS

A. SMS Gateway

• You can configure your custom gateway provider.

B. SMS Template

• Note: If you are from INDIA, contact us to change the SMS template. If you are from any other country then you need to write ##otp## where you wish to place generated otp in the template.

• Click on Save SMS template.

3.2 Email

• You can allow users to login into Shopify store using OTP over Email.
• You can either use the default template or can use your custom email template. (Contact us at shopifysupport@xecurify.com if you want your custom email template)

Step 4: Configuration on Shopify Store Admin Page

• Go to your Shopify store admin page.
• In the left section, click on the Online Store and select Preferences.
• Scroll down to the Spam Protection section and uncheck the second option "Enable Google reCAPTCHA on login, create account and password recovery pages"
• Save your changes.

Additional Resources

• Shopify Security Solutions
• Shopify Single Sign-On (SSO)
• Shopify Content restriction
• Shopify Subscription

Get in Touch

Please reach out to us at shopifysupport@xecurify.com, and our team will assist you with setting up the Shopify OTP Login application. Our team will help you to select the best suitable solution/plan as per your requirement.