# Assets

> The assets directory of a Shoplazza Theme: where CSS, JavaScript, images, and fonts live, which file types are allowed, and how to reference them in Liquid.

The `assets` directory contains all of the static files used in a theme, including images, CSS, JavaScript, and font files.

## Location

Asset files are located in the `assets` directory of the theme:

```text
.
└── assets
    ├── theme.css
    ├── theme.js
    └── logo.png
```

## Supported file types

You can include the following file types in the `assets` directory:

| Type | Extensions |
|------|------------|
| Stylesheets | `.css`, `.css.liquid` |
| Scripts | `.js`, `.js.liquid` |
| Images | `.png`, `.jpg`, `.jpeg`, `.gif`, `.svg`, `.webp`, `.ico` |
| Fonts | `.woff`, `.woff2`, `.ttf`, `.eot` |

## Referencing assets

Use the [`shoplaza_asset_url`](/docs/theme/references/liquid/filters/hosted-file#shoplaza_asset_url) Liquid filter to generate the URL for an asset file:

```liquid
{{ 'theme.css' | shoplaza_asset_url | stylesheet_tag }}
{{ 'theme.js' | shoplaza_asset_url | script_tag }}
<img src="{{ 'logo.png' | shoplaza_asset_url }}" alt="Logo">
```

### CSS

Link a stylesheet using the `stylesheet_tag` filter:

```liquid
{{ 'theme.css' | shoplaza_asset_url | stylesheet_tag }}
```

This outputs:

```html
<link rel="stylesheet" href="https://cdn.shoplazza.com/.../theme.css">
```

### JavaScript

Include a script using the `script_tag` filter:

```liquid
{{ 'theme.js' | shoplaza_asset_url | script_tag }}
```

### Images

Reference an image directly:

```liquid
<img src="{{ 'logo.png' | shoplaza_asset_url }}" alt="{{ shop.name }}">
```

## Best practices

* **Minimize file count** — Combine CSS and JavaScript files where possible to reduce HTTP requests.
* **Use CDN URLs** — Always use `shoplaza_asset_url` instead of hardcoding paths. Shoplazza serves assets through a CDN for optimal performance.
* **Optimize images** — Compress images before adding them to the assets directory. Use `.webp` format when possible.
* **Avoid `.liquid` extensions** — Use `.css` and `.js` instead of `.css.liquid` and `.js.liquid` when Liquid processing is not needed. Plain files are served faster because they don't require server-side rendering.