Assets

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:

.
└── 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 Liquid filter to generate the URL for an asset file:

{{ '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:

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

This outputs:

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

JavaScript

Include a script using the script_tag filter:

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

Images

Reference an image directly:

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