Добавить пользовательский скрипт в Shopify Liquid Section

Question

Я работаю над OutdoorProducts.Com, и нам предоставлен специальный виджет для видеоплеера.

<div id="carousel-home"></div>
<script>
(function(d, s) {
__TVPage__ = window.__TVPage__ || {};
__TVPage__.config = __TVPage__.config || {};
__TVPage__.config["carousel-home"] = {
loginid: "1759226",
channel: {"id":"179996403"},
targetEl : "carousel-home",
api_base_url: "//api.tvpage.com/v1"
};

window.addEventListener("load", function() {
var js = d.createElement(s),
fjs = d.getElementsByTagName(s)[0];
js.src = '//widgets-outdoorproducts-com.netlify.com/tvpwidget/carousel- 
home/index.js';
fjs.parentNode.insertBefore(js, fjs);
}, false);
}(document, 'script'));
</script>

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

Наша тема shopify имеет раздел, который можно использовать для «ПОЛЬЗОВАТЕЛЬСКОГО HTML», но не будет отображать виджет, если я добавлю туда этот код.

Я выяснил, как создать свой собственный «раздел» для редактора тем, используя копию раздела «Пользовательский контент»

{%- if section.settings.hidden_section -%}{%- capture check_admin -%}{{ content_for_header  }}{%- endcapture -%}<style> #shopify-section-{{ section.id }} { {%- if check_admin contains 'design_mode' -%}opacity: .5;filter: alpha(opacity=50){%- else -%}display: none !important{%- endif -%}}</style>{%- endif -%}
{%- if section.settings.section_margin_top != blank or section.settings.section_margin_bottom != blank or section.settings.section_border != blank -%}
{%- assign s_margin_top = section.settings.section_margin_top | remove: ' ' | join: ' ' -%}
{%- assign s_margin_bottom = section.settings.section_margin_bottom | remove: ' ' | join: ' ' -%}
{%- assign s_border = section.settings.section_border | remove: ' ' | split: '-' | join: ' ' -%}
{%- endif -%}
{%- capture style_block_section -%}
   {%- if section.settings.section_margin_top != blank or section.settings.section_margin_bottom != blank or section.settings.section_padding_top != blank or section.settings.section_padding_right != blank or section.settings.section_padding_left != blank or section.settings.section_padding_bottom != blank or section.settings.section_bg_color != blank or section.settings.section_bg_image != blank or section.settings.section_border != blank -%}
   <style type="text/css">.gl_custom_{{section.id}}{ {%- if section.settings.section_margin_top != blank -%} margin-top: {{s_margin_top}} !important;{%- endif -%}{%- if section.settings.section_margin_bottom != blank -%} margin-bottom: {{s_margin_bottom}} !important;{%- endif -%}{%- if section.settings.section_padding_top != blank -%}padding-top: {{section.settings.section_padding_top}} !important;{%- endif-%}{%- if section.settings.section_padding_right != blank -%}padding-right: {{section.settings.section_padding_right}} !important;{%- endif-%}{%- if section.settings.section_padding_bottom != blank -%}padding-bottom: {{section.settings.section_padding_bottom}} !important;{%- endif-%}{%- if section.settings.section_padding_left != blank -%}padding-left: {{section.settings.section_padding_left}} !important; {%- endif -%}{%- if section.settings.section_bg_color != blank -%}background-color: {{ section.settings.section_bg_color }} !important;{%- endif -%}{%- if section.settings.section_bg_image != blank -%}{%- assign image = section.settings.section_bg_image -%}{%- assign image_size = image.width | append:'x' -%} background-image: url({%-include 'gl_image_format',src: image , size: image_size -%}) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important;{%- endif -%}{%- if section.settings.section_border != blank and section.settings.section_border_color != blank -%}border-width: {{ s_border }} !important; border-color: {{section.settings.section_border_color}} !important; border-style: {{section.settings.section_border_style}} !important{%- endif -%} }</style>
   {%- endif -%}
{%- endcapture -%}
{{style_block_section}}
<div id="carousel-home"></div>
{%- schema -%}
  {
    "name": "TvPage",
    "class": "index-section gl_custom_html_home",
    "settings": [
      {
         "type": "html",
         "id": "code",
         "label": "HTML",
         "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      },
    {
        "type": "header",
        "content": "== Design Options"
      },
      {
        "type": "text",
        "id": "section_margin_top",
        "label": "Margin top",
        "info": "60px"
      },
      {
        "type": "text",
        "id": "section_margin_bottom",
        "label": "Margin bottom",
        "info": "60px"
      },
      {
        "type": "text",
        "id": "section_padding_top",
        "label": "Padding top",
        "info": "60px"
      },
{
        "type": "text",
        "id": "section_padding_right",
        "label": "Padding right",
        "info": "60px"
      },
{
        "type": "text",
        "id": "section_padding_bottom",
        "label": "Padding bottom",
        "info": "60px"
      },
{
        "type": "text",
        "id": "section_padding_left",
        "label": "Padding left",
        "info": "60px"
      },
      {
        "type": "header",
        "content": "== Basel Extras"
      },
      {
        "type": "checkbox",
        "id": "hidden_section",
        "label": "Disable Section?",
        "info": "If checked the section won't be visible on the public side of your website. You can switch it back any time.",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "TvPage",
        "category": "Advanced layout"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
<script>
(function(d, s) {
  __TVPage__ = window.__TVPage__ || {};
  __TVPage__.config = __TVPage__.config || {};
  __TVPage__.config["carousel-home"] = {
    loginid: "1759226",
    channel: {"id":"179996403"},
    targetEl : "carousel-home",
    api_base_url: "//api.tvpage.com/v1",
  };

  window.addEventListener("load", function() {
    var js = d.createElement(s),
    fjs = d.getElementsByTagName(s)[0];
    js.src = '//widgets-outdoorproducts-com.netlify.com/tvpwidget/carousel-home/index.js';
    fjs.parentNode.insertBefore(js, fjs);
  }, false);
}(document, 'script'));
</script>
{% endjavascript %}

но я не могу заставить виджет появиться. Похоже, мне нужно было бы добавить его между тегами "SCHEMA", но если я это сделаю, то получу это сообщение "Ошибка: неверный JSON в теге" схема ""

Есть ли способ сделать это?