Der Shopify Blog

So erstellen Sie attraktive 404-Fehlerseiten für Ihren Onlineshop

was-bedeutet-error-404-fehler

Ob durch einen unschuldigen Benutzerfehler oder defekte Links auf einer Website – es ist unvermeidlich, dass Besucher eines Onlineshops gelegentlich auf 404-Fehlerseiten landen. Während das Auftauchen einer 404-Seite vielleicht keine erwartete Aktion ist, bedeutet das nicht, dass das Endergebnis automatisch ein frustrierter Besucher auf einer tristen Seite sein muss.

Diese Seiten können auch eine Gelegenheit sein, eine markenspezifische Botschaft zu vermitteln. Einige der besten 404-Fehlerseiten kombinieren Humor mit einem guten Design, um ansprechende Kundenerlebnisse zu schaffen.

Durch die Verbindung von funktionalen Merkmalen wie klaren Handlungsaufforderungen, Suchfeldern und einer Navigation mit kreativen und amüsanten Bildwelten können Sie personalisierte Landingpages erstellen und ein negatives Ereignis in etwas Positives verwandeln.

In diesem Beitrag werden wir uns einige Beispiele für inspirierende 404-Seiten ansehen. Außerdem werden wir erläutern, wie Sie mit der Erstellung einer 404-Seite auf Shopify beginnen können und wie Sie mit personalisierten Seiten Ihren Kunden ein optimales Einkaufserlebnis bieten.

Wie Sie einen Error 404 beheben - Best Practices für Fehlerseiten

Eine gute 404-Seite sollte anzeigen, dass ein Fehler aufgetreten ist, eine klare Navigation zu einer anderen Seite bieten und auf Ihre Marke abgestimmt sein. Das Ganze kann auch Auswirkungen auf die Suchmaschinenoptimierung haben, da eine gut gestaltete Seite mit hilfreichen Links die Absprungrate reduziert und ansprechende oder lustige Inhalte die verbrachte Zeit auf dieser Seite sogar erhöhen können.

Der Support von Google hat einige sehr aufschlussreiche Ratschläge für die Arbeit mit 404-Seiten parat.

Eine gute benutzerdefinierte 404-Seite wird den Leuten helfen, die ursprünglich gesuchten Informationen zu finden.

„Zudem sollten hier andere hilfreiche Inhalte bereitgestellt werden und die Besucher ermutigt werden, Ihre Website weiter zu erkunden.“

Selbst mit einer markenspezifischen 404-Vorlage ist es immer noch wichtig, eine Website auf fehlerhafte Links zu überprüfen. Letztendlich soll die Wahrscheinlichkeit, dass Kunden falsch weitergeleitet werden, so gut es geht und von vornherein minimiert werden. Ein einfaches Tool wie der Link Checker von W3 oder die App Transportr ermöglicht Ihnen, alle 404-Vorkommnisse in Ihrem Onlineshop schnell zu identifizieren und somit zu beheben.

Die Erstellung einer individuellen 404-Seite ist mittlerweile zum Standard geworden. So können Sie Ihre Marke im bestmöglichen Licht präsentieren und gleichzeitig die Kunden zurück auf die Hauptseite leiten.

Lesetipp: 7 Tipps für Ihre Homepage: Welche Elemente auf die Startseite jeder Website gehören, finden Sie hier.

Hier sind einige Beispiele für besonders gut gestaltete 404-Fehlerseiten, die Ihnen als Inspiration dienen können, auch Ihre Kunden mit einzigartigen Seiten zu begeistern.

1. home24

error 404 home24

Im Fall von home24 wird der Kunde darauf aufmerksam gemacht, warum der Fehler aufgetreten ist und ihm wird angeboten, nach dem Wunschprodukt zu suchen. Sehr schön ist die persönliche Verabschiedung am Ende der Handlungsaufforderung.

2. zalando

zalando error 404 seite

Auch im Beispiel von zalando wird der Kunde aktiv über Buttons gelenkt, um den richtigen Einstieg in den Onlineshop zu finden. Das Banner zum Geschenkgutschein bietet eine zusätzliche Kaufoption direkt auf der 404 Seite.

3. fritz-kola

error 404 fehler beispiel fritz-kola

Ein sehr gutes Markenerlebnis bietet die 404-Seite von fritz-kola, die im gesamten Design und durch die witzige Schreibweise auf den Fehler aufmerksam macht.

4. TeeFee

tee-fee error 404 beispiel

Sehr kreativ ist auch das Beispiel des Onlineshops TeeFee. Hier hat sich die Fee wohl schlafen gelegt ;) ... Veranschaulicht wird das Ganze über ein kurzes GIF.

5. Mädchen Flohmarkt

error 404 mädchen flohmarkt beispiel

Sehr heldenhaft der 404 Error auf der Seite vom Mädchen Flohmarkt. Hier werden die Nutzer zudem aufgefordert die sozialen Netzwerke zu besuchen. Eine geschickte Möglichkeit, um hier zusätzlich Follower aufzubauen.

Error 404-Fehler beheben - Diese unterschiedlichen Lösungen für Fehlerseiten bietet Shopify

Mit der standardmäßigen 404-Seite bietet Shopify eine praktikable Lösung, um Error 404-Fehler ansprechend zu beheben. Voraussetzung für die Verwendung ist, dass Sie mit einem von Shopify genehmigten Theme aus dem Theme Store arbeiten.

Es lohnt sich jedoch, über maßgeschneiderte 404-Seiten nachzudenken. Denn eine durchdachte und markenspezifische 404-Fehlerseite kann Ihnen effektive Möglichkeiten zur Umsatzsteigerung eröffnen und als Marketing-Instrument eingesetzt werden. 

So könnte beispielsweise ein Call-to-Action-Button Kunden zu einer bestimmten Produktkategorie leiten oder ein Suchfeld könnte dabei helfen, die gewünschten Inhalte leichter zu finden. Eine 404-Seite bietet auch eine einzigartige Gelegenheit, mit Ihrem Publikum zu kommunizieren und mit etwas Humor und passenden Bildern Ihre Markenbekanntheit zu steigern. Wie wir bei den oben gezeigten Beispielen gesehen haben, kann eine lustige und informative 404-Seite einen möglichen Missstand entschärfen und Besucher zu wertvollen Inhalten umleiten.

Mit diesen Punkten im Hinterkopf wollen wir uns nachfolgend einige Methoden anschauen, mit denen Sie ansprechende Fehlerseiten individuell gestalten können. Die folgenden Änderungen sollten Sie jedoch nur vornehmen, wenn Sie sich mit dem Programmiercode in Ihrem Shop auskennen. Andernfalls wenden Sie sich an einen Shopify-Experten.

Wie finde ich einen seriösen Shopify Experten in Deutschland, Österreich oder der Schweiz?

Geben Sie in dieser Suchmaske Ihre Stadt oder Ihr Land ein und schauen Sie sich die Profile und Referenzen der Experten an. (Hier sind die Ergebnisse für Deutschland, Österreich und die Schweiz.) Sie finden garantiert einen passenden!

Hinweis: Es ist möglich, dass nicht jeder Experte für alle drei Länder (bzw. für jede Stadt) gelistet ist. Es kann sich also durchaus lohnen, einen Experten aus Deutschland anzuschreiben, auch wenn Sie in Österreich oder der Schweiz angesiedelt sind. Umgekehrt gilt dies natürlich auch.

1. Erstellen Sie eine alternative Layoutvorlage für 404-Seiten

Eine 404-Seite hat im Vergleich zu anderen Seiten auf der Website oft ein unverwechselbares Erscheinungsbild. Das Erstellen einer alternativen Layoutdatei für 404-Seiten ist hilfreich, wenn Sie diesen einzigartigen Stil für Landingpages erreichen wollen. So können Sie beispielsweise die Fußzeile entfernen oder eine andere Art von Menü erstellen. 

Standardmäßig wird die Layoutdatei theme.liquid auf die Vorlage 404.liquid angewendet, was jedoch leicht geändert werden kann. Der erste Schritt wäre, eine Kopie Ihrer theme.liquid-Datei im Layoutordner Ihres Themes zu erstellen und sie in 404-layout.liquid umzubenennen.

Jetzt können Sie ganz einfach nicht benötigte Elemente der Layoutdatei entfernen (z. B. eine Kopf- oder Fußzeile), die Überschrift H1 anpassen und alles verändern, was Sie möchten. Wenn Sie mit dieser alternativen Layoutdatei zufrieden sind, können Sie Liquid Logic Tags verwenden, um die Layoutdatei mit der Vorlagendatei zu verknüpfen.

Um die 404-Seite mit dieser speziellen Layoutdatei rendern zu lassen, müssten wir ein Liquid-Tag {% layout "404-Layout" %} an den Anfang der Vorlagendatei 404.liquid setzen. Ihre 404.liquid-Vorlage könnte demnach so aussehen:

Nun wird jede Änderung, die Sie an der Datei 404-layout.liquid vornehmen, auf die 404-Seite angewendet. In unserem Help Center finden Sie weitere Informationen zum Thema 404-Vorlagen.

2. Optimieren Sie Ihre 404-Seiten mit einem benutzerdefinierten Hintergrundbild

Eine der effektivsten Methoden, um die Marke Ihres Kunden online zu identifizieren, ist der Einsatz einfacher Grafiken. Dabei ist ein individuelles Hintergrundbild zum Standard auf der 404-Seite geworden. Um einen aufmerksamkeitsstarken Vollbildeffekt zu erzielen, können wir mit CSS ein Hintergrundbild zuweisen, das spezifisch für unsere 404-Seite ist.

Die Eigenschaft background-image ermöglicht es Ihnen, ein Bild unter den restlichen Elementen der Seite zu platzieren. Sie können sogar CSS verwenden, um mehrere Bilder innerhalb eines Hintergrunds zu platzieren. Diese Technik kann z. B. bei der Kombination von Logos mit Ihrem Hintergrund nützlich sein.

Als erstes sollten Sie Ihr gewünschtes Bild in Shopify unter Einstellungen > Dateien hochladen. Dies wird eine eindeutige URL generieren, unter der Ihr Bild gespeichert ist.

best 404 pages: files

Als nächstes wechseln Sie zum Stylesheet des Themes und verwenden die sich öffnende Containerklasse oder ID Ihrer 404.liquid-Seite als Selektor, zusammen mit der CSS-Eigenschaft background image und der URL als Wert. Dies könnte dann wie folgt aussehen:

3. Ergänzen Sie die Seite mit einem Suchfeld

Ein Suchfeld für eine schnelle Weiterreise ist eine der häufigsten und effektivsten Funktionen auf einer 404-Seite. Um ein Suchfeld auf der 404-Seite Ihres Shops einzubinden, können Sie ein HTML-Formular mit dem Attribut action auf /search setzen. In diesem Formular muss eine Eingabe vom Typ Text mit einem auf q gesetzten Namensattribut erfolgen. Nachfolgend ein einfaches Beispiel hierfür:

Um einzustellen, wie dies auf Ihrer Seite erscheint, können Sie das CSS anpassen, indem Sie die Werte für Margin, Padding usw. definieren. Hier ist ein Beispiel dafür, wie die obige Suchleiste im Shop erscheinen könnte:

best 404 pages: search bar

4. Fügen Sie einen Bereich mit einer Handlungsaufforderung hinzu

Manchmal sollen die Kunden nach dem Landen auf einer 404-Seite auf eine bestimmte Seite oder Produktkategorie umgeleitet werden. Ein anpassbarer Call-to-Action-Button ist eine ideale Möglichkeit, einen Kunden auf eine bestimmte Seite zu leiten. Das Hinzufügen eines statischen Abschnitts kann dies ermöglichen und Ihnen gleichzeitig mehr Kontrolle über Ihren Shop verleihen.

Zunächst müssen Sie eine neue leere Liquid-Datei im Abschnittsordner Ihres Themes mit dem Namen 404-call-to-action.liquid erstellen. Fügen Sie der Datei dann diesen Code hinzu:

Als nächstes müssen Sie diesen neuen Abschnitt in Ihre 404.liquid-Vorlagendatei aufnehmen, und zwar an der Stelle, an welcher der Button mit der Handlungsaufforderung erscheinen soll. Sie sollten hier ein Liquid-Theme-Tag {% Abschnitt "404-call-to-action" %} verwenden, um diesen Abschnitt aufzunehmen. In diesem Fall sieht die 404.liquid-Vorlagendatei beispielsweise so aus:

Wenn Sie nun den Theme Customizer öffnen und eine nicht existierende Seite laden, sehen Sie eine Option zum Bearbeiten eines CTA-Buttons. Diese Änderungen, die Sie im Theme Customizer vornehmen, gelten nun für alle 404-Fehlerseiten.

best 404 pages: button

Error 404 ade!

Dies sind nur einige der Möglichkeiten, wie Sie die standardmäßige 404-Fehlerseite von Shopify optimieren können. Diese Inspirationen sollen Sie ermutigen, Ihre Seiten auf die individuellen Eigenschaften Ihrer Kunden auszurichten.

Mit neuen Ideen und Humor steigern Sie so vielleicht schon bald Ihren Umsatz. Denn Ihre Kunden wollen, dass Ihre Marke an jedem Punkt der Customer Journey auffällt. Vor diesem Hintergrund sollten auch Fehlerseiten nicht übersehen werden. Wir hoffen, dass Sie mithilfe dieses Artikels einen Mehrwert für Ihren Onlineshop schaffen können.

Haben Sie bereits mit verschiedenen Stilen experimentiert, um funktionale und lustige 404-Fehlerseiten zu entwickeln? Wir würden uns freuen, wenn Sie uns Ihre Erfahrungen in den Kommentaren unten schildern würden.


Starten Sie Ihren eigenen Onlineshop mit Shopify!

14 Tage lang kostenlos testen—keine Kreditkarte erforderlich.



Which method is right for you?Geposted von Hendrik Breuer: Hendrik ist Redakteur des deutschen Shopify-Blogs. Möchten Sie einen Gastbeitrag veröffentlichen? Dann lesen Sie bitte zuerst diesen Leitfaden.

Dieser Artikel erschien ursprünglich auf Englisch im Shopify.com-Blog und wurde übersetzt.