Any asset you wish to include on your page needs to go directly into the root of the assets folder. The assets folder cannot contain any subfolders - they will simply be ignored.


Referencing assets from status-page.liquid

Whenever you want to include an asset in your status-page.liquid template you need to reference it using our asset_url liquid filter.

<!DOCTYPE html>
<html>
	<head>
		<!-- Include the CSS Assets. -->
		<link rel="stylesheet" href="main.css" />
	</head>
	<body>
		<!-- Include Your Logo. -->
		<img src="logo.png" alt="Our logo." />

		<!-- Include the JS Assets. -->
		<script src="main.js"></script>
	</body>
</html>

Referencing assets from a stylesheet.

Often you’ll want to reference images or fonts from within a stylesheet. As with your status-page.liquid we also parse your css and js assets for liquid so you’ll need to use the asset_url helper here too.

header {
	background-image: background.png;
}

When your theme is compiled we’ll figure out where we’ve hosted your asset and put the correct URL into your template.


Why can’t I just use relative paths?

Unfortunately relative paths won’t work as we host all the assets to your status page in a different location, and it sits on a different domain to your page.