Assets

Learn how to manage and customize theme assets in Finqu.

Overview

Assets are files used to style and enhance your theme, including stylesheets, JavaScript, images, fonts, and other static resources. Source files live in the assets/ directory. Compiled output is written to public/ when you deploy or publish your theme.

How the asset pipeline works

1. Author — Put source files in assets/ (e.g. main.scss.liquid, logo.svg, app.js).
2. Deploy — When you run finqu theme deploy or publish from the partner portal, Finqu processes .liquid assets (renders Liquid, then compiles SCSS with Dart Sass) and writes compiled files to public/ with cache-busted filenames.
3. Reference — In templates, always use {{ 'filename.css' | asset_url }}. Never hardcode /public/ paths.

The asset_url filter resolves the correct URL for both source assets and compiled output after deploy.

SCSS with Liquid: main.scss.liquid

The main stylesheet is typically assets/main.scss.liquid. It supports SCSS and Liquid so you can inject theme settings:

/* assets/main.scss.liquid */
$primary-color: {{ settings.color_primary }};
 
.btn-primary {
  background-color: $primary-color;
}

On deploy this compiles to a hashed CSS file in public/. Reference it in your layout:

<link rel="stylesheet" href="{{ 'main.css' | asset_url }}">

Use SCSS variables, nesting, and mixins for maintainable styles. Use Liquid only where you need dynamic values from settings.

Inline assets: {% stylesheet %} and {% javascript %}

When the same CSS or JS is needed across multiple sections or blocks, use the deduplication tags so content is included only once per page:

{% stylesheet %}
  .shared-component { margin: 0; }
{% endstylesheet %}
 
{% javascript %}
  console.log('loaded once');
{% endjavascript %}

Tag bodies cannot contain Liquid. For dynamic values, use a .scss.liquid or .js.liquid file in assets/ instead.

See Store tags reference for syntax details.

Asset filters

Inline SVG icon:

<span class="icon">{{ 'icon-account.svg' | inline_asset_content }}</span>

SVG with attributes:

{{ 'icon-chevron.svg' | svg_tag: class: 'chevron', width: 16, height: 16 }}

See Additional filters and HTML filters for full syntax.

Checkout Styles: checkout.scss.liquid

You can define custom styles for the checkout by creating a checkout.scss.liquid file in the assets directory. This file is only used if your store’s plan includes checkout customization.

Other asset types

• JavaScript — .js or .js.liquid files in assets/
• Images and fonts — PNG, JPG, SVG, WebP, WOFF2, etc. in assets/
• Static data — JSON or other files referenced via asset_url

Referencing assets in Liquid

<img src="{{ 'logo.png' | asset_url }}" alt="Logo">
<link rel="stylesheet" href="{{ 'main.css' | asset_url }}">
<script src="{{ 'app.js' | asset_url }}" defer></script>

Tip: Always use asset_url instead of hardcoded paths. Filenames change after compile when content changes.

Best practices

• Keep source files in assets/; let deploy populate public/.
• Organize with subfolders (e.g. assets/images/, assets/icons/).
• Minimize and optimize images for faster loads.
• Use {% stylesheet %} / {% javascript %} for shared inline code; use assets/ for larger bundles.
• Test after deploy on a staging store — ThemeDev preview may serve assets from a temporary path.

Related articles

• Theme Architecture
• Theme Structure
• Testing & Previewing