Что добавляет весь этот дополнительный код в исходный код сайта на Shopify?

Вопрос или проблема

{{ shop.metafields.loox.global_html_head }}
  </head>

  <style class="loop-style">
    {% render 'loop-widget.css' %}
  </style>

<script>var loox_global_hash="HASH_VALUE";</script><script>var visitor_level_referral = {"active":true,"rtl":false,"position":"right","button_text":"Получите €20","button_bg_color":"323620","button_text_color":"ffffff","display_on_home_page":true,"display_on_product_page":true,"display_on_cart_page":true,"display_on_other_pages":true,"hide_on_mobile":false,"sidebar_visible":true,"orientation":"default"};
</script><style>.loox-reviews-default { max-width: 1200px; margin: 0 auto; }.loox-rating .loox-icon { color:#f5c20c; }
:root { --lxs-rating-icon-color: #f5c20c; }</style>

// Много JavaScript-кода

<style class="loop-style">
    .loop-hidden {
  display: none !important;
}
... CSS для loop-style

{{ shop.metafields.loox.global_html_head }}

<script>var loox_global_hash="HASH_VALUE";</script><script>var visitor_level_referral = {"active":true,"rtl":false,"position":"right","button_text":"Получите €20","button_bg_color":"323620","button_text_color":"ffffff","display_on_home_page":true,"display_on_product_page":true,"display_on_cart_page":true,"display_on_other_pages":true,"hide_on_mobile":false,"sidebar_visible":true,"orientation":"default"};
</script><style>.loox-reviews-default { max-width: 1200px; margin: 0 auto; }.loox-rating .loox-icon { color:#f5c20c; }
:root { --lxs-rating-icon-color: #f5c20c; }</style>

<script id="web-pixels-manager-setup">... много кода
<script class="analytics">... много кода
<script class="boomerang">... много кода
<script
  defer
  src="https://floryamor.com/cdn/shopifycloud/perf-kit/shopify-perf-kit-1.0.0.min.js"
  data-application="storefront-renderer"
  data-shop-id="SHOP_ID"
  data-render-region="gcp-europe-west3"
  data-page-type="index"
  data-theme-instance-id="INSTANCE_ID"
  data-monorail-region="shop_domain"
  data-resource-timing-sampling-rate="10"
></script>
</head>

Ответ или решение

Чтобы разобраться с тем, откуда появляется весь этот дополнительный код в исходном коде вашего шаблона Shopify, сначала стоит понимать, что большинство из этих скриптов и стилей добавляются через приложения, установленные в магазине. Приложения Shopify могут автоматически внедрять свои собственные CSS и JavaScript коды в файл theme.liquid и других частях вашего сайта.

Шаги для выявления источников кода:

1. Проверьте установленные приложения:

   • Перейдите в интерфейс администратора Shopify и откройте раздел "Приложения". Просмотрите все установленные приложения и ознакомьтесь с их описаниями. Это поможет вам понять, какие из них могут добавлять код.
   • Некоторые популярные приложения, такие как Loox (для отзывов) и различные аналитические инструменты, могут добавлять свои скрипты.

2. Изучите документацию:

   • Ознакомьтесь с документацией и настройками установленных приложений. Некоторые приложения имеют опции для отключения или настройки поведения кода, который они добавляют.

3. Используйте инструменты разработчика:

   • Откройте инструменты разработчика в браузере (обычно нажав F12). На вкладке "Сеть" (Network) вы можете увидеть, какие скрипты загружаются на вашей странице, и откуда они поступают. Это может дать подсказки о том, откуда берется код.
   • Также проверьте вкладку "Элементы" (Elements), чтобы увидеть, какие стиля и скрипты подключены к HTML-разметке.

4. Просмотрите код шаблона:

   • Проверьте не только theme.liquid, но и все подключенные снэппеты и секции. В некоторых случаях код может добавляться через другие файлы, такие как каскадные таблицы стилей (CSS) или другие части шаблона.
   • Откройте раздел "Темы" → "Изменить код" и просмотрите файлы в папках sections и snippets.

5. Консоль для поиска:

   • Используйте функцию поиска в редакторе кода Shopify (обычно Ctrl + F) для поиска определенных скриптов по их именам, таким как ‘loox’ или ‘analytics’. Это может помочь вам быстро найти упоминания о них в вашем коде.

6. Тестируйте отключение приложений:

   • Если вы подозреваете, что конкретное приложение добавляет лишний код, временно отключите его и посмотрите, изменится ли исходный код страницы. Это может подтвердить, что приложение является источником нереализованного кода.

Заключение

После того как вы проделаете все эти шаги, у вас будет более полное понимание того, откуда берется этот дополнительный код. Как правило, более сложные сайты могут иметь множество скриптов, что может повлиять на производительность. Если у вас возникли трудности с идентификацией или удалением определенных скриптов, рассмотрите возможность обращения к разработчикам приложений или к специалисту по Shopify для дальнейшей помощи.