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, deine Menüs 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 größer und dein Logo kleiner als erwartet angezeigt wird, kann dies an Whitespace in der Logografikdatei liegen. Durch Whitespace in der Logografikdatei wird das Logo möglicherweise kleiner und der Header größer angezeigt. Bearbeite die Grafikdatei, 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 deinen Menüs hinzugefügt wird.

Wenn deine Kollektionen angezeigt werden, aber Produkte fehlen, musst du möglicherweise alle Tag-Filter für die Kollektion in deinen Menüs ü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.

Theme-Unterschiede zwischen der Mobil- und der Desktop-Ansicht

Alle im Shopify Theme Store angebotenen Themes sind responsive Themes. Das heißt, dass sich das Theme an die jeweilige Bildschirmgröße anpasst. Im Theme-Editor kannst du die Bildschirmgrößenanzeige bei der Bearbeitung von Themes ändern, um sicherzugehen, dass deine Seiten und Bilder korrekt angezeigt werden. Mehr Informationen zur Anzeige unterschiedlicher Bildschirmgrößen im Theme-Editor.

Viele Abschnitte und Blöcke verfügen über mobile Einstellungen, die du anpassen kannst. So kannst du z. B. im Abschnitt Ähnliche Produkte die Anzahl der Spalten auf mobilem Gerät festlegen. Du kannst die Abschnittseinstellungen für mobile Geräte für jeden Seitentyp anpassen, um etwaige Anzeigeprobleme bei mobilen Bildschirmgrößen zu beheben.

Manche Theme-Features werden auf mobilen Geräten möglicherweise anders angezeigt als auf dem Desktop. Damit wird sichergestellt, dass das Theme bei allen Bildschirmgrößen zugänglich ist. So kann z. B. eine Slideshow in der Desktop-Bildschirmgröße eine Textüberlagerung aufweisen, d. h. der Text wird auf der Grafik angezeigt, häufig mit Farbopazität oder Textschatten. Bei mobilen Bildschirmgrößen wird der Text dagegen möglicherweise unter der Slideshow angezeigt. Hierbei handelt es sich um eine beabsichtigte Funktion für die Barrierefreiheit, die dafür sorgt, dass der Text bei jeder Bildschirmgröße lesbar ist. Würde der Text stattdessen auch in der mobilen Ansicht als Überlagerung angezeigt, wäre er sehr klein und dementsprechend schwer zu lesen.

Wenn die Größen des Abschnitts „Vorgestellte Kollektion“ oder der Kollektionsseiten nicht einheitlich oder nicht richtig ausgerichtet sind, wenn du die Storefront auf einem mobilen Gerät anzeigst, kann das an inkonsistenten Seitenverhältnissen liegen. Grafik-Grids wie Produktbilder, die in einer Kollektion oder vorgestellten Kollektion angezeigt werden, sind responsiv. Wenn deine Bilder im Grafik-Grid inkonsistente Seitenverhältnisse aufweisen, werden sie je nach Bildschirmgröße möglicherweise unterschiedlich angezeigt. Quadratische Produktbilder mit den Maßen 2048 x 2048 px sehen in Produkt-Grids normalerweise am besten aus. Aktualisiere deine Bilder so, dass sie ein einheitliches Seitenverhältnis besitzen, damit sie bei allen Bildschirmgrößen optimal angezeigt werden. Mehr Informationen zum Bildseitenverhältnis.

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.