Resolving JS Theme Conflicts - Defer Custom Product Builder Loading

If the published theme in your store has a lot interactive JS effects, it is likely that the app won't perform well right out of the box. Don't give up. Its a normal situation.

When the custom product page doesn't play nicely with your theme it means you need to defer the loading of Custom Product Scripts. So that at first your theme files load fully and then Custom Product Builder Files.

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>