FROM CACHE - de_header

Recaptcha auf mobil abgeschnitten zu sehen

CaroK
Tourist
13 0 0

Schönen guten Tag,

 

wir haben das Problem, dass Kunden bei ihrem Login auf mobil das Recaptcha Bild nicht ganz sehen können. Siehe hier:

 

WhatsApp Image 2024-05-22 at 09.42.49.jpeg

Hat jemand vielleicht eine Idee woran das liegen kann?

7 ANTWORTEN 7

Gabe
Shopify Staff
18047 2853 4197

Hey @CaroK 

 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Welche reCAPTCHA vX ist das denn? Einige Nutzer haben berichtet, dass der Wechsel von reCAPTCHA v2 zu v3 das Problem gelöst hat. reCAPTCHA v3 funktioniert ohne Benutzerinteraktion und könnte eine saubere Lösung sein, wenn v2 Probleme auf mobilen Geräten verursacht.

 

Das Problem, dass das reCAPTCHA auf mobilen Geräten abgeschnitten wird, kann mehrere Ursachen haben. Hier sind einige Schritte und Lösungen, die du ausprobieren kannst, um das Problem zu beheben:

 

CSS-Anpassungen:

  • Manchmal kann das reCAPTCHA-Widget aufgrund von CSS-Einschränkungen oder dem Layout abgeschnitten werden. Du kannst versuchen, das CSS anzupassen, um das Problem zu beheben. Zum Beispiel:

 

#recaptcha_widget_div iframe {
    transform: scale(0.9);  /* Passt die Größe an */
    transform-origin: 0 0;  /* Verhindert, dass das Widget abgeschnitten wird */
}

 

Wenn du das reCAPTCHA-Widget in einem iFrame einbettest, kannst du sicherstellen, dass der iFrame korrekt dimensioniert ist:

 

<iframe src="https://www.google.com/recaptcha/api/fallback?k=deine-seitenschlüssel" width="100%" height="430" frameborder="0" scrolling="no"></iframe>

 

Stelle auch sicher, dass das reCAPTCHA-Widget vollständig sichtbar ist und der Benutzer scrollen kann, wenn es nötig ist. Dies kann durch Anpassungen am Container und an den Elternelementen erreicht werden:

 

.recaptcha-container {
    overflow: auto;
}

 

Es wurde auch berichtet, dass reCAPTCHA-Widgets oft Probleme auf mobilen Geräten haben, besonders wenn sie in responsive oder dynamische Layouts eingebettet sind. Die oben genannten Anpassungen sollten helfen, aber es kann notwendig sein, verschiedene Ansätze zu testen, um die beste Lösung für deine spezifische Situation zu finden​ (GitHub)​​ (community.hubspot.com)​​ (Jotform Community)​​ (Jotform)​.

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

CaroK
Tourist
13 0 0

Hi Gabe, vielen Dank erstmal für die ausführliche Antwort. 

 

Also so wie ich das verstanden habe, wird das reCaptcha von Shopify gestellt und hat standartmäßig die v3 ?

Dementsprechend weiß ich nicht, wo es eingebettet wurde und wo ich deine vorgeschlagenen Veränderung vornehmen kann. 

 

Da das Theme aktiv ist, kann ich keine Vorschau erstellen, aber hier wäre einmal der Link wo der Fehler passiert: https://bever-naturversand.de/account/login

 

Vielleicht können wir mit dem ersten Schritt im Detail anfangen. Wo genau kann ich das CSS einfügen?

Gabe
Shopify Staff
18047 2853 4197

@CaroK 

 

Super danke. Das habe ich jetzt auf Mobile getestet und konnte den reCAPTCHA nicht aktivieren. Siehe meinen Video dazu.

 

Dann haben wir eine Hilfeseite dazu hier. Das beste was du machen kannst ist das mit den Warehouse Theme Entwickler besprechen hier.

 

Ich habe das Gefühl dass das nicht so einfach mit einem CSS gelöst werden kann.

 

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

CaroK
Tourist
13 0 0

Ok das ist komisch, reCaptcha ist definiv an und mein Screenshot war gestern erst aufgenommen, also das mit dem abgeschnittenen Bild. Naja, das ist auf jeden Fall ein guter Tipp, jetzt verstehe ich, was damit gemeint ist, man soll mit dem Theme Entwickler sprechen 🙈 Hab sie mal angeschrieben und mal gucken, was zurück kommt 🙂 

Gabe
Shopify Staff
18047 2853 4197

Super und halte uns auf dem Laufenden! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

CaroK
Tourist
13 0 0

Hi Gabe, das kam als Antwort: Although I would love to help you with this, the ReCaptcha is 100% controlled by Shopify, so we're unable to help you from the theme's side. To get assistance with it, please reach out to Shopify support directly, and they will be able to help you.

 

Ähm ok und nu 😥

Gabe
Shopify Staff
18047 2853 4197

Hey @CaroK 

 

Ok, um dir dabei behilflich zu sein, wird unser Team das 👀 müssen. Hast du bereits ein Ticket bei unserem Support-Team geöffnet? 

Falls nicht, sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

 

Inkludiere in deinem Ticket an unseren Support alles aus diesem Leitfaden hier samt Bilder.

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog