Some of the Shopify apps that you have or may have installed in your store can create files that can help these apps function properly.

Take our Product Warnings app as an example.

Whenever you install this app, the app will create files that allow the store to display product warnings or popups.

So… How do we actually manage to do that?

The answer is actually really simple.

It’s by using Shopify’s Theme API and Asset API.

In this tutorial, we’re gonna be taking a look at how to create custom template files using Shopify’s Theme API and Asset API.

What is Theme & Asset API?

Let’s talk about the Theme API first. Theme API is part of the Shopify API that allows you to access the themes inside the Shopify store.

Shopify stores can have as many themes as possible that’s why Theme API is very useful for targeting the theme that is being used by the store.

Now, what about the Asset API?

Asset API is an API that allows you to create, update, or delete template files inside the theme of your choice. That’s why these two APIs are mostly used together especially if you’re customizing the theme.

Getting Started

For this tutorial, we’ll assume that you have already set up your Shopify app. Make sure you have your access token and the Shopify script files that we’re to use for this tutorial. Otherwise, we recommend learning first how to set up your Shopify app from scratch using PHP or feel free to watch the following tutorial from our YouTube channel.

Accessing the theme

Before we can create assets or template files, we have to make sure that we are accessing the right theme in which we want to upload our new file. To do that, we’ll be using Theme API.

Open your index.php and update its code to the following:

<?php
require_once("inc/functions.php");

$requests = $_GET;
$hmac = $_GET['hmac'];
$serializeArray = serialize($requests);
$requests = array_diff_key($requests, array( 'hmac' => '' ));
ksort($requests);

$token = "YOUR_ACCESS_TOKEN_HERE";

$url = parse_url( 'https://' . $requests['shop'] );
$host = explode('.', $url['host'] );
$shop  = $host[0];

$theme = shopify_call($token, $shop, "/admin/api/2020-04/themes.json", array(), 'GET');
$theme = json_decode($theme['response'], JSON_PRETTY_PRINT);

echo print_r($theme);
?>
Code language: HTML, XML (xml)

For the code above, all we did is we used the Theme API’s GET endpoint to know what are the themes inside our store.

So, if we save the script and test our app. We should be able to see all the themes installed in our store.

Now that we have the data that we need, the next thing that we’re going to do is to loop through this array and find which theme is the theme that the store is currently using.

Open your index.php once again and update its code to the following:

<?php
require_once("inc/functions.php");

$requests = $_GET;
$hmac = $_GET['hmac'];
$serializeArray = serialize($requests);
$requests = array_diff_key($requests, array( 'hmac' => '' ));
ksort($requests);

$token = "YOUR_ACCESS_TOKEN_HERE";

$url = parse_url( 'https://' . $requests['shop'] );
$host = explode('.', $url['host'] );
$shop  = $host[0];

$theme = shopify_call($token, $shop, "/admin/api/2020-04/themes.json", array(), 'GET');
$theme = json_decode($theme['response'], JSON_PRETTY_PRINT);

foreach($theme as $cur_theme) {
	foreach ($cur_theme as $key => $value) {
		if($value['role'] === 'main') {
			echo $value['name'] . ' is the theme that i am currently using';
		}
	}
}

?>
Code language: HTML, XML (xml)

For the update above, all we did is we created nested foreach functions to access the themes inside the $theme variable. Each theme will have to go through the if statement that will check if the theme in the current loop is the theme with a role value of main.

Once it’s found, the echo will display the text and will confirm to us that the main theme is found.

Awesome! Now it’s time for us to create the files.

Creating the template files

Now that we have access to our main theme, let’s start creating the template file using Asset API.

Open your index.php once again, and update its code to the following:

<?php
require_once("inc/functions.php");

$requests = $_GET;
$hmac = $_GET['hmac'];
$serializeArray = serialize($requests);
$requests = array_diff_key($requests, array( 'hmac' => '' ));
ksort($requests);

$token = "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";

$url = parse_url( 'https://' . $requests['shop'] );
$host = explode('.', $url['host'] );
$shop  = $host[0];

$theme = shopify_call($token, $shop, "/admin/api/2020-04/themes.json", array(), 'GET');
$theme = json_decode($theme['response'], JSON_PRETTY_PRINT);

foreach($theme as $cur_theme) {
	foreach ($cur_theme as $key => $value) {
		if($value['role'] === 'main') {
			$theme_id = $value['id'];
			$theme_role = $value['role'];

			$asset_file = array(
				"asset" => array(
									"key" => "sections/weeklyhow.liquid",
									"value" => "<h1>Hello World!</h1>"
								)
			);

			$asset = shopify_call($token, $shop, "/admin/api/2020-04/themes/" . $theme_id .  "/assets.json", $asset_file, 'PUT');
			$asset = json_decode($asset['response'], JSON_PRETTY_PRINT);

			echo print_r($asset);
		}
	}
}

?>
Code language: HTML, XML (xml)

After accessing the main theme, we created two variables, one is for the theme ID and one is for the role of the theme. (Although you don’t really need the role just to create a template file. It’s just to let you know that you can access more data inside our theme API.)

The next line is we created an associative array. Its first index should always be the “asset” pointing to another associative array that contains the key and the value indexes.

Make sure you’re following the right format.

Now the question is, what should be the value for the key and the value index?

The value for the key should always be following the format “folder/filename.filetype“.

Keep in mind that you can NOT create your own folder using the API. So, you’re most likely to only access the templates/sections/snippets folder.

After creating the associative array, just use the PUT Endpoint of the Asset API. Just don’t forget to concatenate the ID of the main theme.

By saving the script, you should be able to see the response from the API call.

And if you check the files inside your main theme, you should be able to see your file created.

Conclusion

So there you have it! You can finally start creating your own template files and customize your Shopify stores using your own Shopify applications. FYI, there are a lot of things that you can do with this API.

A good example of this is by creating a template for your collections page by clicking one button. Or, customize your index liquid file and adding an announcement bar. The sky is the limit!