Homepage
Search icon

Using Static Assets on Your Pages

Last edit: Dec 08, 2023

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

Note

Below steps are using Liquid filters, to learn about Liquid filters click here.

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

Step 1: Create assets directory and subdirectories

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

If you have already created the codebase, you can skip this step, and just locate your app/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:

{"contentPages.a10.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.a10.css?updated=1665412918","contentPages.a10.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.a10.js?updated=1665412918","contentPages.9c3.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.9c3.css?updated=1665474791","contentPages.9c3.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.9c3.js?updated=1665474791","search.2dc.css":"https://uploads.platformos.dev/instances/85/assets/search.2dc.css?updated=1668443191","search.2dc.js":"https://uploads.platformos.dev/instances/85/assets/search.2dc.js?updated=1668443191","contentPages.ba7.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.ba7.css?updated=1662013172","contentPages.ba7.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.ba7.js?updated=1662013172","images/awards/2021/ISTC-a.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/ISTC-a.png?updated=1656597297","images/standards/ui/a":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/a?updated=1665411137","contentPages.7ae.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.7ae.css?updated=1665649677","contentPages.7ae.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.7ae.js?updated=1665649677","images/standards/ui/colorvariants/color_variant_variable_name.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/colorvariants/color_variant_variable_name.png?updated=1674674016","images/pos-logo-dark.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo-dark.png?updated=1710940476","images/pos-logo.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo.png?updated=1710940476","images/standards/ui/Figma_pOS_AMO.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/Figma_pOS_AMO.png?updated=1674674016","images/standards/ui/Figma_pOS_atomicProcess.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/Figma_pOS_atomicProcess.png?updated=1674674016","images/standards/ui/Figma_pOS_customizable.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/Figma_pOS_customizable.png?updated=1674674016","images/standards/ui/designkit/inputs.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/inputs.png?updated=1674674016","images/standards/ui/Figma_pOS_standards.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/Figma_pOS_standards.png?updated=1674674016","images/standards/ui/figma_app_screen.jpg":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/figma_app_screen.jpg?updated=1674674016","images/standards/ui/recolor.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/recolor.gif?updated=1674674016","images/standards/ui/designkit/components.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/components.png?updated=1674674016","contentPages.640.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.640.css?updated=1668104167","contentPages.640.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.640.js?updated=1668104167","contentPages.d58.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.d58.css?updated=1661287876","contentPages.d58.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.d58.js?updated=1661287876","search.1b8.css":"https://uploads.platformos.dev/instances/85/assets/search.1b8.css?updated=1668104167","search.1b8.js":"https://uploads.platformos.dev/instances/85/assets/search.1b8.js?updated=1668104167","contentPages.7b3.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.7b3.css?updated=1666267015","images/standards/ui/designkit/components_buttons.jpg":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/components_buttons.jpg?updated=1674674016","contentPages.7b3.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.7b3.js?updated=1666267015","images/graphiql/variables.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/variables.png?updated=1710940476","images/svg/search-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/search-bg.svg?updated=1710940476","modules/graphql/line-link.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/line-link.js?updated=1710940476","modules/graphql/images/header-bg.svg":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/images/header-bg.svg?updated=1710940476","images/kits/ui/Figma_pOS_customizable.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_customizable.png?updated=1710940476","images/kits/ui/Figma_pOS_standards.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_standards.png?updated=1710940476","images/svg/sections/dev-kit.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/dev-kit.svg?updated=1710940476","images/best-practices/performance/embedding-youtube/thumbnail.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/embedding-youtube/thumbnail.jpg?updated=1710940476","images/standards/ui/designkit/customization_guide.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/customization_guide.png?updated=1674674016","images/standards/ui/designkit/designkit_illustration.jpg":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/designkit_illustration.jpg?updated=1674674016","images/standards/ui/designkit/getting_started.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/getting_started.png?updated=1674674016","images/standards/ui/designkit/overview.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/overview.png?updated=1674674016","images/standards/ui/designkit/rules.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/rules.png?updated=1674674016","images/standards/ui/designkit/style_guide.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/style_guide.png?updated=1674674016","images/kits/ui/designkit/designkit_illustration.jpg":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/designkit_illustration.jpg?updated=1710940476","images/standards/ui/features/button.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/button.gif?updated=1674674016","images/standards/ui/features/flexible.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/flexible.gif?updated=1674674016","images/standards/ui/features/mobile-layout.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/mobile-layout.gif?updated=1674674016","images/standards/ui/features/mobile.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/mobile.png?updated=1674674016","images/standards/ui/features/spacing.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/spacing.gif?updated=1674674016","images/standards/ui/features/swap.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/swap.gif?updated=1674674016","images/kits/ui/recolor.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/recolor.gif?updated=1710940476","images/svg/sections/developer-guide.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/developer-guide.svg?updated=1710940476","images/use-cases/svg-optimization/xml-error.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/xml-error.jpg?updated=1710940476","images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png?updated=1710940476","images/standards/ui/features/variants.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/variants.png?updated=1674674016","images/awards/UKTC2019_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/UKTC2019_quote.png?updated=1710940476","252.879.js":"https://uploads.platformos.dev/instances/85/assets/252.879.js?updated=1710940488","362.8eb.js":"https://uploads.platformos.dev/instances/85/assets/362.8eb.js?updated=1710940488","images/awards/styleguide.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/styleguide.jpeg?updated=1710940476","images/awards/template.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/template.jpeg?updated=1710940476","images/awards/tests.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/tests.jpeg?updated=1710940476","images/standards/ui/colorvariants/color_variant_description.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/colorvariants/color_variant_description.png?updated=1674674016","images/standards/ui/features/accessible.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/accessible.png?updated=1674674016","images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png?updated=1710940476","images/best-practices/performance/fragment-lazy-loading/slow-timeline.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/slow-timeline.png?updated=1710940476","images/kits/ui/designkit/customization_guide.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/customization_guide.png?updated=1710940476","images/kits/ui/designkit/getting_started.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/getting_started.png?updated=1710940476","images/workflow/development_workflow.png":"https://uploads.platformos.dev/instances/85/assets/images/workflow/development_workflow.png?updated=1710940476","images/awards/2022/Best DevPortal beyond REST Platforms.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best DevPortal beyond REST Platforms.png?updated=1710940476","images/awards/2021/Best Onboarding Award.svg":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Onboarding Award.svg?updated=1710940476","images/awards/2021/DPA21_alternativestorestAPIs_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/DPA21_alternativestorestAPIs_quote.png?updated=1710940476","images/kits/ui/figma_app_screen.jpg":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/figma_app_screen.jpg?updated=1710940476","images/svg/sections/pos-kits.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/pos-kits.svg?updated=1710940476","images/use-cases/svg-optimization/multicursor-16.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/multicursor-16.jpg?updated=1710940476","781.026.js":"https://uploads.platformos.dev/instances/85/assets/781.026.js?updated=1710940488","images/awards/2022/Best Small to Medium Enterprise DevPortal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best Small to Medium Enterprise DevPortal.png?updated=1710940476","images/awards/2022/Best_SME_DevPortal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best_SME_DevPortal.png?updated=1710940476","images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png?updated=1710940476","images/kits/ui/designkit/components_buttons.jpg":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/components_buttons.jpg?updated=1710940476","images/kits/ui/features/button.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/button.gif?updated=1710940476","modules/graphql/graphql.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/graphql.js?updated=1710940476","images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png?updated=1710940476","images/kits/ui/colorvariants/color_variant_variable_name.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/colorvariants/color_variant_variable_name.png?updated=1710940476","images/kits/ui/designkit/inputs.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/inputs.png?updated=1710940476","images/kits/ui/designkit/overview.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/overview.png?updated=1710940476","images/kits/ui/designkit/rules.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/rules.png?updated=1710940476","images/kits/ui/designkit/style_guide.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/style_guide.png?updated=1710940476","images/awards/2022/DPA22_bestaccessible_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DPA22_bestaccessible_quote.png?updated=1710940476","images/awards/cicd.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/cicd.jpeg?updated=1710940476","images/awards/workflow.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/workflow.png?updated=1710940476","images/get-started/graphiql.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/graphiql.png?updated=1710940476","images/graphiql/comments.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/comments.png?updated=1710940476","images/graphiql/explorer.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/explorer.png?updated=1710940476","images/graphiql/docs.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/docs.png?updated=1710940476","images/graphiql/main-window.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/main-window.png?updated=1710940476","images/graphiql/multiple-queries.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/multiple-queries.png?updated=1710940476","images/svg/callout-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/callout-bg.svg?updated=1710940476","images/svg/header-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/header-bg.svg?updated=1710940476","images/awards/2021/Best Developer Portal for alternatives to REST-APIs.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Developer Portal for alternatives to REST-APIs.png?updated=1710940476","images/meet-us/marketplace_risk_conference.png":"https://uploads.platformos.dev/instances/85/assets/images/meet-us/marketplace_risk_conference.png?updated=1710940476","images/awards/2021/DPA21_bestonboarding_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/DPA21_bestonboarding_quote.png?updated=1710940476","images/awards/2021/ISTC.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/ISTC.png?updated=1710940476","images/awards/2022/Best Accessible Devportal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best Accessible Devportal.png?updated=1710940476","images/awards/2021/DPA21_besteditorial_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/DPA21_besteditorial_quote.png?updated=1710940476","images/svg/logo.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/logo.svg?updated=1710940476","images/awards/2022/dpa_best_new_dx_innovation.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/dpa_best_new_dx_innovation.png?updated=1710940476","images/best-practices/lighthouse/slack-notification.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/lighthouse/slack-notification.png?updated=1710940476","images/best-practices/qa/executed_tests.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/executed_tests.jpg?updated=1710940476","images/best-practices/qa/list_browsers.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/list_browsers.png?updated=1710940476","images/best-practices/qa/qrcode.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/qrcode.jpg?updated=1710940476","images/best-practices/qa/sanity_tests.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/sanity_tests.png?updated=1710940476","images/user-research/PP-DesignStyle.png":"https://uploads.platformos.dev/instances/85/assets/images/user-research/PP-DesignStyle.png?updated=1710940476","images/awards/2022/dpa_best_accessible_devportal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/dpa_best_accessible_devportal.png?updated=1710940476","images/best-practices/gdpr/join_newsletter.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/join_newsletter.png?updated=1710940476","images/best-practices/qa/devops.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/devops.png?updated=1710940476","images/best-practices/qa/executed_suit.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/executed_suit.jpg?updated=1710940476","images/developer-guide/dns/legacy-dns-page.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/legacy-dns-page.png?updated=1710940476","images/developer-guide/dns/ownership-verification.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/ownership-verification.png?updated=1710940476","images/kits/ui/features/accessible.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/accessible.png?updated=1710940476","images/developer-guide/dns/reparking-ns.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/reparking-ns.png?updated=1710940476","images/developer-guide/dns/specific-subdomain.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/specific-subdomain.png?updated=1710940476","images/developer-guide/dns/wildcard.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/wildcard.png?updated=1710940476","images/developer-guide/pos-cli-workflow/final-result.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/pos-cli-workflow/final-result.svg?updated=1710940476","images/developer-guide/pos-marketplace-template/pmt_commands.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/pos-marketplace-template/pmt_commands.png?updated=1710940476","images/developer-guide/user-uploads/flowchart-attachments.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/user-uploads/flowchart-attachments.svg?updated=1710940476","images/get-started/todo/ui.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/ui.jpg?updated=1710940476","images/use-cases/nodejs-debug-logging/after.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/nodejs-debug-logging/after.jpg?updated=1710940476","images/kits/ui/features/flexible.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/flexible.gif?updated=1710940476","images/kits/ui/features/mobile-layout.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/mobile-layout.gif?updated=1710940476","images/kits/ui/features/mobile.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/mobile.png?updated=1710940476","images/kits/ui/features/spacing.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/spacing.gif?updated=1710940476","images/kits/ui/features/swap.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/swap.gif?updated=1710940476","modules/graphql/code.css":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/code.css?updated=1710940476","modules/graphql/filter-types.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/filter-types.js?updated=1710940476","modules/graphql/graphql.css":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/graphql.css?updated=1710940476","images/contributor-guide/feedback_block.png":"https://uploads.platformos.dev/instances/85/assets/images/contributor-guide/feedback_block.png?updated=1710940476","images/get-started/Marketplace_MVP.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/Marketplace_MVP.jpg?updated=1710940476","images/graphiql/autocomplete.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/autocomplete.png?updated=1710940476","images/developer-guide/user-uploads/flowchart-images.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/user-uploads/flowchart-images.svg?updated=1710940476","images/get-started/todo/email_basic.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/email_basic.jpg?updated=1710940476","images/get-started/todo/gui_graphiql_delete.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_graphiql_delete.jpg?updated=1710940476","images/get-started/todo/gui_graphiql_mutation.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_graphiql_mutation.jpg?updated=1710940476","images/get-started/todo/gui_graphiql_query.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_graphiql_query.jpg?updated=1710940476","images/get-started/todo/gui_records.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_records.jpg?updated=1710940476","images/kits/ui/Figma_pOS_AMO.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_AMO.png?updated=1710940476","images/kits/ui/Figma_pOS_atomicProcess.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_atomicProcess.png?updated=1710940476","images/graphiql/explorer-add-new.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/explorer-add-new.png?updated=1710940476","images/graphiql/history.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/history.png?updated=1710940476","images/awards/2022/Best New DX Innovation.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best New DX Innovation.png?updated=1710940476","images/kits/ui/features/variants.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/variants.png?updated=1710940476","images/awards/2022/DPA22_bestDX_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DPA22_bestDX_quote.png?updated=1710940476","images/awards/2022/DevRel_Awards_2022-Winner_badge.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DevRel_Awards_2022-Winner_badge.png?updated=1710940476","images/svg/sections/sections-sprite.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/sections-sprite.svg?updated=1710940476","images/svg/sections/use-cases.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/use-cases.svg?updated=1710940476","images/awards/2022/dpa_best_devportal_beyond_rest.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/dpa_best_devportal_beyond_rest.png?updated=1710940476","images/use-cases/nodejs-debug-logging/before.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/nodejs-debug-logging/before.jpg?updated=1710940476","images/use-cases/recording-terminal/hello.svg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/recording-terminal/hello.svg?updated=1710940476","images/best-practices/gdpr/thankyou_page.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/thankyou_page.png?updated=1710940476","images/best-practices/gdpr/unsubscribe.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/unsubscribe.png?updated=1710940476","images/best-practices/qa/smoke_testing.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/smoke_testing.png?updated=1710940476","images/best-practices/qa/test_results.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/test_results.png?updated=1710940476","images/use-cases/svg-optimization/size-comparison.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/size-comparison.jpg?updated=1710940476","images/use-cases/svg-optimization/svg-preview.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/svg-preview.jpg?updated=1710940476","images/awards/2021/Best Editorial Experience.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Editorial Experience.png?updated=1710940476","images/awards/2022/DPA22_beyondrest_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DPA22_beyondrest_quote.png?updated=1710940476","images/use-cases/recording-terminal/pos-cli.svg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/recording-terminal/pos-cli.svg?updated=1710940476","images/use-cases/social-media-cards/after.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/social-media-cards/after.jpg?updated=1710940476","images/use-cases/social-media-cards/before.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/social-media-cards/before.jpg?updated=1710940476","images/use-cases/svg-optimization/figma-design.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/figma-design.jpg?updated=1710940476","images/kits/ui/colorvariants/color_variant_description.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/colorvariants/color_variant_description.png?updated=1710940476","images/kits/ui/designkit/components.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/components.png?updated=1710940476","app.css":"https://uploads.platformos.dev/instances/85/assets/app.css?updated=1710940488","app.js":"https://uploads.platformos.dev/instances/85/assets/app.js?updated=1710940488","graphql.js":"https://uploads.platformos.dev/instances/85/assets/graphql.js?updated=1710940488","search.a0c.css":"https://uploads.platformos.dev/instances/85/assets/search.a0c.css?updated=1710940488","search.a0c.js":"https://uploads.platformos.dev/instances/85/assets/search.a0c.js?updated=1710940488","fonts/Gotham-Book.woff2":"https://uploads.platformos.dev/instances/85/assets/fonts/Gotham-Book.woff2?updated=1710940476","fonts/Gotham-Medium.woff2":"https://uploads.platformos.dev/instances/85/assets/fonts/Gotham-Medium.woff2?updated=1710940476","images/favicon-192x192.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-192x192.png?updated=1710940476","images/favicon-32x32.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-32x32.png?updated=1710940476","images/favicon-96x96.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-96x96.png?updated=1710940476","images/pos-logo-2to1.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo-2to1.png?updated=1710940476","images/awards/uktc_ceremony.jpg":"https://uploads.platformos.dev/instances/85/assets/images/awards/uktc_ceremony.jpg?updated=1710940476","images/svg/sections/api-reference.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/api-reference.svg?updated=1710940476","images/svg/sections/best-practices.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/best-practices.svg?updated=1710940476","images/svg/sections/code-kit.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/code-kit.svg?updated=1710940476","images/svg/sections/design-kit.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/design-kit.svg?updated=1710940476","images/svg/sections/get-started.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/get-started.svg?updated=1710940476","images/svg/sections/how-platformos-works.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/how-platformos-works.svg?updated=1710940476","images/use-cases/svg-optimization/outline-text.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/outline-text.jpg?updated=1710940476"}

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. 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, 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.

Contribute to this page How to Contribute

Contribute here

Questions?

We are always happy to help with any questions you may have.

contact us