Erstelle deinen Onlineshop – ganz egal, in welcher Branche du bist

Erstelle eine E-Commerce-Website mit leistungsstarken Tools, die dir dabei helfen, Kunden zu finden, deine Umsätze anzukurbeln und deine täglichen Aufgaben zu verwalten.

Frau an einem Laptop, die einen Antrag für ein Darlehen für Kleinunternehmen stellt.

So erstellst du attraktive 404-Seiten 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 einesOnlineshopsgelegentlich 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.

Wir zeigen dir, wie du einenGoogle Eintrag erstellenkannst und welche Vorteile dir das bietet!

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.

Lesetipp:Das Einmaleins derHashtags auf Instagramund welche besonders beliebt sind, erklären wir dir hier.

Wie du einen Error 404 behebst - Best Practices für Fehlerseiten

明信片祝404 - seite sollte anzeigen, dass 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.

DerSupport von Googlehat 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 derLink Checkervon W3 oder die AppTransportrermö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 tipp毛皮你主页:Welche di Elemente再见e 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.

Wenn du noch auf der Suche nach Inspiration für deinen Shop bist, beschäftigen wir uns in diesem Blogbeitrag mit der Frage: "Was lässt sich gut verkaufen?"

1. home24

error 404 home24

我秋天冯home24将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.

Lesetipp:Shopify und Open Source: Eine für beide Seiten nützliche Beziehung

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 Themeaus dem Theme Storearbeitest.

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 unsererenglischen 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 Layoutdateitheme.liquidauf die Vorlage404.liquidangewendet, 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 unseremHelp Centerfindest 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 Eigenschaftbackground-imageermöglicht es dir, ein Bild unter den restlichen Elementen der Seite zu platzieren. Du kannst sogarCSS 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 deiner404.liquid-Seite als Selektor, zusammen mit der CSS-Eigenschaftbackground imageund 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 demAttribut actionauf/searchsetzen. In diesem Formular muss eine Eingabe vom Typ Text mit einem aufqgesetztenNamensattributerfolgen. 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.Fuge杯德国麻省理工学院静脉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 Namen404-call-to-action.liquiderstellen. Füge der Datei dann diesen Code hinzu:

Als nächstes musst du diesen neuen Abschnitt in deiner404.liquid-Vorlagendatei aufnehmen, und zwar an der Stelle, an welcher der Button mit der Handlungsaufforderung erscheinen soll. Du solltest hier einLiquid-Theme-Tag{% Abschnitt "404-call-to-action" %}verwenden, um diesen Abschnitt aufzunehmen. In diesem Fall sieht die404.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.

HTTP Error 500: Begriff, Ursachen & Lösungen zum Server Internal Error

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!

Kostenlos testen—keine Kreditkarte erforderlich.


Häufig gestellte Fragen zu Error 404-Fehlerseiten

Was sind 404 Seiten?

404-Seiten kommen zum Einsatz, wenn eine fehlerhafte URL eingegeben wurde. Die Seite die versucht wird aufzurufen existiert nicht (mehr) beziehungsweise kann auf dem Server nicht gefunden und ausgespielt werden.

Was muss auf eine 404 Seite?

Auf eine gute 404-Seite gehören die folgenden Dinge: 1. Informiere über die Art des Fehlers. 2. Biete den Lesenden mit einer klaren navigation die Möglichkeit zu einer anderen Seite zu gelangen. 3. Gestalte die Seite in deinem Corporate Design. 4. Nutze zusätzliche Informationen, um Menschen auf deiner Seite zu halten.

Was bedeutet The requested URL was not found on this server?

Der Ausdruck "The requested URL was not found on this server" bedeutet, dass eine falsche URL aufgerufen wurde, die nicht im Server auffindbar ist. Die Seite, die mit der URL eigentlich aufgerufen werden sollte, kann nicht geöffnet werden.

Welche Fehlerseiten gibt es?

Im Web gibt es verschiedene Fehlerseiten mit Zahlencodes ab 400 und 500. Die beiden bekanntesten sind die 404-Fehlerseite "Nicht gefunden" und die 500-Fehlerseite "Interner Serverfehler". Weitere Fehlerseite sind: 400 Fehlerhafte Anfrage, 401 Zugriff verweigert, 403 Zugriff gesperrt, 501 Nicht implementiert, 502 Gatewayfehler, 503 Vorrübergehend nicht verfügbar.

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 zuerstdiesen Leitfaden.

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