Using Static Assets on Pages

This guide walks through the practical steps of including static assets (CSS, JavaScript, images, and fonts) in your Insites pages. For an overview of the asset system and directory structure, see Assets Introduction.

Including a CSS File

To add a CSS file to your pages:

1. Create your CSS file in (e.g., ).
2. Reference it in your layout or page using the filter.
3. Sync or deploy to apply the changes.

Including a JavaScript File

To add a JavaScript file:

1. Create your JS file in (e.g., ).
2. Reference it in your layout or page, ideally before the closing tag for performance.
3. Sync or deploy to apply the changes.

Including Images via CSS

To reference images from CSS files, use the filter in a Liquid file that generates the CSS. Alternatively, place images in the assets directory and use relative paths from your CSS files. After syncing, the background color, images, and other visual changes appear on your instance.

Verifying Changes

After syncing or deploying, check your instance to confirm the assets loaded correctly. If changes do not appear, try a hard refresh in your browser (Ctrl+Shift+R or Cmd+Shift+R) to bypass the browser cache.