Using Static Assets on Your Pages

Last edit: 

Contributors: 

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

Requirements

To follow the steps in this tutorial, you should be familiar with the required directory structure for your codebase, and understand the concepts of pages, layouts, and assets. You'll extend code samples from the previous tutorials.

Steps

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

  1. Create assets directory and subdirectories
  2. Create assets
  3. Check assets
  4. Access assets

Step 1: Create assets directory and subdirectories

If you are starting from scratch (without having created the codebase), create an assets directory inside marketplace_builder.

If you have already created the codebase, you can skip this step, and just locate your marketplace_builder/assets directory.

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

Step 2: Create assets

Create a couple of assets.

Create a CSS file app.css in the styles directory:

body {
  background-color: #ccc;
}

Create a Javascript file app.js in the scripts directory:

console.log("Hello from JS!");

Create an HTML file test.html in the assets directory:

Hello from test.html

Step 3: Check assets

Use {{ asset_url }} 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).

Example for this documentation site:

{"app.css":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/app.css?updated=1549288061","app.js":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/app.js?updated=1549288062","app.js.map":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/app.js.map?updated=1549288062","images/contributor-guide/feedback_block.png":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/contributor-guide/feedback_block.png?updated=1549288061","images/favicon.ico":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/favicon.ico?updated=1549288060","images/sprite.png":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/sprite.png?updated=1549288060","images/svg/api.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/api.svg?updated=1549288061","images/svg/github-logo.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/github-logo.svg?updated=1549288061","images/svg/help.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/help.svg?updated=1549288061","images/svg/open-book.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/open-book.svg?updated=1549288061","images/svg/path.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/path.svg?updated=1549288061","images/svg/people.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/people.svg?updated=1549288061","images/svg/platformos-logo.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/platformos-logo.svg?updated=1549288061","images/svg/sad.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/sad.svg?updated=1549288061","images/svg/settings.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/settings.svg?updated=1549288060","images/svg/smile.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/smile.svg?updated=1549288060","images/svg/weird.svg":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/svg/weird.svg?updated=1549288060","images/tutorials/gdpr/join_newsletter.png":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/tutorials/gdpr/join_newsletter.png?updated=1549288061","images/tutorials/gdpr/thankyou_page.png":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/tutorials/gdpr/thankyou_page.png?updated=1549288061","images/tutorials/gdpr/unsubscribe.png":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/tutorials/gdpr/unsubscribe.png?updated=1549288061","images/tutorials/qa/sanity_tests.png":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/tutorials/qa/sanity_tests.png?updated=1549288061","images/tutorials/qa/smoke_testing.png":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/tutorials/qa/smoke_testing.png?updated=1549288061","images/use-cases/e-commerce/data-model.png":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/images/use-cases/e-commerce/data-model.png?updated=1549288060","raven.js":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/raven.js?updated=1549288062","vendors~prism.383.js":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/vendors~prism.383.js?updated=1549288062","vendors~vendor.10d.js":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/vendors~vendor.10d.js?updated=1549288062","vendors~vendor.2c6.js":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/vendors~vendor.2c6.js?updated=1549288062","vendors~vendor.36f.js":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/vendors~vendor.36f.js?updated=1549288062","webfonts.css":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/webfonts.css?updated=1549288061","webfonts.js":"https://uploads.staging.oregon.platform-os.com/instances/304/assets/webfonts.js?updated=1549288062"}

Step 4: Access assets

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


<html>
  <head>
    <link rel="stylesheet" href="{{ 'styles/app.css' | asset_url }}">
    <script src="{{ 'scripts/app.js' | asset_url }}"></script>
  </head>
  <body>
    <a href="{{ 'test.html' | asset_url }}">Test</a>
    {{ content_for_layout }}
  </body>
</html>

Sync or deploy. You should see that the background color of the page has changed to the color specified in the app.css file, and the link to test.html works. If you check the developer console, you can see that 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, Liquid, or Javascript.

Questions?

We are always happy to help with any questions you may have. Check out our Help page, or contact us.