Using Static Assets on Pages

This guide discusses how you can use static assets (e.g. CSS, Javascript, or HTML files) on your pages.

Prerequisites

To follow the steps in this tutorial, review the required directory structure for your codebase, and understand the concepts of pages, layouts, and assets. You are extending code samples from the previous tutorials on this documentation:

• Codebase
• Pages
• Layouts
• Assets
• Reusing Code Across Multiple Pages

Steps

Using static assets on your pages is a four-step process:

• Step 1: Creating an 'assets' directory and subdirectories
• Step 2: Creating or adding assets
• Step 3: Checking assets
• Step 4: Accessing assets

Step 1: Creating an 'assets' directory and subdirectories

If you are starting from scratch (without creating the codebase), create an directory inside .

If you have already created the codebase, you can skip this step and proceed to locate your directory.

Create subdirectories for different assets inside the directory: for this tutorial, create for storing Javascript files and for storing CSS files.

Step 2: Creating or adding assets

Create a couple of assets.

Create a CSS file in the directory:

Create a Javascript file in the directory:

Create an HTML file in the directory:

Step 3: Checking assets

Use variable to check your assets. This will list the full URL of your assets on our content delivery network, including the time of the latest update (used for caching).

Step 4: Accessing assets

To access assets, use the filter in your liquid file, e.g. layout:

Sync or deploy. The background colour of the page has changed to the colour specified in the file, and the link to works. If you check the developer console, the Javascript is there.

Next Steps

Congratulations! You have learned how to use static assets on your pages. Now you can learn about adding visuals to your pages using CSS or Javascript.

• Adding Visuals to Pages: CSS
• Adding Visuals to Pages: Javascript