Shopify Question posted in
The Shopify help center can be found here.

asset files not loading in on Shopify

I am currently trying to help my friend with his Shopify store and I just started to learn Liquid, we want to load in a javascript file and an hmtl file but when we load the assets in and preview the website, nothing shows up except for a link.

Here is my code of the three-html.liquid file.

<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
    </style>
</head>

This is the head section.

This is the body section.

<body>
    <script src="three.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;

        const animate = function () {
            requestAnimationFrame( animate );

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render( scene, camera );
        };

        animate();
    </script>
</body>

And then obviously the rest of the html tags.

Now when I do {% render 'three-html' %} in the theme.liquid file and when I preview the store this is all I get .

A blank screen

We just wanna figure out how to get these files to visually display on the screen.
This is the outcome we want. The spinning cube.

Spinning cube

Thanks.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    It's all good 3dgifmaker.com did the job. Thanks anyways.


  2. 0

    You need to add the snippet and add the content of HTML file content to that snippet and use render to load it into theme.liquid

    {% render 'three-html' %}

    Read more about snippets Link and render
    Link

    enter image description here

    enter image description here

    Login or Signup to reply.
  3. 0

    short response:

    • set both scripts on Assets directory, three.js and custom.js
    • if you need this scripts on the entire site call them on the layout file theme.liquid if you need it only on a page or on some specific page, call the files on a template file.
    • to call your scripts use filters you have two options:
      {{ 'three.js' | asset_url | script_tag }} url filter plus html filter it render:
        <script src="//cdn.shopify.com/s/files/something_long/assets/three.js.js?hash" type="text/javascript"></script>

    but if you like to use some extra options like defer you should use a normal script tag plus an url filter :

    <script type="text/javascript" src="{{ 'custom.js | asset_url }}" defer="defer"></script>

    Long response:

    You mix some concepts, you should know the difference between the files on the different folders off a shopify theme.

    directories:

    • assets: here go the "static" files from the site like images, fonts, css and script files, a nice function you can end the css and js files with .liquid and use liquid variables, it will be server rendered. to call assets you should use the asset_url filter

    • layout: this liquid files are the boxes containing the base of the page, like base html structure, metas, global css and script calls. It’s normal call here header and footer section too, you can create multiple layouts and use it o different pages of the site.
      IMPORTANT: you shouldn’t use head and body tags anywhere else.
      The base structure of layout files:

        <!doctype html>
    <html lang="{{ shop.locale }}">
      <head>
        <meta charset="utf-8">
        <title>{{ page_title }}</title>
        <link type="text/css" href="{{ 'style.css.liquid | asset_url }}" rel="stylesheet">
        {%- if page_description -%}
          <meta name="description" content="{{ page_description | escape }}">
        {%- endif -%}
      </head>
      <body>
        {% section 'header' %}
        <main role="main">
          {{ content_for_layout }}
        </main>
        {% section 'footer' %}
        <script type="text/javascript" src="{{ 'myScript.js | asset_url }}" defer="defer"></script>
      </body>
    </html>

    • Sections: they are reusable modules of content that can be customized and re-ordered by users of the theme. Sections are very especial, because here you can set customizable parts than can be update on shopify admin, more info here.

    • Snippets: they’re reusable bits of code, it can be used anywhere and call by render you can even pass variables for extra customization.

    • Templates: they manage the different site’s pages, (article, product, index, page, etc) you can create an different version adding an alternate template. Here you can choose witch layout file you use. the default layout is theme.liquid.
      to use an alternative layout your file should start with this line

    {%- layout 'yourOtherLayout' -%}

    you don’t need to add .liquid at the end, use just the layout name.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search