Fixing Conflicts With Kingdom Theme

Theme Kingdom uses a lot of custom javascript that doesn't handle errors very well, so if you are using it, most likely Custom Product Builder won't work right out of the box. No worries. Here are the instructions on how to fix it.

• Inside of 'customproductbuilder-initializer.liquid' delete the following lines.

  {{ 'https://code.jquery.com/jquery-3.0.0.min.js' | script_tag }}
  {{ 'https://cdn.shopify.com/s/assets/external/app.js' | script_tag }}
  {{ 'https://code.jquery.com/jquery-3.0.0.min.js' | script_tag }}
  {{ 'https://cdn.shopify.com/s/assets/external/app.js' | script_tag }}
  

  and paste the following script after the closing tag of <div id="product-builder"></div>

<script>
 	document.addEventListener('DOMContentLoaded',function(){
              setTimeout(function(){
                var theme1 = document.createElement('script');
                theme1.setAttribute('src','https://code.jquery.com/jquery-3.0.0.min.js');
                document.head.appendChild(theme1);

                var theme2 = document.createElement('script');
                theme2.setAttribute('src','https://cdn.shopify.com/s/assets/external/app.js');
                document.head.appendChild(theme2);

                var cpb = document.createElement('script');
                cpb.setAttribute('src','https://master.thecustomproductbuilder.com/dist/custom-product-builder.js');
                document.head.appendChild(cpb);

                var theme3 = document.createElement('script');
                theme3.setAttribute('src','https://master.thecustomproductbuilder.com/dist/customizer-theme-main.js');
                document.head.appendChild(theme3);
             }, 500);
  	});
</script>
<script>
        jQuery(document).ready(function(){
           setTimeout(function(){
              scrollElement(jQuery('#content'));
           }, 3000);
        });
</script>

• Inside of assets/js_scripts.js file right after 'initProductForm : function( $product ) {' add the following line:

      	if (!$product.find('.product-json').length) return;

        Result should look like this: