JavaScript assets not rendering properly in Shopify theme

Other Questions Shopify
1

JavaScript library not working in Shopify liquid template

I’m helping someone set up their Shopify store and trying to integrate a JavaScript graphics library. I created a liquid template file called graphics-display.liquid but when I include it in the theme, only text appears instead of the expected visual content.

My current setup:

<head>
    <meta charset="utf-8">
    <title>3D Graphics Demo</title>
    <style>
        body { margin: 0; padding: 0; }
    </style>
</head>
<body>
    <script src="babylon.js"></script>
    <script>
        var canvas = document.createElement('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        document.body.appendChild(canvas);
        
        var engine = new BABYLON.Engine(canvas, true);
        var createScene = function() {
            var scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
            
            var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
            
            return scene;
        };
        
        var gameScene = createScene();
        engine.runRenderLoop(function() {
            gameScene.render();
        });
    </script>
</body>

I’m including this in my main theme file using {% render 'graphics-display' %} but it’s not displaying the 3D content properly. The JavaScript library seems to load but the visual elements don’t appear. Has anyone dealt with similar asset loading issues in Shopify themes?

2

check if your babylon.js file is actually in the assets folder and accessible. shopify themes can be picky about file paths - try adding some console.log statements to see if your script even runs. also, babylon needs webgl support so test on different browsers first. sometimes shopify’s liquid rendering messes with script execution order too.

3

Had the same issue with canvas libraries on Shopify. It’s probably a timing problem - your script runs before the DOM loads or Babylon.js finishes loading. Wrap your code in window.onload or DOMContentLoaded. Also check if babylon.js is actually loading from your assets folder. You need {{ 'babylon.js' | asset_url }} in Shopify, not just the filename. Check console for errors too - Shopify’s CSP can block JS sometimes. I’d move babylon.js to your theme’s assets folder and update the script src.

4

I’ve seen this canvas rendering issue before. Your Babylon.js code looks fine - it’s probably a viewport or display problem. Add canvas.style.display = 'block' and canvas.style.position = 'absolute' right after creating the canvas. Shopify’s default CSS often messes with canvas positioning. Also check that your template renders inside the body tag and isn’t nested in containers with overflow hidden or height restrictions. Test the same code in a standalone HTML file first to make sure Babylon.js works, then slowly add it to your Shopify template.