Ошибка консоли с новыми ShopifyOptionSelectors

Question

Я пытаюсь добавить код javascript, который позволяет мне иметь несколько вариантов продукта, следуя этому руководству по магазину .

У меня есть нужный файл в заголовке моей theme.liquid:

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

В моем файле product.liquid есть следующий код:

      <form action="/cart/add" method="post">
        <div id="product-variants">
          <div id="price-field"></div>
          <select id="product-select" name="id">
            {% for variant in product.variants %}
            <option value="{{ variant.id }}"
              >{{ variant.title }} - {{ variant.price | money }}</option
            >
            {% endfor %}
          </select>
        </div>
        <input
          type="button"
          name="add"
          value="Purchase"
          id="purchase"
        />
      </form>

      <script type="text/javascript">
        var selectCallback = function(variant, selector) {
          if (variant) {
            if (variant.available) {
              // Selected a valid variant that is available.
              console.log('available')
            } else {
              // Variant is sold out.
              console.log('sold out')
            }
            // variant doesn't exist.
            console.log('no variant')
          }
        }
        // initialize multi selector for product
        jQuery(function($) {
          new Shopify.OptionSelectors("product-select", { 
            product: `{{ product | json}}`,
            onVariantSelected: selectCallback,
            enableHistoryState: true
          });
        });
      </script>

Я получил следующую ошибку в моей консоли:

Uncaught TypeError: Cannot read property 'length' of undefined

Я не слишком уверен, что я делаю неправильно