How to Manually Create a ScriptTag in Shopify Without Using CLI or Local Setup

Nov 8

3 min read

Adding custom scripts to your Shopify store can enhance functionality, improve user experience, and integrate third-party tools. Usually, developers use Shopify CLI or local development environments to manage ScriptTags, but these methods require setup and technical knowledge. What if you want a simple, direct way to create a ScriptTag without installing anything on your computer?

This guide walks you through the easiest method to manually create a ScriptTag in Shopify using only your browser or tools like Postman. No CLI, no local setup, just straightforward steps you can follow right now.

Step 1: Get Your Admin API Access Token

Before you can create a ScriptTag, you need an Admin API access token with the right permissions. This token allows you to authenticate your requests to Shopify’s API.

Follow these steps:

Go to your Shopify Admin panel.
Navigate to Settings → Apps and sales channels → Develop apps.
Select your app or create a new one if you haven’t already.
Click Configuration → Admin API integration.
Make sure the app has these permissions:

- `write_script_tags`

- `read_script_tags`

If the app is not installed yet, click Install app.
Copy the Admin API access token. It starts with `shpat_`.

Keep this token secure. You will need it to authenticate API requests.

Step 2: Find Your Store’s myshopify Domain

Shopify API requests require your store’s myshopify domain, which differs from your public store URL.

For example:

If your store URL is `https://intertoons.com`
Your API domain will be `https://intertoons.myshopify.com`

Use this domain in your API requests to target your store correctly.

Step 3: Create the ScriptTag Using Postman or Browser Fetch

You have two simple options to create the ScriptTag: Postman or browser fetch. Both methods send a POST request to Shopify’s API with the script details.

Option A: Use Postman

Postman is a popular tool for testing APIs. If you have it installed, follow these steps:

Open Postman and create a new request.
Set the method to POST.
Enter the URL:

https://YOUR-STORE.myshopify.com/admin/api/2024-10/script_tags.json

In the Headers tab, add:

X-Shopify-Access-Token: YOUR_ADMIN_API_TOKEN
Content-Type: application/json

In the Body tab, select raw and choose JSON format. Paste this JSON:

json

{

"script_tag": {

"event": "onload",

"src": "https://YOUR-HOST/whatsapp.js",

"display_scope": "all"

}

}

Replace `YOUR-STORE` with your myshopify domain, `YOUR_ADMIN_API_TOKEN` with your token, and `https://YOUR-HOST/whatsapp.js` with the URL of your script.
Click Send.

If successful, you will receive a `201 Created` response with a JSON object containing details about the new ScriptTag, including its `"id"`. Keep this ID if you want to update or delete the ScriptTag later.

Option B: Use Browser Fetch

If you prefer not to use Postman, you can run a fetch request directly from your browser console on any website.

Open your browser’s developer console and paste this code:

fetch("https://YOUR-STORE.myshopify.com/admin/api/2024-10/script_tags.json", {

  method: "POST",

  headers: {

    "X-Shopify-Access-Token": "YOUR_ADMIN_API_TOKEN",

    "Content-Type": "application/json"

  },

  body: JSON.stringify({

    script_tag: {

      event: "onload",

      src: "https://YOUR-HOST/whatsapp.js",

      display_scope: "all"

    }

  })

})

.then(response => response.json())

.then(console.log)

.catch(console.error);

Make sure to replace:

`YOUR-STORE` with your myshopify domain.
`YOUR_ADMIN_API_TOKEN` with your Admin API token.
`https://YOUR-HOST/whatsapp.js` with your script URL.

This will send the request and log the response in the console. Look for the `"id"` in the response to confirm the ScriptTag was created.

What Does Each ScriptTag Property Mean?

Understanding the JSON payload helps you customize your ScriptTag:

event: When the script loads. `"onload"` means the script runs when the page finishes loading.
src: The URL of the JavaScript file you want to inject into your store.
display_scope: Where the script runs. `"all"` means it runs on all pages of your store.

You can adjust these values depending on your needs. For example, you might want the script to load only on the product pages or checkout pages by changing the `display_scope`.

Managing Your ScriptTags After Creation

Once you create a ScriptTag, you might want to update or delete it later. Use the ScriptTag `"id"` returned in the response to manage it via API calls.

To list all ScriptTags, send a GET request to:

  https://YOUR-STORE.myshopify.com/admin/api/2024-10/script_tags.json

To delete a ScriptTag, send a DELETE request to:

  https://YOUR-STORE.myshopify.com/admin/api/2024-10/script_tags/{script_tag_id}.json

Replace `{script_tag_id}` with the actual ID.

Tips for Using ScriptTags Safely

Host your JavaScript files on a reliable, secure server (HTTPS).
Test your scripts on a development or staging store before adding to a live store.
Avoid loading heavy scripts that slow down your store’s performance.
Regularly review your ScriptTags to remove unused or outdated scripts.