I’ve recently published a course where I teach how to create Shopify apps and in that course, I’ve taught how to add JavaScript files using ScriptTag API. However, I’ve never really used that lesson entirely to show how powerful ScriptTags are when it comes to improving Shopify stores.

In this article, we will talk about how you customize your Shopify store using ScriptTag API.

Getting Started

Before we start this tutorial, I want to disclose that I will be using the course Shopify app development with Node & React as the reference. What I mean is I will use the codes from the course BUT it does not truly matter as you will do the same steps for your ScriptTag file (aka JavaScript file).

Though, I recommend either taking my course or reading the documentary of Shopify to create a Shopify node project.

Okay, so let’s say we have the following JS file that allows us to install a ScriptTag to our development store.

const axios = require('axios');

const createScriptTag = async (accessToken, shop) => {
    const url = `https://${shop}/admin/api/2021-04/script_tags.json`;
    const src = 'https://test.com/test.js';

    let scriptTagExist = false;

    const shopifyHeader = (token) => ({
        'Content-Type': 'application/json',
        'X-Shopify-Access-Token': token,
    }); 

    const scriptTagBody = JSON.stringify({
        script_tag: {
            event: 'onload',
            src,
        },
    });

    const getScriptTags = await axios.get(url, { headers: shopifyHeader(accessToken) });

    getScriptTags.data.script_tags.map((script) => {
        if(script.src == src) {
            scriptTagExist = true;
        }
    });

    if(!scriptTagExist) {
        await axios.post(url, scriptTagBody, { headers: shopifyHeader(accessToken) })
            .then(response => { console.log(response); })
            .catch(error => console.log(error));
    } else {
        //IF THE SCRIPT TAG IS ALREADY INSTALLED, HERE IS WHERE YOU WILL BE DISPLAYING THE MESSAGE:
        //YOU HAVE ALREADY INSTALLED THE SCRIPTTAG
        return JSON.stringify({scriptTagStatus: true});
    }
}



module.exports = {
    createScriptTag
}
Code language: JavaScript (javascript)

In the code above, we have the function createScriptTag that uses the ScriptTag API endpoints (GET & POST) to check if there is an existing ScriptTag with the same URL that we set for the src variable. If there’s none then the function will create the Script Tag.

Once the script tag is installed, you can now work on the javascript file that you use for ScriptTag API.

Using Script Tags to customize store front

When I say script tags, these are the javascript files that you imported using the ScriptTag API and to be honest with you, it’s not that TOO complicated. In fact, once the javascript files are imported to your Shopify store, you can finally customize the JavaScript file and use it to add stuff or edit stuff to your Shopify storefront.

Say for example, we had the JavaScript file here https://test.com/test.js

And in that file, we have the following code:

alert("Example Alert");Code language: JavaScript (javascript)

By opening your Shopify store, you should have the following output:

Woah, that’s it? That’s just too boring and simple…

Well, if you know JavaScript, you can basically DO ANYTHING you want to customize the frontend. Do you want to change the background color of your whole page? You can do that.

document.body.style.backgroundColor = "red";Code language: JavaScript (javascript)

Do you want to use a library and extend the functionality of your Shopify store? Heck yeah you can do that!

let darkmode;

function addWidget() {
  	darkmode = new Darkmode();
    darkmode.showWidget();
}

var script = document.createElement('script');
script.onload = function () {
    window.addEventListener('load', addWidget);
  
  	darkmode.toggle();
};

script.src = 'https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js';

document.head.appendChild(script);

Code language: JavaScript (javascript)

Conclusion

There are a LOT of things that you can do with Script Tags. You know what they say? The sky is the limit! So go ahead and experiment with your codes and make your Shopify store more interactive and unique using JavaScript. There are hundreds of libraries out there that you can use to make your websites or store look like a badass. One of my favorites is the SweetAlert2. It’s lightweight and very easy to use.

I have a video using that library so if you’re interested, you can watch it here: