Seite spring nach unten

[Ines_0402]

Hallo,
ich habe das Problem, dass meine Seite (verwende Impulse Theme) immer in die Fußzeile springt wenn man sich für den Newsletter anmeldet. Somit sieht man die Anmeldebestätigung nicht und es ist sehr verwirrend. Welche Möglichkeiten gibt es um das zu fixieren?

[MosDev]

Hallo ines,

Ferndiagnosen sind immer schwer, hast du einen Vorschau-Link zu deinem Shop mit diesem Problem ?

cheers,

sam

[Ines_0402]

Hi Sam,
Sobald man sich auf der Startseite von z.at zum Newsletter anmeldet bzw. abonnieren anklickt springt die Seite einfach nach unten. Sie sollte eigentlich da bleiben wo sie ist und die kurze Nachricht “vielen Dank für Ihre Anmeldung” aufpoppen was ja auch passiert aber man sieht es aufgrund von dem Sprung nach unten nicht.

[Gabe]

Hey @Ines_0402

Wie Sam sagt, bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren. Das Problem, bei dem der User-Fokus nach einer Newsletter-Anmeldung in Impulse (oder gar auch in anderen Themes) in die Fußzeile springt, ist nicht allzu unbekannt. Eine mögliche Lösung ist die Anpassung des Codes des Themes oder eben das Impulse Theme Support-Team zu wenden

Es scheint, dass das Standardverhalten des Newsletter-Moduls im Footer so programmiert ist, dass es eine Erfolgsmeldung anzeigt, wenn eine E-Mail-Adresse zum ersten Mal eingetragen wird. Wenn diese Programmierung nicht korrekt abläuft oder die Weiterleitung nach der Anmeldung nicht korrekt gehandhabt wird, kann das zu dem von dir beschriebenen Problem führen.

Kannst du mal eine frische Impulse Themekopie von Theme Store runterladen und testen ob dasselbe Problem da auch vorkommt?

Dann wäre auch die Frage, ob du nicht in einen besseren Newsletter Signup wie ein Popup interessiert bist, um 1) deinen Kunden ein verbesserte Newsletter Subscribe Experience anzubieten und 2) die Signup Rates zu erhöhen? Wie hoch sind sie denn derzeit?

Um die Erfahrung deiner Kunden beim Abonnieren deines Newsletters zu verbessern und die Anmelderaten zu erhöhen, solltest du folgende Best Practices beachten:

• Klare Wertversprechen machen: Dein Newsletter sollte ein klares Wertversprechen haben. Sage potenziellen Abonnenten deutlich, was sie durch das Abonnieren gewinnen können. Zum Beispiel könnte das Angebot exklusiver Events oder Rabatte sein.
• Anzahl der Felder minimieren: Reduziere die Anzahl der Felder in deinem Anmeldeformular. Oft reicht eine einfache E-Mail-Adresse. Zusätzliche Felder können optional sein.
• Optimiere deinen Call-to-Action (CTA): Dein CTA sollte hervorstechen und klar formulieren, was die Nutzer erwarten können. Verwende Handlungsaufforderungen wie “Jetzt anmelden” oder “Rabatte erhalten”.
• Formular sichtbar machen: Platziere dein Anmeldeformular an prominenten Stellen auf deiner Webseite, wie zum Beispiel im Header, auf der Über-Seite, in der Seitenleiste oder im Footer.
• Sozialen Beweis zeigen: Nutze soziale Beweise, indem du beispielsweise die Anzahl der zufriedenen Abonnenten zeigst oder Testimonials einbindest.
• Interessenwahl ermöglichen: Wenn du mehrere Newsletter anbietest, lass die Nutzer auswählen, für welche Themen sie sich anmelden möchten.
• Anreize bieten: Biete etwas Wertvolles im Austausch für die E-Mail-Adresse an, wie einen Rabatt oder exklusive Inhalte.
• Responsive Formulare verwenden: Stelle sicher, dass dein Anmeldeformular auf allen Gerätetypen gut aussieht, insbesondere auf Mobilgeräten.
• Countdown-Timer nutzen: Wenn dein Angebot zeitlich begrenzt ist, kann ein Countdown-Timer den Handlungsdruck erhöhen.
• Abonnenten beruhigen: Betone, dass Nutzer sich jederzeit abmelden können und verlinke auf deine Datenschutzrichtlinien.
• Double Opt-In verwenden: Dieser Prozess erfordert, dass Benutzer ihre Anmeldung über einen Link in einer E-Mail bestätigen, was die Qualität deiner E-Mail-Liste verbessert.

Für spezifische Beispiele und weitere Details zu diesen Praktiken kannst du die Artikel auf Conesso, Moosend und MailerLite nachlesen. Diese Artikel bieten wertvolle Einblicke und praktische Beispiele, die dir helfen können, deine Newsletter-Anmeldeformulare und Popups zu optimieren.

Gerne können wir darüber hier plaudern falls du Zeit und Lust hast!

[MosDev]

Hallo Ines,

wie Gabe bereits erwaehnt hatte, wuerde ich mich bei dem Fall an die Entwickler vom Theme selbst wenden. Habe es gerade einmal getestet, und die sog. success message wird unten im Footer angezeigt, s. Bild

und

Kenne das Impuls Theme nicht im Detail, aber es wird einen Grund haben wieso die Entwickler die Success Message unten in einem collapsible Element untergebracht haben. Meine erste Vermutung wäre, das Email Input im Footer und das Email Input als Section teilen gemeinsamen Code. Dabei kann es passieren, dass das Absenden des Formulars im Section Newsletter die success message aus der Footer Newsletter Form triggert und dort die Meldung letztlich erscheint. Sollten die Entwickler vom Theme allerdings schnell lösen können.

cheers,

sam

[Ines_0402]

Hey Gabe,

vielen lieben Dank für eine ausführliche Antwort und tollen Tipps! Popup und Co folgen und die Artikel schau ich mir auf jeden Fall an.. ich wollte nur erst mal dieses “Problem” lösen. Sam hat es inzwischen auch getestet und so wie du es auch erwähnt hast, liegt es höchstwahrscheinlich an der Erfolgsnachricht. Werde mich diesbezüglich mal an die Theme Entwickler wenden!

Liebe Grüße
Ines

[Ines_0402]

Hey Sam,

vielen lieben Dank auch dir! Als ihr die Erfolgsnachricht erwähnt habt, hat es auch bei mir klick gemacht! Werde mich auf jeden Fall an die Entwickler wenden! Vielen Dank noch mal!

Liebe Grüße
Ines

[Ines_0402]

Hey,

ich habe mich so wie vorgeschlagen an den Support vom Theme gewendet und bin jetzt etwas verwirrt. Das ist ein Teil der Antwort:

"Unfortunately, our hands are tied on this one. The forms run on the code provided by Shopify so when submitted, the page reloads and we don’t know which form it was that was submitted. The same success/error message is put in both forms that’s why they are displayed in both.

We’ve brought this issue up with the Shopify team multiple times but they’ve seemed reluctant to make any progress on updating it even though this is a pretty disjointing user experience in a lot of cases."

An wen sollte ich mich hier am besten von Shopify wenden?

Liebe Grüße

Ines

[Gabe]

Hey Ines! @Ines_0402

Das habe ich jetzt auch in meinem Test Impulse Theme getestet. Hast du es auch in einer frischen Kopie probiert? Der Shopify Support wird hier nicht viel helfen können da es nicht unterstützt wird.

Basierend auf dem HTML-Code für das Newsletter-Anmeldeformular gibt es einige Ansätze, die du ausprobieren kannst, um das Problem des Scrollens zur Fußzeile zu verhindern. Da du erwähnt hast, dass die Seite nach dem Absenden des Formulars nach unten scrollt, liegt das Problem wahrscheinlich im Formular-Tag selbst oder in einem damit verbundenen JavaScript-Event.

Hier sind einige Vorschläge zur Fehlerbehebung und Anpassung:

• JavaScript Event Handler anpassen: Der onsubmit-Handler deines Formulars ruft derzeit eine Funktion window.Shopify.recaptchaV3.addToken auf und gibt dann false zurück, was das Standardverhalten des Formulars (Seiten-Reload) verhindern soll. Es sieht so aus, als würde dies nicht richtig funktionieren. Du könntest versuchen, einen angepassten JavaScript-Handler zu schreiben, der das Formular asynchron absendet (z.B. mittels AJAX), um ein Neuladen der Seite zu vermeiden:

document.getElementById('newsletter-footer').addEventListener('submit', function(event) {
    event.preventDefault(); // Verhindert das Standardverhalten
    // Füge hier deinen Code zum asynchronen Absenden des Formulars ein
    // Zeige die Erfolgsmeldung an, ohne die Seite neu zu laden
});

• CSS zur Verbesserung der Sichtbarkeit der Erfolgsmeldung: Du könntest CSS verwenden, um sicherzustellen, dass die Erfolgsmeldung (“Danke fürs Anmelden”) sichtbarer wird, wenn das Formular abgesendet wird. Du könntest die Position der Nachricht ändern oder ein Modal/Fenster erscheinen lassen, das die Nachricht enthält.

• Formular neu gestalten: Es könnte hilfreich sein, das Formular so zu überarbeiten, dass es nicht mehr dieselbe Logik wie das Formular im Footer teilt. Dies könnte bedeuten, dass du separate Formulare für verschiedene Teile der Seite erstellst, um sicherzustellen, dass die Erfolgsmeldung im sichtbaren Bereich erscheint.

• Überprüfung des Shopify-Themes und -Scripts: Es könnte auch ein Problem mit dem spezifischen Shopify-Theme oder mit Shopify-spezifischen Scripts geben, die das Verhalten des Formulars beeinflussen. In diesem Fall könntest du versuchen, das Theme zu aktualisieren oder dich an Shopify-Experten für eine spezifischere Unterstützung zu wenden.

Das kann ein Entwickler gerne für dich wenn du es lieber nicht wagen möchtest?