Fehler im Theme deines Onlineshops beheben

Es gibt viele verschiedene Umstände, die dazu führen können, dass dein Theme nicht wie erwartet angezeigt wird, was dazu führt, dass Elemente verschwinden oder nicht wie erwartet funktionieren und verschiedene andere Anzeigeprobleme auftreten. Dies könnte auf Code von Drittanbietern oder Apps zurückzuführen sein, der mit dem Theme in Konflikt steht, oder auf benutzerdefinierte Code-Anpassungen. Möglicherweise gibt es auch Einstellungen in deinem Shopify-Adminbereich, die angepasst werden müssen. Möglicherweise musst du z. B. deine übersetzten Inhalte, deine Produkte, Kollektionen, die Navigation oder deine Märkte überprüfen.

Wenn nach Überprüfung der Schritte in diesem Leitfaden weiterhin Probleme mit deinem Theme auftreten, musst du dich an das Support-Team deines Themes wenden. Erfahre mehr über den Erhalt von Support für Themes.

Nach der Fehlerquelle suchen

Das Auffinden der Fehlerquelle in deinem Theme ist der erste Schritt, um dieses Problem zu beheben. Versuche die folgenden Schritte, um die Fehlerquelle zu finden:

1. Du kannst die Shopify-Statusseite besuchen, um bekannte Probleme zu beheben, die sich auf deine Storefront auswirken können. Wenn kein ähnliches Problem aufgeführt ist, kannst du das Problem weiter untersuchen.

2. Das Problem könnte lokal auf deinem Gerät sein. Lokale Probleme sind in der Regel eine Folge von Geräte- oder Browsereinstellungen oder Problemen mit der Internetverbindung. Versuche es mit den folgenden Schritten, um sicherzustellen, dass das Problem nicht lokal ist und auf anderen Geräten, Browsern oder Internetverbindungen repliziert werden kann:

   • Leere deinen Browser-Cache und lösche deine Cookies. Wenn du mit deinem Shopify-Konto im Shopify Help Center angemeldet bist, wirst du durch das Löschen des Browser-Caches und der Cookies von deinem Konto abgemeldet. Wenn du den virtuellen Help Center-Assistenten nutzt, wird durch das Löschen des Browser-Caches und der Cookies dein Chat-Verlauf zurückgesetzt und du musst einen neuen Chat mit dem virtuellen Help Center-Assistenten beginnen.
   • Versuche es mit dem Inkognito-Modus, einem anderen Gerät oder der Shopify-App.
   • Versuche es mit mobilen Daten oder einer anderen Internetverbindung.
   • Stelle sicher, dass dein Browser aktuell ist.
   • Stelle sicher, dass der Browser nicht alle Cookies blockiert, denn einige Apps werden ohne Cookies möglicherweise nicht richtig angezeigt.
   • Du musst sicherstellen, dass du kein Virtual Private Network (VPN) verwendest oder eine Firewall aktiviert hast, die Shopify blockiert.

3. Wenn das Problem auf anderen Geräten, Browsern oder Internetverbindungen ebenfalls auftritt, ist das Problem kein lokales Problem und kann repliziert werden. Das Problem bei einem anderen Theme zu replizieren, ist der nächste Schritt beim Auffinden der Problemquelle. Besuche den Theme Store und lade eine neue Version des Themes hoch und teste, ob das Problem in der neuesten Version des Themes weiterhin vorhanden ist. Das Installieren eines anderen Themes, wie z. B. eines kostenlosen Shopify-Themes, ist ebenfalls eine bewährte Methode, da du ermitteln kannst, ob das Problem bei diesem bestimmten Theme oder dasselbe Problem bei allen Themes auftritt. Nach dem Testen anderer Themes sind die nächsten Schritte zu empfehlen, je nachdem, wie das Problem dargestellt wurde:

   • Wenn das Problem nur bei deinem aktuellen Theme und einer aktualisierten und nicht benutzerdefinierten Version des Theme auftritt, musst du möglicherweise Support für dein Theme erhalten.
   • Wenn dein Problem nur bei dem aktuellen Theme vorhanden ist, könnte es einen Theme-Code geben, der zu Problemen führt. Wenn du kürzlich deinen Theme-Code aktualisiert hat, kannst du ein Rollback auf eine ältere Version deines Theme-Codes ausführen. Wenn du den Code im Theme nicht verändert hast, solltest du deine Theme-Einstellungen überprüfen. Wenn beispielsweise die Schaltfläche Zum Warenkorb hinzufügen nicht angezeigt wird, überprüfe die Farben für Schaltflächen in deinen Theme-Einstellungen und vergewissere dich, dass sie unterschiedlich sind und einen Kontrast aufweisen.
   • Wenn das Problem bei allen Themes vorhanden ist, liegt das möglicherweise an deinen Einstellungen im Shopify-Adminbereich, an Apps oder anderen Problemen.

4. Das Problem könnte von einer App ausgehen. Wenn du kürzlich Apps installiert oder aktualisiert hast, die deine Storefront betreffen, solltest du die App möglicherweise vorübergehend deinstallieren. Wenn das Problem nach dem Deinstallieren der App nicht vorhanden ist, kannst du das Support-Team des App-Entwicklers kontaktieren, um weitere Hilfe zu erhalten, damit es in deiner Storefront korrekt angezeigt wird. Erfahre mehr über Erhalten von Hilfe zu deinen Apps. Wenn das Problem nach dem Deinstallieren der App noch vorhanden ist, ist die App nicht die Quelle des Problems.

Bilder werden nicht richtig angezeigt

Bilder werden möglicherweise anders angezeigt als du erwartest, was jedoch möglicherweise daran liegt, dass das Bild selbst nicht mit dem kompatibel ist, für das du das Bild in deinem Theme verwendet. Vergewissere dich, dass die Bildabmessungen in dem von dir verwendeten Bild korrekt sind. Sieh dir die folgende Liste mit häufigen Anzeigeproblemen an, die möglicherweise auftreten können, wenn ein inkompatibles Bild hochgeladen wird:

• Wenn dein Header auf dem Desktop breiter angezeigt wird und das Logobild auf mobilen Geräten kleiner angezeigt wird, als du es erwarten würdest, liegt dies möglicherweise an einem Whitespace in der Logo-Bilddatei. Bearbeite die Bilddatei, um sicherzustellen, dass sie um das Logo herum zugeschnitten ist und es keinen Whitespace gibt.
• Wenn dein Slideshow-Bild zugeschnitten wird, ist dies beabsichtigt, um sicherzustellen, dass die Bilder auf dem Mobilgerät genauso angezeigt werden wie auf dem Desktop. Da Inhalte auf einem mobilen Bildschirm viel kleiner angezeigt werden, können viele Details verloren gehen, wenn die Inhalte verkleinert werden. Stattdessen wird der Inhalt zugeschnitten, um sicherzustellen, dass die Details nicht verloren gehen. Ein Porträtbild, das höher als breit ist, kann auf dem Desktop auch erheblichen Platz verbrauchen. Aus diesem Grund haben Slideshow-Bilder eine maximale Höhe. Du kannst einen Fokuspunkt zu deinen Slideshow-Bildern hinzufügen, um sicherzustellen, dass der Fokuspunkt immer die Mitte des Slideshow-Bilds ist. Wenn das Hinzufügen eines Fokuspunkts nicht hilft, kannst du versuchen, ein Bild zu finden, das für alle Bildschirmgrößen funktioniert. Erfahre mehr über Best Practices für Slideshows.
• Wenn ein GIF-Bild nicht richtig angezeigt wird und mit dem Rich-Text-Editor, wie z. B. in der Produktbeschreibung oder in einem Blog-Beitrag, zu deiner Storefront hinzugefügt wurde, liegt das möglicherweise an der Bildgröße. Du kannst dies korrigieren, indem du im Rich-Text-Editor auf das GIF klickst und dann auf Bild bearbeiten klickst. Wähle im Dropdown-Menü Bildgröße und wähle die Option Original. Du kannst dann die Größe des GIF ändern, indem du die Ecken des Bildes nach innen ziehst, um es zu verkleinern, oder nach außen, um es zu vergrößern.
• Wenn deine Bilder in deiner Storefront von deinem Originalbild erheblich in der Farbe abweichen, sind deine Bilder möglicherweise nicht in den Standardfarben Rot Grün Blau (SRGB). Um diese Farbänderung zu beheben, speichere deine Datei in einer App für die Fotobearbeitung als sRGB. Häufige Begriffe dafür sind "Weboptimieren", "Bild für Web anpassen" oder "Für Web speichern". Erfahre mehr über Farbprofile.
• Wenn deine Produktbilder auf deinen Kollektionsseiten nicht ausgerichtet sind, musst du möglicherweise das Seitenverhältnis in den Produktbilddateien so anpassen, dass sie das gleiche Verhältnis von Höhe zu Breite haben, und dann das Produktbild erneut hochladen. Du kannst auch eine Bildbearbeitungs-App aus dem Shopify App Store verwenden.

Produkte oder Kollektionen werden nicht richtig angezeigt

Wenn deine Produkte in deiner Storefront fehlen, musst du möglicherweise den Status und deine Vertriebskanäle im Abschnitt Veröffentlichung deines Produkts in deinem Shopify-Adminbereich überprüfen. Vergewissere dich, dass der Produktstatus aktiv ist und dass das Produkt im Onlineshop verfügbar ist.

Wenn deine Kollektionen in deiner Storefront fehlen, musst du möglicherweise die Vertriebskanäle im Abschnitt Veröffentlichung der Kollektion in deinem Shopify-Adminbereich überprüfen. Vergewissere dich, dass die Kollektion im Onlineshop verfügbar ist. Eventuell solltest du auch sicherstellen, dass deine Kollektion zu deiner Navigation hinzugefügt wird.

Wenn deine Kollektionen angezeigt werden, aber Produkte fehlen, musst du möglicherweise alle Tag-Filter für die Kollektion in deinen Navigationseinstellungen überprüfen. Vergewissere dich, dass in der Filter-Sammlung mit Tags keine Tags enthalten sind, durch die Produkte möglicherweise nicht angezeigt werden.

Wenn deine Währung für Produkte oder in deinen Kollektionen nicht korrekt angezeigt wird, solltest du die Währungsanzeige im Abschnitt Shop-Standard unter Einstellungen > Allgemein überprüfen, um sicherzustellen, dass es keinen zusätzlichen Code gibt. Mehr Informationen über Formatieren, wie die Währung deinen Kunden angezeigt wird.

Wenn einige Produkte oder Kollektionen anders angezeigt werden als die anderen, musst du möglicherweise die Theme-Vorlage überprüfen, die den Produkten oder Kollektionen in deinem Shopify-Adminbereich zugewiesen ist.

Übersetzte Inhalte werden nicht richtig angezeigt

Wenn deine übersetzten Inhalte nicht richtig angezeigt werden oder in deiner Storefront fehlen, gibt es möglicherweise veraltete Übersetzungen oder fehlende Übersetzungen für die Inhalte. Der Inhalt kann auch in einer bestimmten Vorlage für einen Markt enthalten sein. Wenn du neue Inhalte in deiner Standardsprache hinzufügst, denke daran, die automatische Übersetzung erneut anzuwenden oder neue Übersetzungen manuell hinzuzufügen.

Übersetzte Inhalte können den folgenden Status aufweisen:

• Übersetzt: Für den Inhalt sind Übersetzungen verfügbar.
• Veraltet: Die Inhalte in der Standardsprache wurden aktualisiert, aber die Übersetzungen spiegeln diese Aktualisierungen nicht wider.
• Nicht übersetzt: Es gibt keine Übersetzungen für diesen Inhaltstyp.

Bei der Überprüfung deiner übersetzten Inhalte solltest du alle nicht übersetzten oder veralteten Inhalte aktualisieren. Deine übersetzten Inhalte sollten dann korrekt angezeigt werden.

Mehr Informationen über das Übersetzen und Lokalisieren deines Shops.

Aktualisierungen im Theme-Editor werden nicht in der Storefront angezeigt

Wenn deine Storefront und dein Theme-Editor nicht dieselben Informationen anzeigen, überprüfe die Theme-Vorlage, die du bearbeitest. Möglicherweise musst du Änderungen vornehmen, um deine Theme-Vorlagen zu aktualisieren, damit die richtigen Informationen angezeigt werden. Die Shop-Kontextualisierung ermöglicht es dir, verschiedene Storefronts für verschiedene Märkte zu erstellen und übersetzte Inhalte anzuzeigen. Möglicherweise arbeitest du bei der Aktualisierung versehentlich auf einem bestimmten Markt oder B2B. Suche den Inhalt mit dem Dropdown-Menü Context in deinem Theme-Editor, um sicherzustellen, dass er sich auf den richtigen Märkten befindet.

Mehr Informationen über die Kontextualisierung von Shops.

Rich-Text-Editor

Manchmal steht der HTML-Code, der in deinem Rich-Text-Editor hinzugefügt wird, in Konflikt mit deinem Theme-Code. Wenn das Problem auf einer einzelnen Seite vorhanden ist, z. B. auf einer Produktseite, einer Seite oder einem Blog-Beitrag, liegt das möglicherweise an zusätzlichem HTML. Dies kann manchmal durch Kopieren und Einfügen von Text von einer anderen Website hinzugefügt werden.

HTML-Code überprüfen

Du kannst den HTML-Code im Rich-Text-Editor überprüfen.

Schritte:

1. Navigiere zur Seite in deinem Adminbereich.
2. Klicke auf die Schaltfläche </> HTML-Schaltfläche anzeigen , um den HTML-Code zu überprüfen.
3. Suche nach HTML-Code, der zu Anzeigeproblemen führen kann, und entferne ihn.
4. Klicke auf Speichern.

Lösche die Formatierung

Du kannst einen Teil des Textes markieren und die HTML-Formatierung löschen.

Schritte:

1. Navigiere zur Seite in deinem Adminbereich.
2. Markiere den Text mit den Formatierungsfehlern.
3. Klicke auf die Schaltfläche 🚫.
4. Klicke auf Speichern.

Erfahre mehr über den Rich-Text-Editor.

Die Seite leitet zu einer nicht unterstützten URL weiter

Wenn deine Storefront einen Code enthält, der Benutzer zu URLs umleitet, die nicht mit deinem Shop verbunden sind, überprüfe, ob die Umleitung deaktiviert wurde, wenn du den Theme-Editor aufrufst.

Diese Art der Weiterleitung kann beispielsweise einer Storefront hinzugefügt werden, um Kunden je nach Standort an verschiedene Shopify-Shops weiterzuleiten. Diese Art von Weiterleitungscode kann entweder in deinem Theme oder in einer von dir installierten App vorhanden sein.

Um sicherzustellen, dass deine Weiterleitung keine Auswirkungen auf die Arbeit im Editor hat, verwende einen Verweis auf die Variable window.Shopify.designMode in JavaScript, um die Weiterleitung zu deaktivieren, wenn du den Theme-Editor aufrufst. Diese Variable wird auf true gesetzt, wenn deine Storefront im Editor geladen wird, und auf false, wenn dies nicht der Fall ist.

Code-Fehlermeldungen

Wenn in deinem Theme-Code ein Syntaxfehler auftritt, wird ein HTML error found oderTheme error Warnhinweis in deinem Theme-Editor angezeigt. Die Fehlermeldung zeigt die Liquid-Datei an, die den Fehler enthält.

Ein The theme you're looking for couldn't be found -Warnhinweis kann angezeigt werden, wenn es einen beschädigten HTML-Code gibt. Eine Seite kann aus vielen Gründen nicht im Theme-Editor geladen werden, wie z. B. die folgenden Gründe:

• Probleme mit der Netzwerkverbindung
• Ungültiger Liquid-Code in deinem Theme

Du kannst die Codeänderungen in deinem Theme-Code finden und den Code korrigieren oder die Datei auf den Stand vor der Code-Änderung zurücksetzen.

Schritte

1. Klicke auf die .liquid -Abschnittsdatei, die in der Fehlermeldung verlinkt ist, oder überprüfe die Dateien auf letzte Änderungen. Dadurch rufst du die Seite HTML/CSS bearbeiten auf. Die Datei wird im Code-Editor geöffnet.

2. Suche in der Datei nach dem Code und halte Ausschau nach ungültigem HTML- oder Liquid-Code. Der Code-Editor zeigt potenzielle Syntaxfehler in roter Farbe an. Zu den häufigen Problemen zählen unter anderem:

   • Überflüssige abschließende HTML-Tags, z. B. ein abschließendes Tag </div> ohne öffnendes Tag <div>
   • Überflüssige öffnende HTML-Tags, z. B. ein öffnendes Tag <div> ohne abschließendes Tag </div>
   • Falsch formatierte HTML-Tags, z. B. <div class="my-class" >
   • Falsch formatierter Liquid-Code
   • Fehlerhafter HTML-Code in einer enthaltenen Theme-Snippet-Datei

3. Nachdem du das Problem gefunden hast, korrigiere den Code in deiner Theme-Datei oder mache den Code rückgängig, indem du eine frühere Version in Letzte Änderungen auswählst.

4. Klicke auf Speichern.

5. Klicke auf Anpassen, um zum Theme-Editor zurückzukehren und zu bestätigen, dass die Fehlermeldung nicht mehr angezeigt wird.

6. Navigiere zu deiner Storefront, um sicherzustellen, dass sie wie erwartet angezeigt wird.