Fehlerbehebung für dein Onlineshop-Theme

Bilder werden möglicherweise anders angezeigt als erwartet. Dies kann jedoch daran liegen, dass das Bild selbst nicht mit dem Verwendungszweck in deinem Theme kompatibel ist. Überprüfe, ob die Bildabmessungen im verwendeten Bild korrekt sind. Sieh dir die folgende Liste häufiger Anzeigeprobleme an, die beim Hochladen eines inkompatiblen Bildes auftreten können:

• Wenn dein Header größer und dein Logo-Bild kleiner angezeigt wird als erwartet, kann dies an Leerraum in der Logo-Bilddatei liegen. Leerraum in der Logo-Bilddatei kann dazu führen, dass das Logo kleiner und dein Header aufgrund des Leerraums größer angezeigt wird. Bearbeite die Bilddatei, um sicherzustellen, dass sie um das Logo herum zugeschnitten ist und keinen Leerraum enthält.
• Wenn dein Slideshow-Bild zugeschnitten wird, ist dies beabsichtigt, um sicherzustellen, dass die Bilder auf Mobilgeräten und auf dem Desktop gleich angezeigt werden. Da Inhalte auf einem mobilen Bildschirm viel kleiner angezeigt werden, können durch die Verkleinerung der Inhalte viele Details verloren gehen. Stattdessen werden die Inhalte zugeschnitten, um sicherzustellen, dass die Details nicht verloren gehen. Ein Bild im Hochformat, das höher als breit ist, kann auch auf dem Desktop viel Platz einnehmen. Aus diesem Grund haben Slideshow-Bilder eine maximale Höhe. Du kannst einen Fokuspunkt hinzufügen zu deinen Slideshow-Bildern hinzufügen, um sicherzustellen, dass der Fokuspunkt immer in der Mitte des Slideshow-Bildes liegt.

  Option für adaptive Höhe: Viele Shopify-Themes enthalten eine Einstellung für die adaptive Höhe für Slideshows, die die Höhe der Slideshow an das erste Bild anpasst, wodurch das Zuschneiden bei verschiedenen Bildschirmgrößen reduziert wird. Diese Funktion ist in allen aktuell unterstützten Themes verfügbar, die von Shoify entwickelt wurden.

• Wenn ein GIF-Bild nicht korrekt angezeigt wird und es mit dem Rich-Text-Editor zu deiner Storefront hinzugefügt wurde, z. B. in der Produktbeschreibung oder in einem Blog-Beitrag, kann dies an der Bildgröße liegen. Du kannst dies korrigieren, indem du im Rich-Text-Editor auf das GIF und dann auf Bild bearbeiten klickst. Wähle im Dropdown-Menü Bildgröße die Option Original aus. Du kannst die Größe des GIFs dann ändern, indem du auf die Ecken des Bildes klickst und sie nach innen ziehst, um es zu verkleinern, oder nach außen, um es zu vergrößern.
• Wenn deine Bilder in deiner Storefront eine erhebliche Farbveränderung gegenüber dem Originalbild aufweisen, liegen deine Bilder möglicherweise nicht in den Standardfarben Rot, Grün, Blau (sRBG) vor. Um diese Farbveränderung zu beheben, speichere deine Datei in einer Fotobearbeitungsanwendung als sRBG. Gängige Begriffe dafür sind „Für Web optimieren“, „Bild für Web anpassen“ oder „Für Web speichern“. Mehr Informationen über Farbprofile.
• Wenn deine Produktbilder auf deinen Kollektionsseiten nicht ausgerichtet sind, musst du möglicherweise das Seitenverhältnis in den Produktbilddateien anpassen, sodass sie das gleiche Verhältnis von Höhe zu Breite haben, und das Produktbild dann erneut hochladen. Du kannst auch eine Bildbearbeitungs-App aus dem Shopify App Store verwenden.

Überprüfe die folgenden Punkte für dein spezifisches Problem und die Schritte zur Fehlerbehebung:

• Fehlende Produkte: Wenn deine Produkte in deiner Storefront fehlen, musst du möglicherweise den Status und deine Vertriebskanäle im Abschnitt Veröffentlichung deines Produkts im Shopify-Adminbereich überprüfen. Stelle sicher, dass der Produktstatus Aktiv ist und das Produkt für den Onlineshop verfügbar ist.
• Fehlende Kollektionen: 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. Stelle sicher, dass die Kollektion für den Onlineshop verfügbar ist und dass sie zu deinen Menüs hinzugefügt wurde.
• Kollektionen werden angezeigt, aber Produkte fehlen: Wenn deine Kollektionen angezeigt werden, aber Produkte fehlen, musst du möglicherweise die Tag-Filter für die Kollektion in den Einstellungen deiner Menüs überprüfen. Stelle sicher, dass im Feld Kollektion nach Tags filtern keine Tags vorhanden sind, die dazu führen könnten, dass Produkte nicht angezeigt werden.
• Währung nicht korrekt: Wenn deine Währung für Produkte oder in deinen Kollektionen nicht korrekt angezeigt wird, solltest du die Währungsanzeige im Abschnitt Shop-Standards unter Einstellungen > Allgemein überprüfen, um sicherzustellen, dass kein zusätzlicher Code vorhanden ist. Mehr Informationen über die Formatierung der Währungsanzeige für deine Kundschaft.
• Einige Produkte werden anders angezeigt: Wenn einige Produkte oder Kollektionen anders angezeigt werden als die anderen, überprüfe die Theme-Vorlage, die den Produkten oder Kollektionen in deinem Shopify-Adminbereich zugewiesen ist.
• Produkt- oder Kollektionsvorlagen können nicht bearbeitet werden: Wenn die Standard-Produkt- oder Kollektionsvorlagen im Theme-Editor ausgegraut und nicht auswählbar sind, musst du mindestens ein Produkt oder eine Kollektion für den Vertriebskanal Onlineshop verfügbar machen. Du kannst diese Standardvorlagen nicht bearbeiten, ohne dass Produkte oder Kollektionen verfügbar sind, um eine Vorschau der Änderungen anzuzeigen. Weitere Informationen erhältst du unter Ändern der Verfügbarkeit einer Kollektion und Festlegen der Produktverfügbarkeit in deinen Vertriebskanälen.

Wenn deine übersetzten Inhalte nicht richtig angezeigt werden oder in deiner Storefront fehlen, kann es sein, dass die Übersetzungen für die Inhalte veraltet sind oder fehlen. Die Inhalte können sich auch in einer bestimmten Vorlage für einen Markt befinden. Immer wenn du neue Inhalte in deiner Standardsprache hinzufügst, denke daran, die automatische Übersetzung erneut auszuführen oder neue Übersetzungen manuell hinzuzufügen.

Die folgenden Status können für übersetzte Inhalte gelten:

• Übersetzt: Für den Inhalt sind Übersetzungen verfügbar.
• Veraltet: Der Inhalt in der Standardsprache wurde aktualisiert, aber die Übersetzungen spiegeln keine Aktualisierungen wider.
• Nicht übersetzt: Für diesen Inhaltstyp sind keine Übersetzungen vorhanden.

Wenn du deine übersetzten Inhalte überprüfst, aktualisiere alle nicht übersetzten oder veralteten Inhalte. Deine übersetzten Inhalte sollten dann korrekt angezeigt werden.

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

Wenn in deiner Storefront und im Theme-Editor unterschiedliche Informationen angezeigt werden, solltest du die Theme-Vorlage überprüfen, die du gerade bearbeitest. Es kann sein, dass du deine Theme-Vorlagen bearbeiten musst, damit die korrekten Informationen angezeigt werden.

Die Überschreibung von Markteinstellungen ermöglicht es dir, verschiedene Storefronts für verschiedene Märkte zu erstellen und übersetzte Inhalte anzuzeigen. Möglicherweise hast du bei deinen Aktualisierungen versehentlich in einem bestimmten Markt oder B2B gearbeitet. Suche den Inhalt über das Markt-Dropdown-Menü in deinem Theme-Editor, um sicherzustellen, dass er sich in den richtigen Märkten befindet.

Mehr Informationen über die Überschreibung von Markteinstellungen.

Alle im Shopify Theme Store verfügbaren Themes sind responsive Themes, d. h. das Theme passt sich an die Bildschirmgröße an. Im Theme-Editor kannst du während der Bearbeitung des Themes die Ansicht der Bildschirmgröße wechseln, um zu überprüfen, ob deine Seiten und Bilder korrekt angezeigt werden. Mehr Informationen über das Anzeigen verschiedener Bildschirmgrößen im Theme-Editor.

Viele der Abschnitte und Blöcke haben Einstellungen für Mobilgeräte, die du anpassen kannst. Beispielsweise kannst du im Abschnitt Ähnliche Produkte die Anzahl der Spalten auf Mobilgeräten festlegen. Du kannst die Abschnittseinstellungen für Mobilgeräte für jede Vorlage überprüfen, um Anzeigeprobleme auf den Bildschirmgrößen von Mobilgeräten zu beheben.

Einige Theme-Funktionen werden auf Mobilgeräten möglicherweise anders angezeigt als auf dem Desktop, um die Zugänglichkeit des Themes auf allen Bildschirmgrößen zu gewährleisten. Zum Beispiel kann deine Slideshow auf einem Desktop-Bildschirm eine Textüberlagerung aufweisen, bei der der Text über dem Bild angezeigt wird, oft mit einer Deckkraft der Bildfarbe oder einem Textschatten. Auf mobilen Bildschirmen hingegen kann der Text unter der Slideshow erscheinen. Dies ist eine beabsichtigte Funktion zur Verbesserung der Zugänglichkeit, die sicherstellt, dass der Text auf jeder Bildschirmgröße lesbar bleibt. Wäre der Text stattdessen eine Überlagerung, würde er auf Mobilgeräten sehr klein angezeigt und wäre somit schwer zu lesen.

Wenn dein Abschnitt für die vorgestellte Kollektion oder deine Kollektionsseiten bei der Anzeige deiner Storefront auf Mobilgeräten uneinheitliche Größen aufweisen oder nicht richtig ausgerichtet sind, liegt das möglicherweise an uneinheitlichen Seitenverhältnissen. Bildraster, wie z. B. Produktbilder, die in einer Kollektion oder einer vorgestellten Kollektion angezeigt werden, sind so konzipiert, dass sie responsiv auf die Bildschirmgröße reagieren. Wenn deine Bilder im Bildraster uneinheitliche Seitenverhältnisse haben, werden sie je nach Bildschirmgröße möglicherweise unterschiedlich angezeigt. Quadratische Produktbilder mit den Maßen 2048 x 2048 px funktionieren in Produkt-Rastern in der Regel am besten. Aktualisiere deine Bilder auf ein einheitliches Seitenverhältnis, um sie für alle Bildschirmgrößen zu optimieren. Mehr Informationen zum Bildseitenverhältnis.

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

Den HTML-Code überprüfen

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

Schritte:

1. Navigiere in deinem Adminbereich zu der Seite.
2. Klicke auf die Schaltfläche HTML anzeigen, um den HTML-Code zu überprüfen.
3. Suche jeglichen HTML-Code, der Anzeigeprobleme verursachen könnte, und entferne ihn.
4. Klicke auf Speichern.

Die Formatierung löschen

Du kannst einen Teil des Textes markieren und die HTML-Formatierung entfernen.

Schritte:

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

Mehr Informationen zum Rich-Text-Editor.

Wenn deine Storefront Code enthält, der Nutzende zu URLs umleitet, die nicht mit deinem Shop verbunden sind, stelle sicher, dass die Weiterleitung deaktiviert ist, wenn du den Theme-Editor besuchst.

Diese Art von Weiterleitung kann beispielsweise zu einer Storefront hinzugefügt werden, um Kund:innen je nach Standort zu verschiedenen Shopify-Shops zu leiten. Diese Art von Weiterleitungscode kann entweder in deinem Theme oder in einer von dir installierten App vorhanden sein.

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

Wenn du ausklappbare Blöcke oder andere Theme-Blöcke hast, die auf allen Produktseiten den gleichen Inhalt anzeigen, musst du dynamische Quellen mit Metafeldern einrichten. Dies geschieht häufig, wenn Händler:innen produktspezifische Informationen wie Zutaten oder Pflegehinweise zu einem Produkt hinzufügen, diese aber bei allen Produkten angezeigt werden.

Ausklappbare Blöcke zeigen auf allen Produkten den gleichen Text an

Wenn du Inhalte direkt zu einem einklappbaren Block in deinem Theme-Editor hinzufügst, werden diese Inhalte auf allen Produktseiten angezeigt. Um produktspezifische Inhalte anzuzeigen, musst du dynamische Quellen mit Metafeldern verwenden:

1. Gehe in deinem Shopify-Adminbereich zu Einstellungen > Metafelder > Produkte.
2. Klicke auf Definition hinzufügen.
3. Gib einen Namen für dein Metafeld ein und klicke dann auf Inhaltstyp auswählen.
4. Wähle Text und Mehrzeiliger Text aus.
5. Klicke auf Speichern.
6. Gehe in deinem Adminbereich zu einer Produktseite und scrolle zum Metafelder-Abschnitt am Ende der Seite.
7. Füge deinen produktspezifischen Inhalt zu dem von dir erstellten Metafeld hinzu.
8. Gehe in deinem Theme-Editor zur Produktvorlage und suche deinen Abschnitt Ausklappbare Zeile.
9. Klicke in der Einstellung Zeileninhalt auf die Schaltfläche .
10. Wähle dein Metafeld aus den verfügbaren Optionen aus.
11. Speichere deine Änderungen.

Jetzt zeigt jedes Produkt seinen eigenen Inhalt an, wenn das Metafeld ausgefüllt ist. Wenn das Metafeld für dieses Produkt leer ist, wird kein Inhalt angezeigt.

Mehr Informationen über das Anzeigen von Metafeldern in deinem Onlineshop und das Verwenden von Metafeldern und Metaobjekten mit dynamischen Quellen.

Wenn dein Theme-Code einen Syntaxfehler enthält, wird in deinem Theme-Editor eine Warnmeldung HTML-Fehler gefunden oder Theme-Fehler angezeigt. Die Fehlermeldung zeigt die Liquid-Datei an, die den Fehler enthält.

Die Warnmeldung Das gesuchte Theme konnte nicht gefunden werden kann angezeigt werden, wenn fehlerhaftes HTML vorliegt. Eine Seite kann im Theme-Editor aus vielen Gründen nicht geladen werden, z. B. aus den folgenden:

• Netzwerkverbindungsprobleme
• ungültiger Liquid-Code in deinem Theme

Du kannst die Code-Änderungen in deinem Theme-Code ausfindig machen und den Code korrigieren. Wenn du die betroffene vorhandene Datei identifizieren kannst, kannst du sie in der Ansicht Chronik des Code-Editors auf eine verfügbare vorherige Version wiederherstellen.

Schritte:

1. Klicke auf die Abschnittsdatei .liquid, die in der Fehlermeldung verlinkt ist, oder überprüfe die Dateien auf kürzliche Änderungen. Dadurch gelangst du zur Seite HTML/Cascading Style Sheets (CSS) bearbeiten und die Datei wird im Code-Editor geöffnet.
2. Durchsuche den Code in der Datei und versuche, ungültiges HTML oder Liquid zu finden. Der Code-Editor zeigt potenzielle Syntaxfehler in Rot an. Zu den häufigsten Problemen gehören:
   • Zusätzliche schließende HTML-Tags, zum Beispiel ein schließendes `</div>` ohne ein öffnendes `<div>`
   • Zusätzliche nicht geschlossene HTML-Tags, zum Beispiel ein öffnendes `<div>` ohne ein schließendes `</div>`
   • Fehlerhafte HTML-Tags, zum Beispiel `<div class="my-class"` ohne ein `>`
   • Fehlerhafter Liquid-Code
   • Defektes HTML in einer eingebundenen Theme-Snippet-Datei
3. Nachdem du das Problem gefunden hast, korrigiere den Code in deiner Theme-Datei. Wenn du in der Ansicht Chronik des Code-Editors eine vorherige Version sowie Inhalt wiederherstellen auswählst, wird der gesamte Dateiinhalt ersetzt. Kopiere den aktuellen Dateiinhalt zunächst an einen sicheren Ort, falls du Änderungen behalten möchtest.
4. Klicke auf Speichern.
5. Klicke auf Theme bearbeiten, um zum Theme-Editor zurückzukehren, und bestätige, dass die Fehlermeldung nicht mehr angezeigt wird.
6. Navigiere zu deiner Storefront, um zu überprüfen, dass sie wie erwartet angezeigt wird.

Fehler: „Maximale Anzahl an eindeutigen Handles überschritten“

Wenn auf deiner Startseite eine Liquid-Fehlermeldung wie „Exceeded maximum number of unique handles for all_products“ angezeigt wird, bedeutet dies normalerweise, dass du zu viele Abschnitte für vorgestellte Produkte zu deiner Startseite hinzugefügt hast (normalerweise mehr als 20 Abschnitte in den meisten Themes).

So löst du dieses Problem:

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche dein aktuelles Theme und klicke auf Theme bearbeiten.
3. Navigiere zu deiner Startseite.
4. Entferne einige Abschnitte für vorgestellte Produkte, um die Limits des Themes einzuhalten.
5. Ziehe in Betracht, stattdessen Abschnitte für vorgestellte Kollektionen zu verwenden. Diese können mehrere Produkte effizienter anzeigen und die Leistung deines Shops verbessern.

Zahlungssymbole sind in der Regel standardmäßig in der Fußzeile der meisten Themes enthalten, um Kund:innen zu zeigen, welche Zahlungsmethoden du akzeptierst. Wenn in der Fußzeile deines Themes keine Zahlungssymbole angezeigt werden, kannst du Folgendes überprüfen:

1. Navigiere in deinem Theme-Editor zum Abschnitt Fußzeile und überprüfe, ob die Einstellung Zahlungssymbole anzeigen aktiviert ist.
2. Gehe in deinem Shopify-Adminbereich zu Einstellungen > Zahlungen und überprüfe, ob mindestens eine Zahlungsmethode aktiv ist. Bei einigen Zahlungsmethoden muss möglicherweise die Kontoeinrichtung abgeschlossen sein, bevor ihre Symbole angezeigt werden.
3. Wenn du ein externes Zahlungs-Gateway verwendest, werden die Zahlungssymbole aufgrund von Plattformbeschränkungen möglicherweise nicht angezeigt.

Wenn du diese Einstellungen überprüft hast und die Zahlungssymbole immer noch nicht angezeigt werden, musst du möglicherweise Support für dein Theme erhalten.