1. Add a snippet "simple-preorder-bootstrap.liquid" with next code:

<style id="simple_preorder_style"></style>
<script>
    // Bootstrap for Simple Preorder app
    var SimplePreorderBootstrap = {
        "page": {{ template | json }},
        "product": {
            "id": {{ product.id | json }},
            "title": {{ product.title | json }},
            "variants": [
                {% for variant in product.variants %}
                    {
                        "id": {{variant.id}},
                        "inventory_quantity": '{{variant.inventory_quantity}}',
                        "inventory_management": '{{variant.inventory_management}}',
                        "inventory_policy": '{{variant.inventory_policy}}'
                    },
                {% endfor %}
            ]
        },
        "cart": {
            "items": [
                {% for item in cart.items %}
                    {
                        "variant_id": {{item.variant.id}},
                        "product_id": {{item.product.id}},
                        "quantity": {{item.quantity}},
                        "inventory_quantity": '{{item.variant.inventory_quantity}}',
                        "inventory_management": '{{item.variant.inventory_management}}',
                        "inventory_policy": '{{item.variant.inventory_policy}}',
			"properties": {{ item.properties | json }}
                    },
                {% endfor %}
            ]
        },
        // "startupDelay": 100,
        // "productFormSelector": '/cart/add',
        // "productSelector": 'form[action="/cart/add"] [type="submit"]',
        // "variantsSelector": 'form[action="/cart/add"] .variants-selector',
	// "nativeVariantsSelector": 'form[action="/cart"] [name^="id"]',
        // "checkoutSelector": 'form[action="/cart"] [type="submit"][name="checkout"]',
        // "updateSelector": 'form[action="/cart"] [type="submit"][name="update"]',
        // "updateInputsSelector": 'form[action="/cart"] [name^="updates["]',
        // "preorderBadgeContainerSelector": '.product-item__image-wrapper',
        // "updateInputsSelector": 'input[name="quantity"]',
        // "debug": true,
    };
</script>

<script id="kad-preorder-config-loader">
  (() => {
    try {
      function loadPersonalConfig() {
        let personalConfig = localStorage.getItem('SimplePreorderBootstrap')
        if (typeof personalConfig === 'string') {
          return JSON.parse(personalConfig)
        }
      }

      function savePersonalConfig(config) {
        localStorage.setItem('SimplePreorderBootstrap', JSON.stringify(config, null, 2))
      }

      function isDevParamSpecified() {
        return new URLSearchParams(window.location.search).get('kad-dev') !== null
      }

      let personalConfig = loadPersonalConfig()

      if (isDevParamSpecified()) {
        personalConfig = personalConfig || {}
        personalConfig.dev = true
      }

      if (personalConfig) {
        Object.assign(SimplePreorderBootstrap, personalConfig)
        savePersonalConfig(personalConfig)
      }
    } catch (err) {}
  })()
</script>

<script id="kad-preorder-injector">
  (() => {
    let lastScript = document.getElementById('kad-preorder-injector')

    function injectScript(url, type) {
      const script = document.createElement('script')
      script.src = url
      script.type = type || ''
      script.async = false
      script.defer = true
      lastScript = lastScript.parentNode.insertBefore(script, lastScript.nextSibling)
    }

    if (SimplePreorderBootstrap.dev && SimplePreorderBootstrap.devScriptUrl) {
      injectScript(SimplePreorderBootstrap.devScriptUrl, SimplePreorderBootstrap.devScriptType)
    }

    if (SimplePreorderBootstrap.dataScriptUrl) {
      injectScript(SimplePreorderBootstrap.dataScriptUrl, SimplePreorderBootstrap.dataScriptType)
    }

    if (SimplePreorderBootstrap.settingsScriptUrl) {
      injectScript(SimplePreorderBootstrap.settingsScriptUrl, SimplePreorderBootstrap.settingsScriptType)
    }

    if (SimplePreorderBootstrap.appScriptUrl) {
      injectScript(SimplePreorderBootstrap.appScriptUrl, SimplePreorderBootstrap.appScriptType)
    }
  })()
</script>

Important: At the very bottom of the snippet in the last line, replace the text "NAME-OF-YOUR-SHOP" with the address of your store from the address bar of the browser when you are in the admin area of the store (like "simple-pre-order-demo-shop.myshopify.com", and not, for example, "spo-demo.shop").

2. In the theme template "theme.liquid" right before the closing tag "</head>" add the code to connect the snippet:

<!-- Snippet for Simple Preorder app -->
{% include 'simple-preorder-bootstrap' %}

3. (Not mandatory) In the snippet adjust the selectors for following buttons:

• productSelector — add to cart button
• variantsSelector — list of variants
• checkoutSelector — checkout button in cart
• updateSelector — update cart button

If this does not work, please write to support@kad.systems