Welcome to a guide on setting up a basic Hello World Shopify app which will be able to modify the storefront by displaying a header that says Hello World.
This guide will be creating an embedded Shopify app using the Shopify CLI (Command Line Interface). This way the app will be closely integrated with Shopify and will be accessible through the shop's admin page.
Shopify devs have already created a guide on how to use the Shopify CLI to create a simple app which displays some text on the app page (https://shopify.dev/apps/getting-started/create) but I will also go over the same steps in this guide in addition to modifying the storefront.
This guide will be building an app using Node.js as the backend framework, so make sure you have it installed before proceeding.
The app will also use ngrok to create a secure http tunnel to communicate with Shopify' s servers, so you will also have to install ngrok.
Next we have to install the Shopify CLI itself and since we are on windows, we have to use ruby gems, so install Ruby+Devkit for windows on the ruby website.
Next, open a terminal on the desired directory where you want your project to be installed and type “gem install shopify-cli” to install the Shopify CLI onto your machine. Next type “shopify node create”, which will create all the necessary starter code for the app in a new subdirectory, in addition to creating the app in your partner dashboard.
The Shopify CLI has various commands but to start the server/app type “Shopify node serve” into the command line.
Now your app is running and go to your app in the partner dashboard to install it onto a development store. Now you have an app running and installed on a store, congrats! However this app is very basic and doesn't do anything at the moment.
Let's make our app modify the storefront by adding a header that says Hello World, the Shopify version of a basic hello world program. To do this we will have to use the script tag API to insert javascript into our storefronts code. We can add script tags to our store using a POST request to the Shopify admin API, with the actual route being: /admin/api/2021-07/script_tags.json. The full URL will include the name of the development shop you are testing the app which will be placed in the ${shop} section of the proceeding url: `https://${shop}/admin/api/2021-07/script_tags.json`.
To create a script tag you will also need to set two variables in the body of the request, the “event” and the “src”, the latter being the url which will provide the JavaScript file to be injected in the storefront. We can provide the JavaScript file using the server that was created by the Shopify CLI. To do this we can simply create a new route that accepts a GET request to provide a file. Here is the code I used to create the route:
router.get("/script", async (ctx) => {
ctx.type = 'js';
ctx.body = createReadStream('./script.js');
});
This code will be placed in the server.js file located in the server directory of the project. Then the url of the route will simply be the url of the server you created which will be generated using ngrok which was mentioned earlier. To find the URL of your server you can use the HOST environment variable which was automatically created when creating the app using the Shopify CLI. Here is what a full POST request to the script tag API will look like using axios:
var data = JSON.stringify({ "script_tag": { "event": "onload", "src": "https://" + process.env.HOST.replace(/https:\/\//, "") + "/script" } });
var config = {
method: 'post',
url: `https://${shop}/admin/api/2021-07/script_tags.json`,
headers: {
'X-Shopify-Access-Token': accessToken,
'Content-Type': 'application/json'
},
data: data
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
Keep in mind that making requests to Shopify s admin API will require an access token, luckily the starter app already generates this token in the createShopifyAuth and afterAuth function, so it is advised to place this request within the afterAuth function for easy access to the token.
Each time you restart the server, it will be hosted through a different URL which is controlled by ngrok. To make sure the script tag has the correct src url each time you restart the server it is best to make a GET request to the script tag API to see if the development store already has a script tag. If it does then we will want to modify the existing script tag with the new src url by making a PUT request, if the store doesn't have a script tag then we can make a POST request to make a new one. Here is the documentation on the script tag api: https://shopify.dev/api/admin/rest/reference/online-store/scripttag#create-2021-07
Then in the root directory of the project we can simply create a JavaScript file named script and this will be the code that gets injected into the storefront. Since we are just creating a header that displays “Hello World” all we have to insert is a div and some styling. Here is the JavaScript code that will be placed in the script.js file I mentioned earlier:
$(document).ready(function () {
$('body').prepend('<div class="header" id="myHeader"><h2>Hello World!</h2></div>');
$('head').prepend('<style>.header { padding: 10px 16px; background: #555; color: #f1f1f1; } .content { padding: 16px; } .sticky { position: fixed; top: 0; width: 100%} .sticky + .content { padding-top: 102px; }</style>');
});
Now if you visit your development store you should see a banner at the top of the website with the text “Hello World”. Congrats, you have successfully modified how your storefront looks!
This is just an introduction on how to create a Shopify app but should help provide the foundation for creating more complex apps in the future!