Der Shopify Blog

Möchtest du einen Onlineshop erstellen?

So erstellst du attraktive 404-Fehlerseiten für deinen 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 kannst du 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 du mit der Erstellung einer 404-Seite auf Shopify beginnen kannst und wie du mit personalisierten Seiten deinen Kunden ein optimales Einkaufserlebnis bietest.

Wie du einen Error 404 behebst - 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 deine 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, deine 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 dir, alle 404-Vorkommnisse in deinem Onlineshop schnell zu identifizieren und somit zu beheben.

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

Lesetipp: 7 Tipps für deine Homepage: Welche Elemente auf die Startseite jeder Website gehören, findest du hier.

Hier sind einige Beispiele für besonders gut gestaltete 404-Fehlerseiten, die dir als Inspiration dienen können, auch deine 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 du mit einem von Shopify genehmigten Theme aus dem Theme Store arbeitest.

Es lohnt sich jedoch, über maßgeschneiderte 404-Seiten nachzudenken. Denn eine durchdachte und markenspezifische 404-Fehlerseite kann dir 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 deinem Publikum zu kommunizieren und mit etwas Humor und passenden Bildern deine 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 du ansprechende Fehlerseiten individuell gestalten kannst. Die folgenden Änderungen solltest du jedoch nur vornehmen, wenn du dich mit dem Programmiercode in deinem Shop auskennst. Andernfalls wendest du dich an einen Shopify-Experten.

Seriöse Shopify-Experten aus Deutschland, Österreich und der Schweiz findest du in unserer englischen Expertensuche.

1. Erstelle 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 du diesen einzigartigen Stil für Landingpages erreichen willst. So kannst du 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 deiner theme.liquid-Datei im Layoutordner deines Themes zu erstellen und sie in 404-layout.liquid umzubenennen.

Jetzt kannst du 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 du möchtest. Wenn du mit dieser alternativen Layoutdatei zufrieden bist, kannst du 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. Deine 404.liquid-Vorlage könnte demnach so aussehen:

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

2. Optimiere deine 404-Seiten mit einem benutzerdefinierten Hintergrundbild

Eine der effektivsten Methoden, um die Marke deines 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 dir, ein Bild unter den restlichen Elementen der Seite zu platzieren. Du kannst sogar CSS verwenden, um mehrere Bilder innerhalb eines Hintergrunds zu platzieren. Diese Technik kann z. B. bei der Kombination von Logos mit deinem Hintergrund nützlich sein.

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

best 404 pages: files

Als nächstes wechselst du zum Stylesheet des Themes und verwenden die sich öffnende Containerklasse oder ID deiner 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änze 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 deines Shops einzubinden, kannst du 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 deiner Seite erscheint, kannst du das CSS anpassen, indem du die Werte für Margin, Padding usw. definierst. Hier ist ein Beispiel dafür, wie die obige Suchleiste im Shop erscheinen könnte:

best 404 pages: search bar

4. Füge 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 dir gleichzeitig mehr Kontrolle über deinen Shop verleihen.

Zunächst musst du eine neue leere Liquid-Datei im Abschnittsordner deines Themes mit dem Namen 404-call-to-action.liquid erstellen. Füge der Datei dann diesen Code hinzu:

Als nächstes musst du diesen neuen Abschnitt in deiner 404.liquid-Vorlagendatei aufnehmen, und zwar an der Stelle, an welcher der Button mit der Handlungsaufforderung erscheinen soll. Du solltest 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 du nun den Theme Customizer öffnest und eine nicht existierende Seite lädst, siehst du eine Option zum Bearbeiten eines CTA-Buttons. Diese Änderungen, die du im Theme Customizer vornimmst, gelten nun für alle 404-Fehlerseiten.

best 404 pages: button

Error 404 ade!

Dies sind nur einige der Möglichkeiten, wie du die standardmäßige 404-Fehlerseite von Shopify optimieren kannst. Diese Inspirationen sollen dich ermutigen, deine Seiten auf die individuellen Eigenschaften deiner Kunden auszurichten.

Mit neuen Ideen und Humor steigerst du so vielleicht schon bald deinen Umsatz. Denn deine Kunden wollen, dass deine Marke an jedem Punkt der Customer Journey auffällt. Vor diesem Hintergrund sollten auch Fehlerseiten nicht übersehen werden. Wir hoffen, dass du mithilfe dieses Artikels einen Mehrwert für deinen Onlineshop schaffen kannst.

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


Starte deinen 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öchtest du einen Gastbeitrag veröffentlichen? Dann lies bitte zuerst diesen Leitfaden.

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