How to remove annoying ReCaptcha V3 sticky info box

Shopify Discussion
, ,
1

I want to remove that annoying sticky ReCaptcha V3 on the right side of the website.

I want to go with Recaptcha V2 instead that has an input box, but no sticky bar over the website.

Also, I’m wondering to use any other Captcha system, maybe self-hosted.

I cannot disable captcha at all due to spam-protection reasons (as I understand it is used in newsletter subscription popup, blog post comment, and Shopify registration probably).

And still, I cannot put any ultra slow app that would slow down the website.

2

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow (see this link for more info). Add the following code to hide the badge in your CSS:

.grecaptcha-badge { 
    visibility: hidden;
}
3

You can hide the badge with CSS, just inspect the element with chrome dev tools to get the id / class, then add a CSS rule to hide it (see this guide if you’re not familiar how to inspect / edit CSS).

*If you do that, you have to show a disclaimer (https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed).

We have recaptcha v3 set up, hiding the widget + disclaimer here if you want to see an example: https://speedboostr.com/contact. The CSS rule we use to hide it is

.grecaptcha-badge { visibility: hidden; }
4

You can hide the badge with CSS, just inspect the element with chrome dev tools to get the id / class, then add a CSS rule to hide it (see this guide if you’re not familiar how to inspect / edit CSS).> > *If you do that, you have to show a disclaimer (https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowe Tellpizzahut).> > We have recaptcha v3 set up, hiding the widget + disclaimer here if you want to see an example: https://speedboostr.com/contact. The CSS rule we use to hide it is

.grecaptcha-badge { visibility: hidden; }

Exactly what I needed! You just saved me several hours. Thanks!

1 Like
5

The dev tools were useless to me. A bunch of jibberish and I didn’t see anything (that I could tell) as to where to find the proper CSS file/ location to add this code. Do you have more specifics on this? Thanks!

6

Where do I go to hide the sticky? Also, it just appeared this morning. I have had this site up and running for the past year and this was never visible. Now it’s on my home page. Weird!

7

I was able to accomplish it by adding the code to my “theme.css” file. Most themes have this file.

8

And nobody said a word about what exactly .css file need to modify :neutral_face:

9

Now Shopify has integrated the new hcaptcha but there is no documentation as of yet for if we can (or how) to hide it. Google says there is an “invisible mode” but does not say how to activate it: https://docs.hcaptcha.com/faq#do-i-need-to-display-anything-on-the-page-when-using-hcaptcha-in-invisible-mode