Add Google reCAPTCHA to Shopify registration page

Prevent fake accounts with adding Google reCAPTCHA to Shopify user registration page in 3 easy steps.
This tutorial will guide you trough setting up reCAPTCHA on the user registration page of your Shopify store.

Step 1:

Go to https://www.google.com/recaptcha/admin/create and register a new site.
If you already registered your website with Google reCAPTCHA, you can skip this step.

Select reCAPTCHA v2 and “I’m not a robot” tickbox, as shown below.

Fill in and submit the form. Next you will see the Site key and Secret key provided by Google reCAPTCHA. You will need the Site key, to implement it in the code we will add in step 2.

Step 2:

Go to your Shopify admin -> Customize Theme click on Actions in the upper right corner and select “Edit code”. Under Templates navagate to customers/register.liquid and open it. This is where code for the user registration form is stored.

Scroll down and find the Submit input of the form. <input type=”submit” … >

Just above it add below code (this is where reCAPTCHA will be shown on the front end):

<p class="text-center">
<div id="recaptcha"></div>
</p>

Next we need to amend code of the Submit button. Add class name
submit-register after btn and disabled property at the end, as shown below.

<p class="text-center">
  <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn submit-register" disabled >
 </p>

This will disable (hide) the submit button at the end of form, unless Google reCAPTCHA has confirmed, that this is a real user, by clicking.

At the end of customers/register.liquid template add below code: Note to fill in your Site Key provided by Google in Step 1. Replace “ENTER_YOUR_SITE_KEY_PROVIDED_BY_GOOGLE” with your Site key.

<script>
  var actCallback = function (response) {
    $('#RegisterForm').find('.submit-register').prop("disabled", false);
  };
  var expCallback = function() {
    $('#RegisterForm').prop("disabled", true);
  };
  var onloadCallback = function () {
    var widget = grecaptcha.render(document.getElementById("recaptcha"), {
      'sitekey' : "ENTER_YOUR_SITE_KEY_PROVIDED_BY_GOOGLE", //see Step 1
      'theme': "light",
      'callback' : actCallback,
      'expired-callback': expCallback,
    });
  }
</script>

The above code will enable (show) the submit button, once confirmation of reCAPTCHA was succesful.
Save this template and move on to Step 3.

Step 3:

Navigate to header.liquid template under Sections and add below code snippet just before the closing </header> tag:

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
// add above before </header> tag

Save the changes and navigate to your registration page to see the result.
your-website.com/account/register

Add reCPTCHA to Shopify

As you see above, the “Create” button is initially hidden and shows up, only after successfuly confirming reCAPTCHA.

Was this titorial helpful? Register to the Newsletter to get notified, once new tutorials are published.

Thank you!
Irena