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

How to inject custom js to shopify via app

Hello I’m pretty new to shopify app development.
I created the shopify app with laravel and now I generated a js file with content. What I want is to inject this code automatically to the shopify store, so every user which installed the app the code will be added to his store autmatically. I currently read about script tags and probablly is the best way to insert with them, but it’s not clear for me. I want information which will help me to figure this out. Thanks in advance

Tags:

2

Answers


  1. 0

    Well it’s pretty straightforward.

    You must create a public URL for the script file first. (so that you can access it from everywhere)

    After that you make a post request with the following end point: https://shopify.dev/docs/admin-api/rest/reference/online-store/scripttag#create-2020-07

    Where "src": "https://djavaskripped.org/fancy.js" is your public URL for the the javascript.

    This should be done only once when the user is installing their APP.

    After that the script will be loaded every time automatically for each theme, there will be no need for additional logic to output it.

    When you uninstall the app the script is removed from the admin automatically as well.

    Now for the question, how to add your css?

    You have two ways:

    • create a public URL for the CSS file and create a link tag and append that to the document via JS
    • create a style tag and append that to the DOM and insert the styles there via AJAX or just have them as a string inside the javascript file
    Login or Signup to reply.
  2. 0

    how to add a custom made .js/ .css file to a shopify theme:

    • add your file.js/file.css in the Asset folder

    for .js:

    • add the following code in the head part of theme.liquid file
    {{ "filename.js" | asset_url | script_tag }}
    • add the following code to the page you need to add the js to
    <script type="text/javascript">
        yourFunction();
</script>

    in case the script has async/defer 2 options:

    • option 1 local scripts ( stored in Shopify )
    <script src="{{ 'filename.js' | asset_url }}" async></script>

<script src="{{ 'filename.js' | asset_url }}" defer></script>
    • option 2 remote scripts
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" async></script>

    in order to use async and defer tags the src attribute must be present
    documentation here

    for .css:

    • add the following code in the head part of theme.liquid file
    {{ "filename.css" | asset_url | script_tag }}

    NOTES

    you can make a repo in Github and load your .js/.css via raw.github

    <script src="https://raw.github.com/username/project/master/script.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search