Das Shopify 3D-Logo im Header mit wird nicht angezeigt und das Menü ist defekt ⇐ HTML

[Anonymous]

Ich versuche, das 2D-Logo meines Shopify-Shops durch ein 3D-Logo zu ersetzen, indem ich in meiner header.liquid verwende.
Das möchte ich:

• Das 3D-Logo sollte zentriert im Header sein.
• Das Die Schaltflächen Home und Shop sollten normal angezeigt und funktionieren.
• Alles sollte sowohl auf dem Desktop als auch auf Mobilgeräten funktionieren.

Was ich versucht habe:

• -Skripte und -Tags direkt hinzugefügt header.liquid.
• In einen Capture-Block für das Logo eingepackt.
• Menü- und Such-Captures hinzugefügt.
• Verschiedene JS-Bibliotheken und 3D-Modelle ausprobiert, die auf Shopify CDN gehostet werden.

Probleme, mit denen ich konfrontiert bin:

• Das 3D-Logo wird überhaupt nicht angezeigt.
• Manchmal verschwindet das Menü oder dupliziert sich.
• Liquid-Fehler werden angezeigt:
  

  Code: Select all

  FileSaveError: Liquid syntax error (line XX): 'capture' tag was never closed

• Code: Select all

  FileSaveError: Invalid JSON in tag 'schema'

[*]JavaScript-Konsole zeigt:

Code: Select all

theme.js:2893 Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll')

Dinge, die ich berücksichtigt habe:

• Das Modell ist möglicherweise zu groß.
• Die Header-Struktur meines Themes könnte mit dem -Code in Konflikt geraten.
• Vielleicht muss das Theme angepasst werden oder das gesamte Header-Layout.

Wobei ich Hilfe brauche:

• Ein funktionierendes vollständiges header.liquid-Beispiel, das ein 3D-Logo mit
• Sorgt für Menüschaltflächen (Home/Shop) work
• Funktioniert für Desktop und Mobilgeräte, zentriert in der Kopfzeile

Referenzen / Aktuelles 3D-Code-Snippet:

Code: Select all

Ich habe mehrere Varianten ausprobiert, aber nichts scheint das 3D-Logo zu rendern und das Menü funktionsfähig zu halten.
Für Vorschläge oder Arbeitsbeispiele wäre ich sehr dankbar!