Script Tag APIs
If you are integrating new apps with themes, use theme app extensions for integration.
If your apps inject inline content into theme pages and integrate with Online Store 1.0 themes, you can use Script Tag APIs. Refer to Script Tag REST Admin APIs for how to create, get, update, or delete script tags.
You can use Script Tag APIs to create a script tag. The script tag contains JavaScript codes of your app hosted on a remote server. The following example demonstrates how to create a script tag using the Create a script tag API.
curl -L -X POST 'https://{handle}.myshopline.com/admin/openapi/v20240601/store/script_tags.json' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
--data-raw '{
"script_tag": {
"display_scope": "all",
"event": "onload",
"src": "https://djavaskripped.org/fancy.js"
}
}'
Once merchants install your app, the script tag generated by the API is automatically added to their online store themes without manually adding. If merchants add a new theme to their library after installing your app, the script tag will be automatically incorporated into the newly added theme as well. The following code shows a script tag sample.
<script>
(function() {
function asyncLoad() {
var tagList = [{"src":"https://djavaskripped.org/fancy.js","appKey":"SL201"}];
for (var i = 0; i < tagList.length; i++) {
var tag = tagList[i];
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = tag.src;
s.setAttribute("org", "ST_"+tag.appKey);
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
};
if(window.attachEvent) {
window.attachEvent('onload', asyncLoad);
} else {
window.addEventListener('load', asyncLoad, false);
}
})();
</script>
The script tag resource is associated with the app that creates it. When you remove your app from the SHOPLINE App Store, the script tag resource associated with your app will be automatically deleted. This integration method has the following features:
- You can add your app ability to a store page directly without modifying theme templates.
- After a merchant removes your app, the theme template will automatically revert to its state before app installation.