Google reCAPTCHA
Important!
It is only necessary to add the code below to your theme if you are using a Version 2 or Version 1 theme. Users of Version 3, Version 4 and Version 5 themes do not need to install any code to use these features.
Warning!
Installing the reCAPTCHA app will block your website's contact forms from being submitted unless the reCAPTCHA code is present on your forms. Please ensure that you do not install the app without adding the necessary code.
• Installation instructions (for version 2 themes or earlier)
• Installation instructions (for version 3 themes or later)
• Installation instructions for custom forms
Installation instructions (for version 2 themes or earlier)
You'll need to make sure that you install the code on each of the 3 forms (listed below) on your theme files. If you don't install the code then the form will stop working once the reCAPTCHA app is installed.
To install the code select from the menu. Then select Page Editor on your live theme.
Contact Us form
1. Locate the contact.twig file by selecting from the menu of the theme's page editor.
2. Add the code shown below before the closing </form> tag. Ideally this will be placed before the <button> code:
{% if recaptcha %}
<div class="g-recaptcha"></div>
{% endif %}
For example:
Please note:You may want to insert some styling to increase the vertical space between the last field of the form and the reCAPTCHA.
Customer Registration form
3. Locate the account_form.twig file by selecting from the menu of theme's page editor.
4. Add the code shown below before the closing </form> tag. Ideally this will be placed before the <button> code:
{% if recaptcha %}
<div class="g-recaptcha"></div>
{% endif %}
For example:
Please note: You may want to insert some styling to increase the vertical space between the last field of the form and the reCAPTCHA.
Product Review form
(If you don't have the Product Reviews feature enabled on your account, you won't have access to this form).
5. Locate the product.twig file by selecting from the menu of the theme's page editor.
6. Add the code shown below before the closing </form> tag for the product reviews form. Ideally this will be placed before the <button> code:
{% if review_recaptcha %}
<div class="g-recaptcha"></div>
{% endif %}
For example:
Please note: You may want to insert some styling to increase the vertical space between the last field of the form and the reCAPTCHA.
Testing
It's important that you test each of the 3 forms you've added reCAPTCHA too, to ensure that they are working correctly.
Product Q&A
7. If you're using the product Q&A app you'll need to use the code shown below in order to display reCAPTCHA:
{% if question_recaptcha %}
<div class="g-recaptcha" data-sitekey="{{ question_recaptcha.key }}" data-stoken="{{ question_recaptcha.token }}"></div>
{% endif %}
Installation instructions (for version 3 themes or later)
You'll need to make sure that you install the code on each of the 3 forms (listed below) on your theme files. If you don't install the code then the form will stop working once the reCAPTCHA app is installed.
To install the code select from the menu. Then select Page Editor on your live theme.
Contact Us form
1. Locate the contact.twig file by selecting from the menu of the theme's page editor.
2. Add the code shown below before the closing </form> tag. Ideally this will be placed before the <button> code:
{% if recaptcha %}
<div class="g-recaptcha"></div>
{% endif %}
For example:
Please note:You may want to insert some styling to increase the vertical space between the last field of the form and the reCAPTCHA.
Customer Registration form
3. Locate the account_create.twig file by selecting from the menu of the theme's page editor.
4. Add the code shown below before the closing </form> tag. Ideally this will be placed before the <button> code:
{% if recaptcha %}
<div class="g-recaptcha"></div>
{% endif %}
For example:
Please note: You may want to insert some styling to increase the vertical space between the last field of the form and the reCAPTCHA.
Product Review form
(If you don't have the Product Reviews feature enabled on your account, you won't have access to this form).
5. Locate the product.twig file by selecting from the menu of the theme's page editor.
6. Add the code shown below before the closing </form> tag for the product reviews form. Ideally this will be placed before the <button> code:
{% if review_recaptcha %}
<div class="g-recaptcha"></div>
{% endif %}
For example:
Please note: You may want to insert some styling to increase the vertical space between the last field of the form and the reCAPTCHA.
Testing
It's important that you test each of the 3 forms you've added reCAPTCHA too, to ensure that they are working correctly.
Product Q&A
7. If you're using the product Q&A app you'll need to use the code shown below in order to display reCAPTCHA:
{% if question_recaptcha %}
<div class="g-recaptcha" data-sitekey="{{ question_recaptcha.key }}" data-stoken="{{ question_recaptcha.token }}"></div>
{% endif %}
Custom forms
If you've added a custom contact form, reCAPTCHA must be added to forms when the app is activated within your ShopWired account.
The {{ recaptcha }} will never return true on any pages other than product, contact form and account pages, therefore the reCAPTCHA container should be added without the usual accompanying if statement.
<div class="g-recaptcha"></div>