3D-логотип Shopify в заголовке с использованием не отображается, а меню не работает ⇐ Javascript

[Anonymous]

Я пытаюсь заменить 2D-логотип моего магазина Shopify на 3D-логотип, используя в моем header.liquid.
Вот что я хочу:

• 3D-логотип должен быть центрирован в заголовке.
• Кнопки Домой и Магазин должны отображаться и работать нормально.
• Все должно работать как на компьютере, так и на мобильных устройствах.

Что я пробовал:

• Добавлены скрипты и теги непосредственно в header.liquid.
• Обернул его в блок захвата для логотипа.
• Добавлено меню и захваты поиска.
• Попробовал разные JS-библиотеки и 3D-модели, размещенные на Shopify CDN.

Проблемы, с которыми я столкнулся:

• 3D-логотип не отображается вообще.
• Иногда меню исчезает или дублируется.
• Получаются ошибки Liquid:
  

  Код: Выделить всё

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

• Код: Выделить всё

  FileSaveError: Invalid JSON in tag 'schema'

[*]Консоль JavaScript показывает:

Код: Выделить всё

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

Что я рассмотрел:

• Модель может быть слишком большой.
• Структура заголовка моей темы может конфликтовать с кодом .
• Возможно, необходимо настроить тему или макет заголовка полностью.

В чем мне нужна помощь:

• Рабочий полный пример header.liquid, который интегрирует 3D-логотип с помощью
• обеспечивает кнопки меню (Домашняя страница/Магазин) работает
• Работает для компьютерных компьютеров и мобильных устройств, по центру заголовка

Ссылки / Текущий фрагмент 3D-кода:

Код: Выделить всё

Я попробовал несколько вариантов, но, похоже, ни один из них не отображает 3D-логотип и не поддерживает функциональность меню.
Будем очень признательны за любые предложения или рабочие примеры!>

Подробнее здесь: https://stackoverflow.com/questions/798 ... enu-broken