So erhöhen Sie die mobilen Konversionsraten für Online-Shops

Die Menschen verbringen mehr Zeit mit ihren Handys als je zuvor. Wir verwenden sie für fast alles – Bankgeschäfte, Investitionen, das Wetter checken, Workouts überwachen, Musik hören, navigieren und natürlich einkaufen.

Fast 55 % des Website-Verkehrs kommt von Mobilgeräten, und 60 % der Online-Käufer verwenden ihr Telefon, um zuerst ein Produkt zu finden. Wenn Ihr Geschäft auf Mobilgeräten kein nahtloses Benutzererlebnis bietet, riskieren Sie, einen großen Teil Ihrer potenziellen Kunden zu verlieren.

Aber wie können Sie Ihren Online-Shop optimieren, um die mobilen Conversions zu steigern?

Beginnen Sie mit einem responsiven WordPress-Theme

Ein hochwertiges WordPress-Theme ist der perfekte Ausgangspunkt für einen responsiven Online-Shop. Ihr Design ist die Grundlage Ihrer gesamten Website, also wählen Sie eines, das auf Geräten aller Größen ein großartiges Erlebnis bietet.

Hier sind ein paar Tipps zur Bewertung eines Themas:

• Testen Sie die Theme-Demo auf Tablets und Telefonen. Da Sie wahrscheinlich nicht Geräte in allen möglichen Bildschirmgrößen besitzen, können Sie eine Website wie das Website Responsive Testing Tool verwenden, um die Erfahrung zu simulieren. Demo-Elemente sollten auf allen Bildschirmgrößen gut aussehen – nichts sollte abgeschnitten, schwer lesbar oder schwer zu verwenden sein.
• Ändern Sie die Größe Ihres Browserfensters, während Sie sich die Theme-Demo ansehen. Inhalte sollten sich entsprechend anpassen und nichts wegschneiden.
• Suchen Sie in der Designbeschreibung nach responsiven Funktionen. Es sollte ausdrücklich „Responsive Design“ erwähnen oder diskutieren, wie sich das Design an mobile Geräte anpasst.
• Führen Sie die Theme-Demo über das für Mobilgeräte optimierte Testtool von Google aus.
• Überprüfen Sie die Bewertungen. Lesen Sie Bewertungen und Rezensionen von Theme-Benutzern. Achten Sie auf negative Kommentare zum Responsive Design.

Es ist auch wichtig, dass sich Ihr Theme in WooCommerce integriert. Dadurch werden Reaktionsprobleme und andere potenzielle Konflikte vermieden.

Das Storefront -Design erfüllt alle oben genannten Anforderungen und ist flexibel und einfach anzupassen. Außerdem verfügt es über eine Vielzahl von untergeordneten Themen, die für bestimmte Branchen entwickelt wurden – Mode, Spielzeug, digitale Produkte, Buchungen und mehr.

Denken Sie an die mobile Nutzbarkeit

Benutzerfreundlichkeit ist, wie effektiv und effizient Käufer mit Ihrer Website interagieren können. Eine schlechte Benutzerfreundlichkeit wirkt sich negativ auf Verkäufe, Conversions, Markenwahrnehmung und SEO aus. Bei der Überprüfung Ihrer mobilen Erfahrung sollte die Benutzerfreundlichkeit Ihre oberste Priorität sein. Folgendes berücksichtigen:

• Denken Sie mit Ihrem Daumen. Mobile Benutzer interagieren mit Ihrer Website nur mit ihren Daumen. Alle anklickbaren Elemente – Links, Schaltflächen, Menüpunkte, Bilder – müssen groß genug sein, damit ein Website-Besucher sie leicht antippen kann. Wenn sie klein oder zu nah beieinander sind, kann jemand aus Versehen auf das Falsche klicken.
• Vermeiden Sie Pop-ups und andere Ablenkungen. Da mobile Bildschirme so klein sind, ist es wichtig, das, was Sie den Besuchern zeigen, zu priorisieren. Pop-ups, die den gesamten mobilen Bildschirm bedecken, können die Erfahrung Ihrer Benutzer stören und sogar negative Auswirkungen auf Ihre Suchmaschinen-Rankings haben; Das Gleiche gilt für Anzeigen und andere Benachrichtigungen. Wenn Sie sich für diese Art von Inhalten entscheiden, stellen Sie sicher, dass sie nur einen Teil des Bildschirms einnehmen und einfach zu schließen sind.
• Implementieren Sie Produktfilter . Wenn Sie viele Produkte anbieten, muss ein Online-Käufer möglicherweise eine Weile scrollen, um zu finden, wonach er sucht. Dies kann auf mobilen Bildschirmen, auf denen nur wenige Produkte gleichzeitig angezeigt werden, besonders schwierig sein. Ihre Kunden könnten frustriert sein und vor dem Kauf aufgeben. Filter helfen ihnen, die Auswahl basierend auf dem, wonach sie suchen, einzugrenzen. Probieren Sie eine Erweiterung wie WooCommerce Product Filters aus, um Sortierfunktionen bereitzustellen.
• Verwenden Sie ausreichend große Schriftarten . Wenn der Text Ihrer Website zu klein ist, kann es für mobile Benutzer sehr schwierig sein, etwas zu lesen – sie sollten nicht kneifen und zoomen müssen, um mehr über Ihre Produkte zu erfahren. Abhängig von Ihrer Website und Ihrer Auswahl an Schriftarten müssen Sie möglicherweise unterschiedliche Schriftgrößen für mobile Geräte festlegen.
• Text aufbrechen. Wenn Sie Seiten mit vielen Informationen haben, unterteilen Sie diese in kleinere Segmente, die auf kleinen Bildschirmen einfacher zu navigieren sind. Sie können dies mit Akkordeons, Schaltern oder Aufzählungszeichen tun. Fügen Sie in langen Blogbeiträgen Links zu Unterabschnitten hinzu, die es Benutzern ermöglichen, direkt zu interessanten Themen zu springen.

Vereinfachen Sie die Checkout-Seite

Während das Einkaufen auf Mobilgeräten im Laufe der Jahre erheblich zugenommen hat, sind die Conversions nicht so gut. Tatsächlich beträgt die durchschnittliche E-Commerce-Conversion-Rate auf Mobilgeräten nur 2,03 %, verglichen mit 3,83 % auf Desktop-Computern.

Ihr Checkout-Prozess spielt eine entscheidende Rolle beim Verkauf. Machen Sie es auf Mobilgeräten so einfach wie möglich, um die Conversion-Raten zu verbessern. Wenn es zu lange dauert, bis Ihre Kunden einen Kauf tätigen, geben sie auf und kaufen woanders ein.

Entfernen Sie unnötige Felder

Beginnen Sie mit einem genauen Blick auf die Informationen, die Sie für den Checkout benötigen. Ist alles notwendig? Sie werden wahrscheinlich feststellen, dass es Felder gibt, die Sie entfernen können:

• Wenn Sie nicht an Unternehmen verkaufen, entfernen Sie das Feld Firmenname.
• Wenn Ihnen kein Szenario einfällt, in dem Sie Ihre Kunden möglicherweise anrufen müssen, entfernen Sie das Feld Telefon.
• Wenn Sie keine Notizen akzeptieren, entfernen Sie das Feld Bestellnotizen.

Je weniger Felder, desto besser, insbesondere auf Mobilgeräten. Lesen Sie mehr darüber, wie Sie WooCommerce-Checkout-Felder anpassen können.

Gast-Checkout zulassen

Kundenkonten sind großartig und beschleunigen den Checkout für wiederkehrende Käufer, indem sie ihre Informationen automatisch ausfüllen und ihre Kreditkartendaten speichern. Aber was ist mit Neukunden?

Nicht jeder möchte ein Konto in Ihrem Shop erstellen, insbesondere auf Mobilgeräten, auf denen er so schnell wie möglich bezahlen möchte. Tatsächlich wird angenommen, dass das Erfordernis von Kundenkonten zu 35 % der aufgegebenen Warenkörbe beiträgt.

Gast-Checkout mit WooCommerce zulassen:

1. Navigieren Sie zu WooCommerce → Einstellungen → Konten und Datenschutz.
2. Wählen Sie Kunden erlauben, eine Bestellung ohne Konto aufzugeben.
3. Klicken Sie unten auf der Seite auf die Schaltfläche Änderungen speichern .

Erfahren Sie, wie Sie feststellen können, ob die Gastkasse für Ihr Geschäft geeignet ist.

Akzeptieren Sie die soziale Anmeldung

Ihre Kunden sind wahrscheinlich auf ihren Mobilgeräten bei Social-Media-Konten angemeldet. Durch die Aktivierung des sozialen Logins auf Ihrer Website können sie sich über Facebook, Twitter, Google, Amazon und mehr anmelden, um den Checkout zu vereinfachen und zu vermeiden, dass sie ein neues Konto erstellen müssen.

Aktivieren Sie WooCommerce Social Login.

Akzeptieren Sie mehrere Zahlungsoptionen

Das Akzeptieren von mehr als einer Zahlungsform beschleunigt den Checkout. Sie können zwar auch Kreditkartentransaktionen zulassen, aber durch die Aktivierung von Optionen wie PayPal oder Amazon Pay können Kunden mit bestehenden Konten bezahlen, anstatt eine Kreditkarte herauszuziehen und alle Details einzugeben.

Sehen Sie sich WooCommerce-Zahlungsgateway-Integrationen an

Machen Sie Checkout-Felder groß genug

Es ist wichtig, dass Kunden die Checkout-Felder auf Ihrer Website einfach ausfüllen können. Stellen Sie sicher, dass die Felder groß genug sind, damit sie Informationen eintippen und ausfüllen können, ohne hineinzoomen zu müssen. Sie können dies mit einfachem CSS tun.

Verwenden Sie zunächst den Browser-Inspektor auf Ihrer Checkout-Seite. Dies hilft Ihnen, die Klasse jedes einzelnen Felds zu identifizieren. Verwenden Sie dann den folgenden Code für jede bestimmte Klasse; In diesem Beispiel wird das E-Mail-Feld verwendet.

 /** Customize height of checkout fields **/ input[type='email'].input-text{ padding: 100px !important; }

Passen Sie die Polsterung basierend auf Ihrer spezifischen Website und den aktuellen Einstellungen an. Möglicherweise müssen Sie ein wenig spielen, um herauszufinden, was funktioniert. Sie können auch die spezifischen Geräte anpassen, für die dieser Code gilt, indem Sie Medienabfragen verwenden.

Hinweis: Wenn Sie mit Code und der Lösung potenzieller Konflikte nicht vertraut sind, möchten Sie möglicherweise einen WooExpert oder Entwickler zur Unterstützung auswählen. Wir können keinen Support für Anpassungen im Rahmen unserer Support-Richtlinie leisten.

Produktseiten bearbeiten

Es ist wichtig, dass auch Ihre einzelnen Produktseiten responsive sind. Kunden sollten Produktdetails lesen, Fotos durchblättern und Artikel in ihren Einkaufswagen legen können.

Machen Sie die Schaltfläche „In den Warenkorb“ klebrig

Eine klebrige Schaltfläche „In den Warenkorb“ folgt einem Käufer die Seite hinunter, während er Produktinformationen liest. Wenn sie vom Kauf überzeugt sind, müssen sie nicht ganz nach oben scrollen, um einen Kauf zu tätigen. Tatsächlich hat sich gezeigt, dass eine klebrige Schaltfläche „In den Warenkorb“ die Bestellungen um 7,9 % erhöht! Fügen Sie dieses CSS hinzu, um Ihre Schaltfläche auf Mobilgeräten klebrig zu machen:

 /** Make the Add to Cart button sticky **/ @media only screen and (max-width: 900px) { .cart { position: fixed; bottom: 0; background: #ffffff; width: 100%; z-index: 3; } }

Abhängig von Ihrem Thema und Website-Design müssen Sie möglicherweise ein wenig mit dem CSS spielen. Wenn Sie jedoch keinen Code bearbeiten möchten, können Sie auch ein Plugin wie Sticky Add to Cart für WooCommerce verwenden.

Machen Sie Bilder intuitiv

Wenn Käufer auf einer Produktseite landen, erwarten sie, dass sie durch Ihre Bildergalerie wischen können, um weitere Fotos anzuzeigen, und mit ihren Fingern einen Artikel vergrößern können. Diese mobilen Gesten sind so intuitiv, dass sie fast unbewusst ausgeführt werden. Stellen Sie sicher, dass Ihre Website sie unterstützt.

Fügen Sie Pfeile oder Punkte hinzu, um anzuzeigen, wenn mehrere Fotos vorhanden sind. Andernfalls wissen Ihre mobilen Benutzer möglicherweise nicht einmal, dass sie wischen können!

Priorisieren Sie wichtige Informationen

Stellen Sie sicher, dass Kunden wichtige Produktinformationen sehen können, ohne sehr weit scrollen zu müssen. Priorisieren Sie Preise, Variationen (Farbe, Größe usw.), Rabatte, Bewertungen und andere Details, die für Ihre Produkte spezifisch sind: Wenn Sie Kleidung verkaufen, kann das Material wichtig sein. Oder wenn Sie ein Elektronikgeschäft sind, möchten Sie vielleicht die Garantie hervorheben, die mit jedem Kauf geliefert wird.

Zusätzliche Informationen wie vollständige Produktbeschreibungen und Spezifikationen (Waschanleitung, SKUs, Inhaltsstoffe usw.) können weiter unten auf der Seite angezeigt werden. Auf diese Weise können Ihre Kunden, wenn sie weitere Informationen wünschen, diese leicht finden, aber wenn sie nur mit den Grundlagen zufrieden sind, werden sie nicht überfordert.

Vereinfachen Sie Ihr mobiles Menü

Halten Sie Ihr Hauptmenü auf Mobilgeräten so einfach wie möglich. Eine lange Liste von Seiten wird Website-Besucher überwältigen und verwirren. Schränken Sie es auf das Wesentliche ein und priorisieren Sie dann die Reihenfolge, in der sie aufgelistet sind, mit den wichtigsten Seiten zuerst.

The Good Batch verkürzt sein mobiles Menü auf nur fünf Seiten zusätzlich zu Login- und Einkaufswagen-Links. Es ist einfach und auf den Punkt.

Wenn Sie viele Seiten einfügen müssen, versuchen Sie es mit Untermenüs mit erweiterbaren Schaltern. Begrenzen Sie primäre Menüelemente und zeigen Sie Untermenüelemente an, wenn ein Benutzer sie erweitert. Achten Sie darauf, Symbole wie Pfeile zu verwenden, um anzuzeigen, dass ein Menü erweitert wird!

Nuria bietet fünf Hauptmenüpunkte auf dem Handy mit Pfeilen neben jedem, was anzeigt, dass es mehr Optionen gibt. Wenn ein Benutzer klickt, verschiebt sich das Primärmenü und zeigt ein Untermenü mit einer klaren „Zurück“-Schaltfläche an. Dadurch können sie alle notwendigen Optionen anzeigen, ohne ihre Kunden zu überfordern.

Es gibt mehrere Möglichkeiten, mobile Menüs anzuzeigen, also wählen Sie diejenige, die für Ihr Publikum am besten geeignet ist. Sie beinhalten:

• Ein Hamburger-Menü . Das Hamburger-Symbol besteht aus drei Linien, die vertikal übereinander gestapelt sind. Das Menü wird ausgeblendet, bis ein Benutzer auf das Symbol klickt. Dies ist eine großartige Option für Websites mit vielen Seiten, kann jedoch für Website-Besucher schwieriger zu finden sein.
• Ein Tab-Menü . Dies ähnelt stark der typischen Desktop-Navigation und listet Menüelemente horizontal am oberen Rand der Website auf. Dies sollte nur für Menüs mit minimalen Links verwendet werden; Benutzer sollten nicht zoomen oder scrollen müssen, um alle Elemente anzuzeigen.
• Eine schwebende Aktionsschaltfläche . Eine Schaltfläche mit einem Menüsymbol schwebt auf der Seite und folgt einem Benutzer, wenn er scrollt. Wenn Sie darauf klicken, wird es erweitert, um das Menü anzuzeigen. Dies ist eine gute Möglichkeit, Ihr Primärmenü zugänglich zu halten, kann jedoch ablenken oder Inhalte verdecken.
• Ein Dropdown-Menü . Eine Menüleiste oben auf der Seite öffnet sich, wenn darauf geklickt wird, um Seitenoptionen anzuzeigen. Es nimmt etwas mehr Platz ein als das Hamburger-Menü, kann aber von Website-Besuchern leichter gesehen werden.

Normalerweise enthält Ihr Design ansprechende Menüstile. Wenn dies nicht der Fall ist oder Sie eine andere Option wählen möchten, sehen Sie sich diese Plugins an:

• WP Mobile-Menü
• ShiftNav
• Responsives Menü

Für welche Option Sie sich auch entscheiden, stellen Sie sicher, dass sie für Ihre Kunden einfach zu verwenden ist und ihren Bedürfnissen entspricht. Und denken Sie daran, dass dies bedeuten kann, ein völlig separates mobiles Menü zu erstellen!

Sorgen Sie dafür, dass wichtige Funktionen leicht zu finden sind

Aufgrund des begrenzten Bildschirmplatzes auf Mobilgeräten können Gegenstände leicht verloren gehen. Stellen Sie sicher, dass Besucher wichtige Funktionen schnell finden können.

Machen Sie die Suchleiste sichtbar

Viele Websites enthalten ein Suchfeld in ihrer Seitenleiste, aber es wird auf Mobilgeräten normalerweise an das Ende der Seite verschoben. Die Suchfunktion in Ihrem Desktop-Header passt möglicherweise nicht an denselben Platz auf einem Telefon. Aber es ist eine entscheidende Funktionalität für Online-Käufer, die von der Möglichkeit profitieren können, nach dem gewünschten Produkt zu suchen.

Eine großartige Lösung besteht darin, die Suchleiste in Ihr mobiles Menü aufzunehmen, wo sie für Käufer leicht sichtbar ist. Einige Designs bieten eine Einstellung für diese Funktionalität, aber wenn dies nicht der Fall ist, können Sie dasselbe mit benutzerdefiniertem Code erreichen.

Öffnen Sie Ihre Datei header.php und fügen Sie die folgende Funktion hinzu: <?php get_search_form(); ?> <?php get_search_form(); ?> . Dann können Sie es mit CSS nach Ihren Bedürfnissen gestalten.

Und wenn Sie keinen Code berühren möchten, erreicht ein Plugin wie Ivory Search die gleiche Funktionalität.

Kontaktdaten übersichtlich darstellen

Wenn Sie Kontaktinformationen in eine Fußzeile oder Seitenleiste einfügen, wird es für mobile Benutzer schwierig sein, sie anzuzeigen, da sie zum Ende der Seite scrollen müssen. Entgegnen Sie dem mit einem sichtbaren Link zu Ihrer Kontaktseite im Menü.

Sie können auch eine anklickbare Telefonnummer und/oder E-Mail-Adresse in Ihr Primärmenü aufnehmen, damit die Benutzer einfach Kontakt aufnehmen können. Um dies zu tun:

1. Navigieren Sie in Ihrem WordPress-Dashboard zu Aussehen → Menü .
2. Wählen Sie im Drop-down-Menü neben „Menü zum Bearbeiten auswählen“ das richtige Menü aus. Dies wäre entweder Ihr primäres Menü oder Ihr mobiles Menü, je nachdem, wie Sie die Dinge eingerichtet haben.
3. Erweitern Sie benutzerdefinierte Links in der linken Spalte.
4. Fügen Sie im URL -Feld den entsprechenden Link hinzu. Fügen Sie für eine Telefonnummer tel:+18005553927 hinzu und ersetzen Sie die Zahlen durch Ihre Nummer. Stellen Sie sicher, dass keine Leerzeichen oder andere Symbole vorhanden sind. Fügen Sie für eine E-Mail-Adresse mailto:[email protected] hinzu.
5. Fügen Sie im Feld Linktext den Text hinzu, der in Ihrem Menü angezeigt wird. Sagen Sie beispielsweise „Rufen Sie uns an“ oder „Ruf 800-555-3927 an“.
6. Klicken Sie auf die Schaltfläche Zum Menü hinzufügen und ziehen Sie sie an die gewünschte Stelle.
7. Klicken Sie unten rechts auf die blaue Schaltfläche Menü speichern .

Wenn ein Benutzer auf die Telefonnummer auf seinem Mobilgerät klickt, werden Sie automatisch angerufen. Wenn sie auf Ihre E-Mail-Adresse klicken, wird in ihrer Standard-E-Mail-App eine neue E-Mail an Sie geöffnet.

Machen Sie den Einkaufswagen leicht zugänglich

Wenn ein Kunde nach dem Hinzufügen eines Produkts zu seinem Einkaufswagen weiter einkaufen möchte, ist es wichtig, dass er diesen Einkaufswagen bearbeiten und später zur Kasse gehen kann.

Das Mini-Warenkorb-Plugin für WooCommerce fügt sowohl der Desktop- als auch der mobilen Version Ihrer Website eine Warenkorb-Option hinzu. Auf dem Desktop enthält der Warenkorb die Artikelnamen, Fotos und Preise und ermöglicht Käufern, Mengen zu bearbeiten, ohne die Seite zu verlassen. Auf Mobilgeräten zeigt es die Anzahl der Artikel im Warenkorb und die Gesamtsumme der Bestellung an. Außerdem können Käufer mit einem Klick zur Warenkorbseite gelangen.

Konzentrieren Sie sich auf die Geschwindigkeit der Website

Während die Website-Geschwindigkeit auf jedem Gerät wichtig ist, ist dies wohl noch wichtiger für kleine Geräte. Mobile Käufer verwenden oft langsamere Internetverbindungen oder mobile Daten zum Surfen, daher sollten Sie alles tun, um sicherzustellen, dass Ihre Website so schnell wie möglich geladen wird. 53 % der mobilen Nutzer verlassen eine Website, wenn das Laden länger als drei Sekunden dauert, und die neue Mobile-First-Indexierung von Google priorisiert die mobile Version Ihrer Website.

Beginnen Sie damit, die aktuelle Ladezeit Ihrer Website zu verstehen. Der Website-Geschwindigkeitstest von GTMetrix und Pingdom kann Ihnen helfen, die Geschwindigkeit Ihrer Website zu verstehen und Empfehlungen zur Verbesserung zu geben. Google PageSpeed ​​Insights bietet sogar einen Test speziell für Mobilgeräte an.

Verwenden Sie dann die folgenden Ressourcen, um Ihre Website zu optimieren:

• So optimieren Sie Bilder, um Ihren Online-Shop zu beschleunigen
• Erste Dinge, die bei WooCommerce und Geschwindigkeit zu beachten sind
• Warum ist meine WooCommerce-Site langsam und wie kann ich das Problem beheben?
• So erreichen Sie einen High Performance Score bei Google PageSpeed ​​Insights für WooCommerce
• Beschleunigen Sie Ihre WooCommerce-Site mit diesen Jetpack-Funktionen

Sie sollten auch erwägen, AMP (Accelerated Mobile Pages) zu aktivieren, ein von Google entwickeltes Framework, um leichtgewichtige, optimierte mobile Erlebnisse zu schaffen. Dies ist eine großartige Möglichkeit, Blog-Posts zu beschleunigen, insbesondere für bestimmte Online-Shops. Erfahren Sie mehr über die Verbesserung der Websitegeschwindigkeit mit AMP.

Testen Sie Ihren Online-Shop auf Mobilgeräten

Es ist wichtig, dass Sie Ihren Shop regelmäßig testen und verstehen, wie alles auf Mobilgeräten funktioniert. Der Prozess für Ihre Website ähnelt den oben aufgeführten Schritten zum Testen von Theme-Demos – verwenden Sie eine Kombination aus Tools wie dem Test für Mobilgeräte von Google und manuellen Methoden wie der Größenänderung Ihres Browserfensters.

Alles testen! Klicken Sie auf jeden Link; Blättern Sie durch jede Seite; und überprüfen Sie jede Funktion. Alle Aspekte Ihrer Website sollten auf Telefonen und Tablets einfach anzuzeigen, zu lesen und zu navigieren sein.

Ein paar kleine Änderungen auf Mobilgeräten können einen großen Unterschied in der Kundenzufriedenheit und Conversions machen. Auf der Suche nach weiteren Tipps? Lesen Sie, wie Sie die Leistungsfähigkeit von WooCommerce auf Mobilgeräten freischalten.