Login with OTP in Shopify

Step 1: Install and setup App

• Install Shopify OTP Application by clicking on “Add app” from Shopify App Store.
• Click on the "Install app" button at the right top or bottom of the screen.
• Check/Enable the Display Login Widget on Storefront button.

• Fill up different options available to customize the widget/login button which will be displayed at your store login page or you can move forward without customizing the widget and use our already added default OTP login widget.

Step 2: Domain Mapping

• If your primary domain is different than your Shopify domain then add your primary domain URL in the Domain Mapping section.

Note:

Remove https: and slashes from the URL while adding it here.
• Scroll down to Domain Mapping Section.
• Save your configurations.

Step 3: Testing Login with OTP in your Shopify Store

• Go to your store /account/login page.
• Click on Login With miniOrange Widget (This name is configurable from the Application home page).
  
  

• Enter your mobile number and click on the “Next” button.
  
  

• Enter the OTP received over your mobile number and click on the “Verify” button.
  
  

• If you don’t receive OTP, click on the “Resend OTP” link.

• If you want to change your mobile number, click on the “Change Phone Number” link.
• Once you verify the OTP, you’ll be logged in into your Shopify Customer Account.
• If there’s no mobile number linked to your shopify account then Login with your shopify credentials and click on the “Update Profile” button on the Account page of shopify store as shown below.


• Enter the mobile number which you want to link to your account and click on the “Update” button .

• After that Logout from your account and try logging in again with the mobile number you updated just now.

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.

Step 5: Restricting Complete Store to logged-in users

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. Click on the lock-shaped icon in the address bar of the browser and then click on cookies.
  

• After that click on a tab with a name similar to your store domain and then click on submenu - Cookies.


• Now search for storefront_digest variable and then click on it. After that you can see it’s value under the content section as shown below. Copy this value.


• Paste the storefront_digest cookie value in the store access cookie section as shown below and then click on the Save button.
  

• Now go to https:// < your-store-domain>/password and click on “Enter using Password” in the top right corner. After that, click on the Login widget to initiate the logging in with OTP.

Step 6: Upgrade to one of the plan

• You can skip this step if you have free SMS available.

• Click on Update Plan button in the navigation bar of the Application
  
  
• Click on the Upgrade button below the plan with which you want to move ahead.
  
  
• Accept the recurring charges and after that, you’ll be redirected back to the Application home page.